Viewing HTML response from Ajax call through Chrome Developer tools?

Question

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:

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.

Now here's what I currently do in 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

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?

Answer 1

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.

Answer 2

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 developer channel.

Answer 3

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.

Answer 4

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.

Answer 5

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)

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

You could download autohotkey 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 autohotkey 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:

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
   

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!