通过Chrome Developer工具查看来自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复制并粘贴到文本编辑器中？

Answer 1

不，目前没办法。当您转到开发人员工具＆gt;资源＆gt; XHR选项卡＆gt;然后单击您的资源（左侧），您会看到两个选项卡。第一个是Headers（原始的）和Content也是原始的。

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。< / p>

Answer 3

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

1. Ctrl + Shift + I打开开发人员工具（或使用顶部的菜单栏：“查看 - ＆gt;开发人员 - >开发人员工具”）
2. 转到“网络”标签
3. 刷新当前页面
4. 向下滚动到左侧的Ajax调用，然后单击
5. 主菜单将显示多个标签（通常默认为预览）。单击“标题”，您将看到“请求和响应”标题信息。

Answer 4

右键单击firebug中控制台选项卡中的请求链接。然后右键单击并在新选项卡中选择打开响应。您将其视为HTML。

Answer 5

由于我注意到网络＆gt; XHR＆gt;响应标签上的右键单击“另存为”功能不再存在...我创建了一个新的自动热键脚本:(在响应文本上单击鼠标中键）< / p>

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

Answer 6

您可以下载autohotkey并编写一个快速宏来执行在浏览器窗口中查看XHR响应所需的步骤...

这是我在autohotkey中写的一个脚本，如果你在Chrome的开发者工具＆gt;中的那个响应窗口内按下鼠标中键（鼠标滚轮按钮）。网络标签，它将执行以下步骤：

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
   

这应该让你知道谷歌会发布更新，以便更好地查看HTML响应。我不再使用FF的FireBug，它变得非常慢！