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

Posted 2023-03-31

【中文标题】通过 Chrome 开发者工具查看来自 Ajax 调用的 HTML 响应？

【英文标题】：Viewing HTML response from Ajax call through Chrome Developer tools?

【发布时间】：2010-07-05 17:48:17

【问题描述】：

因此，在我的 javascript 中，我正在对我网站上的服务进行 ajax 调用。哎呀，有些事情失败了。没问题。这是我在 Firefox 中要做的事情：

打开萤火虫控制台 找到失败的 Ajax 调用并单击 + 号以查看更多信息。 响应选项卡具有原始 html。谁愿意阅读所有内容？我单击 HTML 选项卡。 啊，Django 返回的格式良好的 HTML 显示我的除以零错误。

现在这是我目前在 Chrome 中所做的：

Ctrl+Shift+J 打开开发者工具 转到资源 向下滚动到 Ajax 调用并单击 又一次，我看到了原始 HTML。仍然不想阅读所有内容，但由于没有 HTML 选项卡，我将其复制并粘贴到文本编辑器中。 保存html文件 在浏览器中打开 html 文件，以便读取 Django 返回的错误 HTML

那么问题来了。是否可以在浏览器中查看来自 Ajax 调用的 HTML 响应，而无需将原始 html 复制并粘贴到文本编辑器？

【参考方案1】：

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

【讨论】：

是的，我想这么多，但想问也无妨。我改天再给这个，既然你很好回答，请接受这个答案。

也许我们可以创建第三个标签页，我们可以称之为查看器。因此，根据内容类型（json、xml、html、plain）的不同，它的呈现方式会有所不同。请随时在crbug.com/new 中提交功能请求，我可以将该错误标记为可用，以便人们可以对其进行分类、分配或有人可以为其提供补丁。应该不难实现，因为它所有的 JavaScript 和一切都是可用的。

完成，将其添加到分类阶段，拥有很棒的功能。谢谢！

【参考方案2】：

仅供参考，虽然 Firebug Lite 没有具有 NET 面板，但它确实具有 XHR 观察器功能，具有与 Firebug 相同的外观和感觉。当然，与 Chrome 开发者工具相比，Firebug Lite 的功能非常有限，但对于一些特定的任务，例如 CSS 编辑或 XHR 检查，Firebug Lite 可以很好地完成这项工作。

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

此功能将包含在下一个版本 1.3.1b2（可能是 1.3.1 版本的最后一个测试版）中，但如果您想立即看到它运行，可以使用 developer channel。

【参考方案3】：

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

Ctrl+Shift+I 打开开发者工具（或使用顶部的菜单栏：“查看 -> 开发者 -> 开发者工具”） 转到“网络”标签 刷新当前页面 向下滚动到左侧的 Ajax 调用并单击 主菜单将显示几个选项卡（通常默认为预览）。点击“Headers”，您应该会看到 Request 和 Response 标头信息。

【参考方案4】：

在 firebug 的控制台选项卡中右键单击请求的链接。然后右键单击并选择在新选项卡中打开响应。您会看到它是 HTML。

【参考方案5】：

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

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

【参考方案6】：

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

这是我在autohotkey 中编写的脚本，如果您在 Chrome 的“开发者工具”>“网络”选项卡的响应窗口中按下鼠标中键（鼠标滚轮按钮），它将执行以下步骤：

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

删除文件

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