Chrome开发者工具响应/预览选项卡的"Pretty Print"或"Formatting"功能

51

有没有人知道一个Chrome开发工具的工具或扩展,可以在响应是XML或JSON时对其进行格式化。我已经搜索了很多,但并没有找到任何可以正确格式化xml或json响应文本的工具。

输入图像描述


3
我认为你可以将它粘贴到JSBeautifier中,它会为你格式化代码,并使其更易于阅读。 - sachleen
7
我想找一种不用从Chrome中复制和粘贴内容的穿戴品。我已经在根据我的任务使用多个工具来格式化响应,以使其更易读,但我希望能够节省时间。如果每次查看响应时都无需剪切和粘贴,那将更加方便。 - DRobertE
7个回答

83

在您的截图中,您只需选择“预览”选项卡即可。无论如何,对我来说都起作用。也许您没有正确设置Content-Type响应头?

如果响应代码为200,则可以正常工作。 (也许是2xx)。然而,我发现如果响应代码为500,则无法正常工作。


3
头文件应该是什么样的?我使用了 Content-type: text/xml<?xml version="1.0" encoding="utf-8"?>,但在预览时,它仍然是普通文本,并且只有一行。我尝试了 Content-type: application/xml,但也没有格式化XML。 - hobbes3
1
@romacafe(以及其他可以在“预览”选项卡中看到XML格式的人),您的服务器返回的内容类型是什么?在此问题首次提出两年多后,我仍然无法在Chrome 39上看到XML格式。 - avernet
1
有一段时间没有碰这个了... 我相当确定它是 application/xml,正如我所指出的,如果响应代码在500范围内,无论内容类型如何,XML都不会为我格式化。 - romacafe
4
我不喜欢这个。预览不是漂亮的打印格式,而是以结构化格式解析和显示。对于复杂的回复,你必须分别打开每个 JSON 属性。对于 JSON API 的回复来说,这根本不实用。 - blueFast
在Chrome开发者控制台中,无论是在预览、元素或控制台视图中,只要有分层数据,您都可以右键单击任何可折叠的行,并选择“递归展开”和“折叠子项”,以一次性展开和折叠所有内部元素。 - Cowdozer

4
另一种处理方法是在开发者工具的网络标签中右击请求,然后选择“复制响应”。然后在控制台窗口中输入以下内容:
var a = 

然后粘贴并按回车键。

接下来输入以下内容:

a

然后再次按回车键,整个JSON响应将以可展开/可折叠的形式显示。

3

这可能不是完全准确的方法,但我会观察请求,并使用jsonview来查看与json相关的内容。


2
Chrome现在有一个按钮用于美化响应:

Pretty print button


1

我希望Chrome在没有Content-type头时仍然尝试解析响应。但是,幸运的是Firebug可以。你必须使用Firefox,但处理XML时它非常有价值。


0

尝试在源代码中进行格式化。 对于PHP和DomDocument:

$doc = new DomDocument('1.0');
$doc->formatOutput = true;

看起来Chrome没有简单的解决方案。


-1

我保证这已经足够好了...

  • 安装JSON Viewer
  • 在网络 > 抓取/XHR 中查找请求
  • 双击你感兴趣的请求,在左侧名为Name的侧面板中打开

它会打开一个新标签页,但速度非常快,格式也很清晰...


这个不起作用,它只是打开一个新标签页,显示请求的URL。 - GhostBytes

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接