Ajax Request Monitoring in Chrome

In Firefox, you could use Firebug which allows  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 the newer versions of Chrome, click the Wrench icon > Tools > Developer Tools.) to enable the Developer Tools.
  2. From within the developer tools click on the Network button. If it isn’t already, enable 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 there are 2 tabs showing the headers and return content.

How to view HTTP headers in Google Chrome

Chrome has a tab “Network” in Developer Tools with several items and when you  click on them you can see the headers on the right in a tab after choosing an item.

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

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *