Chrome 开发人员工具无法在“网络”->“预览”选项卡中显示 <pre> 标记

Question

我在 Xdebug 中使用 PHP。昨天一切正常，但今天我遇到一个问题：我的 Chrome 开发者工具无法显示由 Xdebug 格式化的 HTML，所有行合并为一行。

Network->Response 选项卡中的 RAW HTML 是这样的：

<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>

我已经通过 http://htmledit.squarefree.com/ 进行了测试，它显示正常，但在 Network->Preview 中显示：

回复 Headers 是 Content-Type:text/html; charset=UTF-8

我正在使用 Chrome 版本 61.0.3163.79（官方构建）（64 位）。

如何解决这个问题？

Answer 1

我在 ubuntu linux.

上使用 chrome 版本 61.0.3163.79 时遇到了同样的问题

我切换到 chromium 浏览器版本 60.0.3112.113，xdebug 输出正常。

我认为这是一个 chrome 版本问题。

Answer 2

我与 Chrome 团队一起创建了一个 bug

Answer 3

Bug 已修复。测试版本 70.0.3538.77（官方构建）（64 位）

Answer 4

我发现您的变量之间需要 <pre></pre>。我创建了一个片段来替换 'vardump' 为：

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

Ps：我用最后一个 var_dump 重复数据以获得文件名和行

所以这个：变成了这样：

如果这对你有帮助，请告诉我。

Chrome 开发人员工具无法在“网络”->“预览”选项卡中显示 <pre> 标记

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

google-chrome

google-developer-tools