当前位置：theitroad>Javascript 通过 Chrome 开发人员工具查看来自 Ajax 调用的 HTML 响应？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/3181287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 03:35:20 　来源:igfitidea点击:

Viewing HTML response from Ajax call through Chrome Developer tools?

javascriptajaxfirebuggoogle-chrome-devtools

提问by Eric Palakovich Carr

So in my javascript I'm making an ajax call to a service on my website. Whoops, something fails. No problem. Here's what I'd do in Firefox:

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

  1. Open the firebug console
  2. Find the failed Ajax call and click the + sign to see more info.
  3. The response tab has the raw HTML. Who wants to read all that? I click the HTML tab.
  4. Ah, the nicely formatted HTML returned by Django shows my divide by zero error.
  1. 打开萤火虫控制台
  2. 找到失败的 Ajax 调用并单击 + 号以查看更多信息。
  3. 响应选项卡具有原始 HTML。谁想阅读所有这些？我单击 HTML 选项卡。
  4. 啊，Django 返回的格式很好的 HTML 显示了我的除以零错误。

Now here's what I currently do in Chrome:

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

  1. Ctrl+Shift+J to open the Developer Tools
  2. Go to Resources
  3. Scroll down to the Ajax call and click
  4. Once again, I see raw HTML. Still don't want to read all that, but since there isn't an HTML tab I copy and paste into a text editor.
  5. Save html file
  6. Open html file in browser so I can read the error HTML returned by Django
  1. Ctrl+Shift+J 打开开发者工具
  2. 前往资源
  3. 向下滚动到 Ajax 调用并单击
  4. 我再次看到原始 HTML。仍然不想阅读所有内容，但由于没有 HTML 选项卡，我将其复制并粘贴到文本编辑器中。
  5. 保存 html 文件
  6. 在浏览器中打开 html 文件，以便我可以读取 Django 返回的错误 HTML

So on to the question. Is there anyway to view the HTML response from an Ajax call rendered in the browser without having to copy and paste the raw html to a text editor?

那么问题来了。有没有办法查看来自浏览器中呈现的 Ajax 调用的 HTML 响应，而不必将原始 html 复制并粘贴到文本编辑器中？

采纳答案by Mohamed Mansour

Nope, there is currently no way. When you goto Developer Tools > Resources > XHR Tab > And click on your resource (on the left), you see two tabs. The first one being Headers (which is raw) and Content which is raw as well.

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

回答by Pedro Simonetti

Just for your information, while Firebug Lite does nothave a NET panel, it doeshave a XHR watcher feature with the same look and feel of Firebug. Of course, Firebug Lite is very limited compared to Chrome Developer Tools, but for some specific tasks like CSS editing or XHR inspection, Firebug Lite does the job very well.

只是为了您的信息，而Firebug的精简版并没有有NET面板，它确实具有相同的外观和感觉萤火虫的XHR守望功能。当然，Firebug Lite 与 Chrome 开发者工具相比非常有限，但对于某些特定任务，如 CSS 编辑或 XHR 检查，Firebug Lite 可以很好地完成这项工作。

The current stable version shows you the HTTP headers, GET and POST variables, and the response text. But the next version 1.3.1 (which will be released soon) includes the HTML viewer, XML viewer and the handy JSON viewer (for both request and response data).

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

This feature will be included in the next release 1.3.1b2 (probably the last beta version for the 1.3.1 version), but if you want to see it running right now you can use the developer channel.

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

回答by Ry Robinson

Yes, the easiest way is to use the Network tab in the Developer Tools.

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

  1. Ctrl+Shift+I to open the Developer Tools (or use the menu bar at the top: "View -> Developer -> Developer Tools")
  2. Go to "Network" tab
  3. Refresh your current page
  4. Scroll down to the Ajax call on the left and click
  5. The main menu will show several tabs (usually defaulting to Preview). Click on "Headers" and you should see the Request and Response header information.
  1. Ctrl+Shift+I 打开开发者工具（或使用顶部菜单栏：“查看 -> 开发者 -> 开发者工具”）
  2. 转到“网络”选项卡
  3. 刷新当前页面
  4. 向下滚动到左侧的 Ajax 调用并单击
  5. 主菜单将显示几个选项卡（通常默认为预览）。单击“Headers”，您应该会看到请求和响应头信息。

回答by Tinh Dang

Right click on the requested link in console tab in firebug. Then right click and choose open response in new tab. You will see it as HTML.

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

回答by prograhammer

Since I noticed the right-click "save as" ability is no longer there on the Network>XHR>response tab ...I created a new auto-hotkey script: (click middle mouse button on the response text)

由于我注意到“网络”>“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

回答by prograhammer

You could download autohotkeyand write a quick macro to do the steps needed to see the XHR response in a browser window...

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

Here's a script I wrote in autohotkeythat if you press the middle mouse button (mousewheel button) inside that response window in Chrome's Developer Tools > Network tab, it will do these steps:

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

  1. Right click...click save as
  2. Paste file location into file prompt and press Enter
  3. Open the file (uses default browser)

  4. Delete the file

    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
  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

This should hold you over til Google releases an update for better viewing for HTML responses. I'm not using FF's FireBug anymore, it's become incredibly slow!

这应该会让您坚持到 Google 发布更新以更好地查看 HTML 响应。我不再使用 FF 的 FireBug，它变得非常慢！

相关推荐

如何最好地在 JavaScript 中实现参数？

如何最好地在 JavaScript 中实现参数？

Javascript 为什么 TypeScript 中的 'instanceof' 给我错误“'Foo' 仅指一种类型，但在此处用作值。”？

Javascript 为什么 TypeScript 中的 'instanceof' 给我错误“'Foo' 仅指一种类型，但在此处用作值。”？

Javascript AngularJS：请求的资源上不存在“Access-Control-Allow-Origin”标头

Javascript AngularJS：请求的资源上不存在“Access-Control-Allow-Origin”标头

Javascript 如何使用javascript通过onclick隐藏div？

Javascript 如何使用javascript通过onclick隐藏div？

相关推荐
最近更新
标签