Ajax – Request Monitoring in Chrome

ajaxgoogle-chromehttprequest

In Firefox, I use Firebug which allows me to view every http request my ajax calls are making. I've switched over my development to Chrome and am liking it so far. My only complaint, however, is that the developer tools don't seem to allow you to view each ajax request. I've had it happen once where the Resources panel showed multiple requests to the same resource, but it's only done it once and never again.

Is there a way to reliably see every http request that a page is making through javascript from within Chrome?

[Edit:11/30/09 11:55]

Currently, to get around this, I'm running Fiddler next to Chrome to view my requests, but if there's a way to do it from within the browser, I'd prefer that.

Best Answer

I know this is an old thread but I thought I would chime in.

Chrome currently has a solution built in.

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.
From within the developer tools click on the Network button. If it isn't already, enable it for the session or always.
Click the "XHR" sub-button.
Initiate an AJAX call.
You will see items begin to show up in the left column under "Resources".
Click the resource and there are 2 tabs showing the headers and return content.

Related Solutions

Ajax – Are the PUT, DELETE, HEAD, etc methods available in most web browsers

No. The HTML 5 spec mentions:

The method and formmethod content attributes are enumerated attributes with the following keywords and states:

The keyword get, mapping to the state GET, indicating the HTTP GET method. The GET method should only request and retrieve data and should have no other effect.

The keyword post, mapping to the state POST, indicating the HTTP POST method. The POST method requests that the server accept the submitted form's data to be processed, which may result in an item being added to a database, the creation of a new web page resource, the updating of the existing page, or all of the mentioned outcomes.

The keyword dialog, mapping to the state dialog, indicating that submitting the form is intended to close the dialog box in which the form finds itself, if any, and otherwise not submit.

The invalid value default for these attributes is the GET state

I.e. HTML forms only support GET and POST as HTTP request methods. A workaround for this is to tunnel other methods through POST by using a hidden form field which is read by the server and the request dispatched accordingly.

However, GET, POST, PUT and DELETE are supported by the implementations of XMLHttpRequest (i.e. AJAX calls) in all the major web browsers (IE, Firefox, Safari, Chrome, Opera).

Javascript – Disable same origin policy in Chrome

Close chrome (or chromium) and restart with the --disable-web-security argument. I just tested this and verified that I can access the contents of an iframe with src="http://google.com" embedded in a page served from "localhost" (tested under chromium 5 / ubuntu). For me the exact command was:

Note : Kill all chrome instances before running command

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

The browser will warn you that "you are using an unsupported command line" when it first opens, which you can ignore.

From the chromium source:

// Don't enforce the same-origin policy. (Used by people testing their sites.)
const wchar_t kDisableWebSecurity[] = L"disable-web-security";

Before Chrome 48, you could just use:

chromium-browser --disable-web-security

Best Answer

Related Solutions

Ajax – Are the PUT, DELETE, HEAD, etc methods available in most web browsers

Javascript – Disable same origin policy in Chrome

Related Topic