My situation is as follows: I have some Javascript code that I did not write myself, but I that I would like to get acquainted with (actually, I want to debug it). In particular, I am interested in what AJAX requests this code makes, and when.
This Javascript code I'm looking at is quite complex and lengthy and chaotic. So basically, just reading the source code or grepping the source code for this or that function call is not a good option. What I would like is some Firefox or Chromium plugin (whichever works) that does the following:
While loading the page and executing the Javascript, I would like it to catch any AJAX request that is made and tell me about it (most importantly, what URL is being called, though knowing what POST parameters etc. are travelling along that request would be useful as well). It would be awesome if it actually stopped before each execution of an AJAX request, told me about it, and asked me if it should proceed. But I would also be happy even if it did nothing else but simply print each URL that the Javascript sends an AJAX request to into a console or something.
Any suggestions?
You can do this in Chrome without needing any plugins, or in Firefox with the Firebug plugin:
side-note: when I say "XHR" I mean "XML / HTTP requests", which is what ajax requests fall under.
In Chrome
Just open your Dev Tools (F12), and go to the Network tab (second tab in Chrome 32). From the moment you open the tab on, all requests are logged there. Click the third icon at the top of the Network tab (says "filter" when hovering over it) and then select the "XHR" filter, which will limit it to just XHR.
You can also right click in your Console tab and select the "Log XMLHttpRequests" option, which will then log all XHR in your console too.
In Firefox
Open your Firebug, and open your Net tab (second last tab), and click "Enable" in it (default is disabled). From the moment you enable the tab on, all requests are logged there. At the top bar within that tab, you can click the button that says "XHR" to limit it to XHR only.
You will also by default see all XHR in your console in Firebug.
Related
Is there any way using chrome dev tools to find where an http request (ajax) was made?
I have a large project with many requests happening in different files. There's a particular request that I want to be able to inspect, I've found it on the Network tab, but there doesn't seem to be any way to find where in the code was this request started.
Use the Initiator column in the Network panel. Clicking on the link in the Initiator cell takes you to the line of code where the request was made.
If you can't see it, right-click on the table header and select Initiator.
You can also hold Shift while hovering over a resource to see it's initiator. The initiator is green. Dependencies are red. If you can't see the initiator, then it's not currently visible on the table (could be higher up, filtered out, etc.)
MacPrawn's XHR Breakpoint idea is a good approach, too.
Since you see the request being made in the Network pane, you can grab the url and then add a XHR breakpoint on that URL:
(In the breakpoint panel, on the right of the "Sources" pane)
Hope this helps!
I was trying to put the Twitter widget onto a few Blogger/Blogspot blogs (which is supposed to be super-simple and almost was) when I noticed it wasn't working sometimes -- specifically the times when I wasn't logged in to Blogger/Google as an author of that blog. The Chrome developer tools show a status simply as "Finished" without any HTTP response code (e.g. 200, 404) included for apis.google.com/js/plusone.js and platform.twitter.com/widgets.js whereas Firefox Firebug shows HTTP 200 for plusone.js and doesn't even list widgets.js in its network tab. I can see this "Finished" on any blogspot blog, even http://buzz.blogger.com/ (though only for the Twitters widgets.js; plusone.js loads correctly with a 304).
What is going on here? Is it because these are Javascript files? Is Chrome trying to skip making the call when it suspects/expects a 304 Not Modified response, but then doesn't actually load the previous response contents?
How do I view cross-domain JS requests being made in a web page? Either thru Firebug or any other plugin?
For instance, suppose I visit stackoverflow.com, and they included a third party JS file (for instance, Google Analytics) How do I view the requests that are being made as the page is loading? the URLS being called, the parameters sent, the response, etc.
I can do this of course for AJAX requests made in the same domain rather trivially.
Either using the network tab in both
OR
In chrome's console tab right click and select "Log XMLHttpRequest".
In firefox's inspector "Log request and response bodies".
In firefox firebug there is a little down arrow next to "console" in the tab, click that and ensure "Show XMLHttpRequests" is checked.
If there not showing up, they may be being loaded through JSONP calls and therefore are not actual XMLHttpRequests. If that is the case, your best option is using the Network tabs.
This is something that I've been looking for for a while. When I'm debugging my ajax applications I have to keep reloading the whole page, even if the only changes I made were on the server.
For example, in my current application, there is Tinymce being loaded, jQuery UI, I have to click one dialog, to click another to click another. What I would love is the ability in something like Firebug to right click the request and select 'resend' especially when the only change I made is on the server e.g. print_r( $_POST );
The closest I've gotten to this ability is in Firebug on the Net tab, right click the request and click 'open in new tab', which is nearly there - but not quite
You need to replay the HTTP request, thats something firebug isn't meant to do. You need fiddler to get the work done. Fidder2 even has a Firefox addon. You can replay your request using fiddler.
Need to know how i can prevent logging my AJAX calls in Firebug's Console tab, the way Twitter does.
When you search in Twitter you get a live update feed saying "5 tweets since you searched". Twitter sends periodic AJAX calls for the live updates, however these AJAX calls do not get logged in Firebug's console tab, you will be able to see them if you switch to the Net tab of Firebug. Can someone tell me how does twitter achieve this because in my web application all the AJAX calls get logged into the Firebug's console tab.
EDIT : http://integratedsearch.twitter.com/search.html?_=1262555274577&q=%23avatar&since_id=7344168531&refresh=true&callback=processSummizeRefresh.
Thats the url that gets fired. Pasting the link in your browser you will even get the resoponse.
Note the callback processSummizeRefresh.
Since the call is being made to a subdomain (integratedsearch.twitter.com), JSONP is being used which injects a script tag to make the request.
No special FireBug hiding magic :)
See: FireBug and monitoring JSONP cross-domain requests