blocks|key|300746|text|不，目前还没有办法。当您转到Developer+Tools+>+Resources+>+XHR+Tab+>并单击您的资源(左侧)时，您会看到两个选项卡。第一个是头(它是原始的)和内容也是原始的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300747|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|3248723|text|仅供你参考，虽然Firebug+Lite没有有一个网络面板，但它有一个XHR观察器功能，具有与Firebug相同的外观和感觉。当然，与Chrome开发人员工具相比，Firebug+Lite非常有限，但对于一些特定的任务，如CSS编辑或XHR检查，Firebug+Lite做得非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3248724|当前的稳定版本显示了HTTP标头、GET和POST变量以及响应文本。但是下一个版本1.3.1+(即将发布)包括HTML查看器、XML查看器和方便的JSON查看器(用于请求和响应数据)。|3248725|这个特性将包含在下一个版本1.3.1b2中(可能是1.3.1版本的最后一个测试版)，但是如果你想现在就看到它运行，你可以使用developer+channel。|offset|length|3248726|entityMap|0|LINK|mutability|MUTABLE|url|http://getfirebug.com/firebuglite#Developer^0|0|0|1Q|H|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Just for your information, while Firebug Lite does not have a NET panel, it does have 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.

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

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 <a href="http://getfirebug.com/firebuglite#Developer" rel="nofollow noreferrer">developer channel</a>.

blocks|key|3034616|text|是的，最简单的方法是使用开发人员工具中的网络选项卡。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3034617|3034618|Ctrl%2BShift%2BI打开开发人员工具(或使用顶部的菜单栏：“查看->+Developer+->开发人员工具”)|ordered-list-item|3034619|转到“网络”选项卡|3034620|刷新当前页面|3034621|向下滚动到左侧的Ajax调用并单击|3034622|主菜单将显示几个选项卡(通常默认为预览)。单击"Headers“，您应该会看到请求和响应头information.|3034623|3034624|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|E|7|V|8|@]|9|@]|A|$]]|$1|L|3|M|5|E|7|W|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

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

<ol>
<li>Ctrl+Shift+I to open the Developer Tools (or use the menu bar at the top: "View -> Developer -> Developer Tools")</li>
<li>Go to "Network" tab</li>
<li>Refresh your current page</li>
<li>Scroll down to the Ajax call on the left and click</li>
<li>The main menu will show several tabs (usually defaulting to Preview). Click on "Headers" and you should see the Request and Response header information.</li>
</ol>

blocks|key|3248791|text|您可以下载autohotkey并编写一个快速宏来执行在浏览器窗口中查看XHR响应所需的步骤……|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3248792|这是我用autohotkey写的一个脚本，如果你在Chrome的开发人员工具>网络选项卡中的响应窗口中按下鼠标中键(鼠标滚轮按钮)，它将执行以下步骤：|3248793|3248794|Right+click...click+click...click+as|ordered-list-item|3248795|将文件位置粘贴到文件提示符中，然后按Enter|3248796|打开文件(使用默认设置|3248797|3248798|MButton:：MouseClick，右睡眠，MouseGetPos，xpos，ypos+xpos+:=+xpos+%2B5+ypos+:=+ypos+%2B5+MouseMove，xpos，ypos+MouseClick，左睡眠，500+ClipSaved+:=+ClipboardAll剪贴板发送，%5Ev+{Enter}剪贴板=+%25ClipSaved%25睡眠，500运行，打开"C:\Users\David\Desktop\temp_xhr_response.html“睡眠，1000+FileDelete，C:\Users\David\Desktop\temp_xhr_response.html+return|3248799|在Google发布更新以更好地查看HTML响应之前，这应该会让你一直坚持下去。我不再使用FF的FireBug了，它变得令人难以置信的慢！|3248800|entityMap|0|LINK|mutability|MUTABLE|url|http://www.autohotkey.com/|1^0|5|A|0|0|4|A|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|F|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|1A|8|@]|9|@]|C|$]]|$1|J|3|K|5|I|7|1B|8|@]|9|@]|C|$]]|$1|L|3|M|5|I|7|1C|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|Z]]]]

You could download <a href="http://www.autohotkey.com/" rel="nofollow">autohotkey</a> and write a quick macro to do the steps needed to see the XHR response in a browser window...

Here's a script I wrote in <a href="http://www.autohotkey.com/" rel="nofollow">autohotkey</a> that 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:

<ol>
<li>Right click...click save as</li>
<li>Paste file location into file prompt and press Enter</li>
<li>Open the file (uses default browser)</li>
<li>Delete the file

<pre><code>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
</code></pre></li>
</ol>

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!

blocks|key|3034668|text|由于我注意到右键单击“另存为”功能不再存在于Network>XHR>response选项卡上，...I创建了一个新的自动热键脚本：(在响应文本上单击鼠标中键)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3034669|MButton::
MouseClick,+left
ClipSaved+:=+ClipboardAll
Send,+%5Ea%5Ec
sleep,+500
FileName+:=+"C:\Users\David\Desktop\temp_xhr_response.html"
file+:=+FileOpen(FileName,+"w")
if+!IsObject(file)
{
MsgBox+Can't+open+"%25FileName%25"+for+writing.
return
}
StringGetPos,+pos,+Clipboard,+HeadersPreviewResponseCookiesTiming
if+pos+=+-1
{
pos+=+0+
}
TestString+:=+SubStr(Clipboard,+pos%2B38)
file.Write(TestString)
file.Close()
Run,+open+"C:\Users\David\Desktop\temp_xhr_response.html"
Clipboard+=+%25ClipSaved%25
sleep,+1000
FileDelete,+C:\Users\David\Desktop\temp_xhr_response.html
return|code-block|syntax|javascript|3034670|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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)

<pre><code>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
</code></pre>

blocks|key|303972|text|在firebug的控制台选项卡中右键单击请求的链接。然后右键单击并选择open+response+in+new+tab。您将看到它是HTML。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|303973|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

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:

<ol>
<li>Open the firebug console</li>
<li>Find the failed Ajax call and click the + sign to see more info.</li>
<li>The response tab has the raw HTML. Who wants to read all that? I click the HTML tab.</li>
<li>Ah, the nicely formatted HTML returned by Django shows my divide by zero error.</li>
</ol>

Now here's what I currently do in Chrome:

<ol>
<li>Ctrl+Shift+J to open the Developer Tools</li>
<li>Go to Resources</li>
<li>Scroll down to the Ajax call and click</li>
<li>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.</li>
<li>Save html file</li>
<li>Open html file in browser so I can read the error HTML returned by Django</li>
</ol>

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?

Viewing HTML response from Ajax call through Chrome Developer tools?

Django

JSON

所以在我的javascript中，我对我的网站上的一个服务进行了一个ajax调用。哦，有什么地方出问题了。没问题。下面是我在Firefox中要做的事情：打开firebug控制台找到失败的Ajax调用并单击+号查看更多信息。响应选项卡中有原始的超文本标记语言。谁想把这些都读出来呢？我点击超文本标记语言标签。啊，Djang...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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