Chrome's firebug's technic to track ajax requests

Question

I'm trying to make my google chrome extension to track ajax requests while browsing web. Only way i found is to listen for DOMSubtreeModified event. Event is fired on every single ajax event but there is no additional information about the request. But in Firebug google chrome extension there is ajax requests tracking with many details. I tried to check how they do it in the source code but it's hard for me to understand.

Do You know how to track those events to get some details about request? Maybe someone could take a look at this firebug's technic or maybe someone knows it and could tell me how they do it?

Answer 1

There's a few things you can do with the Chrome Developer Tools for debugging AJAX requests:

1. Look at the network tab. It tracks all (AJAX) requests, their request and response headers.
2. Enable XHR console logging in the devtools (right-click in the Developer Tools console, and click "Enable XMLHttpRequest logging".
3. Set an XHR breakpoint.

There's no need for DOM breakpoints in your case. Plus that approach would only work if your AJAX request modifies the DOM tree.

Answer 2

Currently there is no way of programmatically getting all info about ajax requests similar to Network tab.

There is experimental chrome.experimental.webRequest.onCompleted.addListener, with it you can catch ajax request, get returned response code (200,404), and get some response headers. You won't be able to get response body.