Debugging XHR requests in the Web Inspector

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Alex Moore]

Note: This ticket is really a starting point for many tickets.  

We develop web applications which load from a single page load and from then,
everything is run via XHR requests using the ExtJS javascript library.

In order to be able to debug xhr heavy applications there are several features that firebug provides that prevents us using webkit (even though we prefer webkit because of it's sheer speed).

The following features is the critical missing feature in our view:
a) Unable to see the post, put or delete variables when making an XHR request.

When you make a POST, PUT, DELETE, GET in firebug the first tab is a params tab
which nicely formats all of the parameters your' XHR request is sending.  Allowing you to quickly debug what is happening.


Nice features that firebug has:
------------------------------------
a) JSON formatting of responses (makes it much easier to debug)
b) Ability to see XHR requests inline, and inspect each one
c) being able to see the XHR requests in a big list in the sequential order they we're called
d) being able to see from the main console whether a request has finished or not.
e) The ability to see the response code, and highlighting the request in red if the response code is not ok (i.e. if it's a 500)
f) all the copying options (copy, copy response body).  This is really useful if you need to external debugging or copying and pasting into unit tests. In particular the right click copy on the JSON tab to get formatted json is really good.  The ability to do this both in the request body and the response would be nice (firebug can only do the response)

Viewing Rendered Response
----------------------
One feature that firebug does not have that would be really awesome, would be the ability to either middle click on the response (to open in a new tab) and have the new tab perform the exact action the request did (whether it was a POST, GET or DELETE) and load up the response text.  This would be very usefull for reading the response of XHR requests that cause server side errors.  Currently if firebug returns a 500, we have to basically read through the response as html source to read the error message. So someway of rendering that content would be nice.

Essentially the XHR tracking of firebug is near perfect for ajax heavy applications apart from it's other speed issues. 

Example:
-----------
http://ccinct.com/lab/filter-grid/
This can be used to fire of various ajax requests (although the data is broken so it doesn't return any data into the widget).  But for seeing the requests it's fine.

[Alex Moore]

The following bugs relate too improving XHR debugging and cover some of the points in my original post:

https://bugs.webkit.org/show_bug.cgi?id=17776
AJAX (XHR) support for the Inspector comparable to Firebug's

https://bugs.webkit.org/show_bug.cgi?id=20323
XHRs in the console should show the total time it took to complete.

https://bugs.webkit.org/show_bug.cgi?id=19662
XHRs in the console should show the total time it took to complete.

https://bugs.webkit.org/show_bug.cgi?id=27126
XHR Reponse Stuffed Into Tiny Window

[Alex Moore]

Another Ticket:
https://bugs.webkit.org/show_bug.cgi?id=22920

[Timothy Hatcher]

Item C has been addressed with the addition of scope bars. Letting you see only XHRs in order.

[Dragos Rusea]

This is the only thing right now that's stopping me from switching from firebug to webkit dev tools.

I have the problem that i (think i) was able to debug XHRs (and now i´m not anymore).
Is this bug already known? Is a fix planed?

[Brian Burg]

Please file additional bugs if any feature requests come up: https://www.webkit.org/new-inspector-bug