Ajax Request Monitoring in Chrome

In Firefox, you could use Firebug, which allows you to view every HTTP request that Ajax calls are making. How to view each Ajax request in Chrome Developer Tools?

How to view Ajax HTTP requests in Chrome

1. Use CTRL+SHIFT+I (or navigate to Current Page Control > Developer > Developer Tools. In newer versions of Chrome, click the Wrench icon > Tools > Developer Tools to open Developer Tools.
2. From within the developer tools, click on the Network button. If it isn’t already, will allow it for the session or always.
3. Click the "XHR" sub-button.
4. Initiate an AJAX call.
5. You will see items begin to show up in the left column under "Resources".
6. Click the resource, and two tabs show the headers and the return content.

How to view HTTP headers in Google Chrome

In Chrome, the Developer Tools “Network” tab shows different requests, and when you click one, you can see the headers on the right in a separate tab.

To show Chrome Developer Tools, press F12 or CTRL+SHIFT+I on Windows or ⌥⌘I on a Mac.