Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

debug XHR in chrome browser

How to see the post content in chrome?

like image 614
lovespring Avatar asked Oct 08 '09 03:10

lovespring


People also ask

How do I debug my XHR in Chrome?

Within Chrome, it's possible to place a breakpoint on a XmlHttpRequest allowing you to debug AJAX requests. You can add a breakpoint by going to the "Sources" tab and selecting "XHR Breakpoints". Click the plus icon and type part or all of the URL you wish to add a breakpoint for.

How do I enable XHR in Chrome?

1. Open Chrome browser 2. Go to chrome://flags/#allow-sync-xhr-in-page-dismissal 3. Change the drop-down selection from “Default” or “Disabled” to “Enabled”.

What is XHR in Network in Chrome?

XMLHttpRequest (XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server.


6 Answers

Start up the Developer tools (Shift+Ctrl+J on Linux) and click Enable Resource Tracking. The page will refresh. Click on the Resources button, XHRs are colored yellow. To see the post content simply click on the resource. The POST content is in the Request Headers. You can also filter out just the XHRs with the XHR button in the bar below the tabs.

Hope this helps,
d34dh0r53

like image 158
d34dh0r53 Avatar answered Oct 20 '22 05:10

d34dh0r53


On Windows, Chrome 12, I had to right-click somewhere in the console window and tick XMLHttpRequest logging to enable this.

like image 27
russellfeeed Avatar answered Oct 20 '22 05:10

russellfeeed


2015 Update

Chrome version 43 now, go to Settings > General > Console and check the "Log XMLHttpRequests" option.

Update: I wanted to see the XHR Object, but it seems I still can't do that despite the logging.

like image 40
Jonathan Lin Avatar answered Oct 20 '22 04:10

Jonathan Lin


In the Javascript console pane right click and tick the "Log XMLHttpRequests" option. Then in the developer tools section choose the network tab.

When you fire the Ajax request a new item will (sometimes delayed) appear in the network tab. Click on it to inspect it and then choose "Headers".

That will show you the post data you just sent.

like image 24
Philluminati Avatar answered Oct 20 '22 05:10

Philluminati


One option would be to use a normal packet sniffer like wireshark. It seems that chrome now supports directly sniffing XHR, see below.

like image 25
bdonlan Avatar answered Oct 20 '22 03:10

bdonlan


2020 Update

In the current version of Chrome (Google Chrome 81.0.4044.138) you can simply

  • Open the developer tools
  • Navigate to the console
  • Click on the console settings (represented by the sprocket widget near the top right corner)
  • Toggle on 'Log XMLHttpRequests'
like image 41
Gino Avatar answered Oct 20 '22 04:10

Gino