通过Chrome开发者工具查看Ajax调用的HTML响应？

Question

我的 JavaScript 代码中有一个 Ajax 调用，用来访问我的网站上的服务。但是，出现了一些错误，没关系，在 Firefox 中，我会这样做：

1. 打开 Firebug 控制台
2. 找到失败的 Ajax 调用并单击“+”符号以查看更多信息。
3. 响应选项卡显示原始 HTML。谁想读所有那些内容呢？我单击“HTML”选项卡。
4. 好了，Django 返回的漂亮格式化的 HTML 显示了我的除零错误。

现在，我在 Chrome 中当前要做的事情如下：

1. 按下 Ctrl+Shift+J 打开开发者工具
2. 进入资源
3. 下拉到 Ajax 调用并单击
4. 再次看到原始 HTML。仍然不想读所有那些内容，但由于没有 HTML 选项卡，因此我将其复制并粘贴到文本编辑器中。
5. 保存 html 文件
6. 在浏览器中打开 html 文件，以便阅读 Django 返回的错误 HTML

因此，问题来了。有没有办法在浏览器中查看渲染的 Ajax 响应的 HTML，而无需将原始 HTML 复制并粘贴到文本编辑器中？

- Eric Palakovich Carr

Answer 1

目前还没有办法。当你进入开发者工具 > 资源 > XHR选项卡 > 并点击左侧的资源时，你会看到两个选项卡。第一个是标题（原始数据），第二个是内容（同样是原始数据）。

- Mohamed Mansour

---

是的，我也想到了，但觉得问一下也无妨。我再等一天，既然你这么好心回答，就接受这个答案吧。 - Eric Palakovich Carr

也许可以添加第三个标签，我们可以称之为“查看器”。因此，根据内容类型（json、xml、html、纯文本），它会以不同的方式呈现。请随意在 http://crbug.com/new 提交功能请求，我可以将该错误标记为可用，以便人们可以对其进行分类、分配或贡献修补程序。这应该很容易实现，因为所有的JavaScript都是可用的。 - Mohamed Mansour

完成了，已添加到分类阶段，这是一个非常好的功能。谢谢！ - Mohamed Mansour

Answer 2

只是提供信息，虽然Firebug Lite没有NET面板，但它具有与Firebug相同外观和感觉的XHR监视器功能。当然，与Chrome开发人员工具相比，Firebug Lite非常有限，但对于某些特定任务（如CSS编辑或XHR检查），Firebug Lite做得非常好。 当前稳定版本向您显示HTTP标头，GET和POST变量以及响应文本。但下一个版本1.3.1（即将发布）包括HTML查看器，XML查看器和方便的JSON查看器（用于请求和响应数据）。 此功能将包含在下一个版本1.3.1b2中（可能是1.3.1版本的最后一个测试版），但如果您想立即看到它运行，可以使用developer channel。

- Pedro Simonetti

Answer 3

在Firebug的控制台选项卡中，右键点击所请求的链接。然后右键单击并选择在新标签页中打开响应。您将以HTML格式查看它。

- Tinh Dang

Answer 4

是的，最简单的方法是使用开发者工具中的网络标签。

1. 按Ctrl+Shift+I打开开发者工具（或使用顶部菜单栏：“查看 -> 开发人员 -> 开发者工具”）
2. 进入“网络”选项卡
3. 刷新您当前的页面
4. 向左滚动到Ajax调用并单击
5. 主菜单将显示多个选项卡（通常默认为预览）。 点击“标头”，您应该可以看到请求和响应标头信息。

- Ry Robinson

Answer 5

自从我注意到在Network>XHR>响应选项卡上右键“另存为”的功能不再存在...我创建了一个新的AutoHotkey脚本：（在响应文本上单击中间鼠标按钮）

MButton::
MouseClick, left
ClipSaved := ClipboardAll
Send, ^a^c
sleep, 500
FileName := "C:\Users\David\Desktop\temp_xhr_response.html"
file := FileOpen(FileName, "w")
if !IsObject(file)
{
MsgBox Can't open "%FileName%" for writing.
return
}
StringGetPos, pos, Clipboard, HeadersPreviewResponseCookiesTiming
if pos = -1
{
pos = 0 
}
TestString := SubStr(Clipboard, pos+38)
file.Write(TestString)
file.Close()
Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
Clipboard = %ClipSaved%
sleep, 1000
FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
return

- prograhammer

Answer 6

你可以下载autohotkey并编写一个快速宏来执行必要的步骤，以在浏览器窗口中查看XHR响应... 这是我在autohotkey中编写的脚本，如果你在Chrome的开发者工具>网络选项卡中的响应窗口内按下中间鼠标按钮（鼠标滚轮按钮），它将执行以下步骤：

1. 右键...点击另存为
2. 将文件位置粘贴到文件提示中，然后按Enter键
3. 打开文件（使用默认浏览器）

4. 删除文件

   MButton::
   MouseClick, right
   MouseGetPos, xpos, ypos
   xpos := xpos + 5
   ypos := ypos + 5
   MouseMove, xpos, ypos
   MouseClick, left
   Sleep, 500
   ClipSaved := ClipboardAll
   Clipboard := "C:\Users\David\Desktop\temp_xhr_response.html"
   Send, ^v  {Enter}
   Clipboard = %ClipSaved%
   sleep, 500
   Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
   sleep, 1000
   FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
   return
   

在 Google 发布更好的 HTML 响应查看更新之前，这应该能够帮到你。我不再使用 FF 的 FireBug，它变得非常缓慢！

- prograhammer