Chrome Developer Tools cannot show <pre> tag in Network->Preview tab

Question

I'm using PHP with Xdebug. Yesterday everything is OK but today I have one problem: My Chrome Developer tools cannot show the HTML which formatted by Xdebug, all lines are combined to one line.

The RAW HTML in Network->Response tab is something like this:

<pre class='xdebug-var-dump' dir='ltr'>
<small>C:\wamp\Debug.php:68:</small>
<b>array</b> <i>(size=18)</i>
  'name' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'abc'</font> <i>(length=56)</i>
  'img' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'http://product.net/1000169499.jpg'</font> <i>(length=69)</i>
</pre>

I have tested by http://htmledit.squarefree.com/ and it shows normally but in Network->Preview displays:

Respone Headers is Content-Type:text/html; charset=UTF-8

I'm using Chrome Version 61.0.3163.79 (Official Build) (64-bit).

How to resolve this problem?

Answer 1

Bug was fixed. Tested on Version 70.0.3538.77 (Official Build) (64-bit)

Answer 2

I had the same problem using chrome version 61.0.3163.79 on ubuntu linux.

I switched to chromium browser version 60.0.3112.113 and the xdebug output was fine.

I think that this is a chrome version problem.

Answer 3

I have created a bug with the Chrome team

Answer 4

What I've found is that you gonna need <pre></pre> between your variable. I've created a snippet to replace 'vardump' with this:

foreach ($variable as $key => $reg) {
    echo "<pre>{$key} => '{$reg}'</pre>";
}
var_dump($variable);die;

Ps: I'm repeating the data with the last var_dump to get the filename and line

So this: Became this:

Let me know if this will help you.