通过Chrome Developer工具查看AJAX调用的HTML响应？

Question

因此，在我的JavaScript中，我在我的网站上呼叫Ajax呼叫。哎呀，有些事情失败了。没问题。这是我在Firefox中所做的事情：

1. 打开火焰控制台
2. 查找失败的AJAX调用，然后单击 +符号以查看更多信息。
3. 响应选项卡具有原始HTML。谁想阅读所有这些？我单击“ HTML”选项卡。
4. 啊，django返回的格式良好的HTML显示了我的分歧为零错误。

现在，这就是我目前在Chrome中所做的事情：

1. Ctrl+Shift+J打开开发人员工具
2. 去资源
3. 向下滚动到Ajax电话，然后单击
4. 再次，我看到了RAW HTML。仍然不想阅读所有这些内容，但是由于没有HTML选项卡，因此我将其复制并粘贴到文本编辑器中。
5. 保存HTML文件
6. 在浏览器中打开HTML文件，因此我可以阅读Django返回的错误HTML

因此，问题。无论如何，是否可以查看浏览器中AJAX调用的HTML响应，而无需将RAW HTML复制并粘贴到文本编辑器中？

Answer 1

不，目前没有办法。当您获得开发人员工具>资源> XHR选项卡>并单击您的资源（左侧）时，您会看到两个选项卡。第一个是标题（原始）和原始的内容。

Answer 2

只是为了您的信息，而Firebug Lite确实 不是 有一个网络面板 做 具有XHR观察器功能，具有相同的外观和感觉。当然，与Chrome Developer工具相比，Firebug Lite非常有限，但是对于某些特定任务，例如CSS编辑或XHR检查，Firebug Lite做得很好。

当前的稳定版本向您显示HTTP标头，获取和发布变量以及响应文本。但是下一个版本1.3.1（即将发布）包括HTML查看器，XML查看器和方便的JSON Viewer（用于请求和响应数据）。

此功能将包含在下一个版本1.3.1b2（可能是1.3.1版本的最后一个Beta版本）中，但是如果您想立即看到它运行，则可以使用 开发人员频道.

Answer 3

是的，最简单的方法是在开发人员工具中使用“网络”选项卡。

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

Answer 4

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

Answer 5

由于我注意到右键单击“保存为“能力”在网络> XHR>响应选项卡上不再存在...我创建了一个新的自动hotkey脚本：（单击响应文本上的中间鼠标按钮）

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的开发人员工具>网络选项卡中的该响应窗口内按中间鼠标按钮（鼠标轮按钮），它将执行以下步骤：

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的火焰，它变得非常慢！