Chrome firebug technology for tracking ajax requests

Question

I am trying to make my google chrome extension to track ajax requests while browsing the web. The only way I found is to listen for the DOMSubtreeModified event. An event is fired on every ajax event, but there is no additional information about the request. But in Firebug google chrome extension there is ajax request 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 these events to get detailed information about the request? Maybe someone can take a look at this firefighter technique or maybe someone knows this and can tell me how they do it?

Answer 1

There are a few things you can do with the Chrome developer tools for debugging AJAX requests:

• Take a look at the tab. It tracks all requests (AJAX), their request and response headers.
• Enable XHR console logging in devtools (right-click in the Developer Tools console and select "Enable XMLHttpRequest logging".
• Set an XHR breakpoint .

In your case, there is no need for DOM breakpoints. Plus, this approach will only work if your AJAX request modifies the DOM tree.

Answer 2

There is currently no way to programmatically retrieve all the information about ajax requests like the Network tab.

There is an experimental chrome.experimental.webRequest.onCompleted.addListener , with it you can catch an ajax request, get a response response code (200 404) and get some response headers, you can’t get the response body.