Chrome 开发者工具无法在 Network->Preview 选项卡中显示 <pre> 标签答案

【问题标题】：Chrome Developer Tools cannot show <pre> tag in Network->Preview tabChrome 开发者工具无法在 Network->Preview 选项卡中显示 <pre> 标签
【发布时间】：2017-09-07 08:34:38
【问题描述】：

我将 PHP 与 Xdebug 一起使用。昨天一切正常，但今天我有一个问题：我的 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 显示：

响应头是Content-Type:text/html; charset=UTF-8

我使用的是 Chrome 版本 61.0.3163.79（官方版本）（64 位）。

如何解决这个问题？

【问题讨论】：

标签： google-chrome google-developer-tools

【解决方案1】：

我与 Chrome 团队创建了一个bug

【讨论】：

太棒了。让我们等待错误修复

【解决方案2】：

我发现你的变量之间需要<pre></pre>。我创建了一个 sn-p 来替换 'vardump'：

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

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

所以：变成了这样：

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

【讨论】：

感谢您的帮助。但是这个问题在 v62.x 上得到了修复
到现在为止。谢谢
嗨，我在 62.0.3202.75 版本中，当我 var_dump 一个变量时遇到这个问题

【解决方案3】：

我在 ubuntu linux 上使用 chrome 版本 61.0.3163.79 时遇到了同样的问题。

我切换到 chromium 浏览器版本 60.0.3112.113 并且 xdebug 输出很好。

我认为这是chrome版本的问题。

【讨论】：

【解决方案4】：

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

【讨论】：