Bug 28119 - Debugging XHR requests in the Web Inspector
: Debugging XHR requests in the Web Inspector
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated)
: 528+ (Nightly build)
: All All
: P2 Enhancement
Assigned To: Nobody
Depends on:
  Show dependency treegraph
Reported: 2009-08-09 01:21 PDT by Alex Moore
Modified: 2014-12-15 23:42 PST (History)
9 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Alex Moore 2009-08-09 01:21:12 PDT
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. 

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.
Comment 1 Alex Moore 2009-08-09 02:00:14 PDT
The following bugs relate too improving XHR debugging and cover some of the points in my original post:

AJAX (XHR) support for the Inspector comparable to Firebug's

XHRs in the console should show the total time it took to complete.

XHRs in the console should show the total time it took to complete.

XHR Reponse Stuffed Into Tiny Window
Comment 2 Alex Moore 2009-08-18 15:58:27 PDT
Another Ticket:
Comment 3 Timothy Hatcher 2009-09-11 20:14:29 PDT
Item C has been addressed with the addition of scope bars. Letting you see only XHRs in order.
Comment 4 Dragos Rusea 2010-07-12 23:25:10 PDT
This is the only thing right now that's stopping me from switching from firebug to webkit dev tools.
Comment 5 stuff 2013-07-29 02:40:27 PDT
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?
Comment 6 Brian Burg 2014-12-15 23:42:37 PST
Please file additional bugs if any feature requests come up: https://www.webkit.org/new-inspector-bug