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
Related
Using Chrome Dev Tools, how do you find where (what URL or serer) your AJAX request is being sent to?
I use Chrome Dev Tools -> Network tab -> All or XHR.
I view the headers and the responses of AJAX requests, but I can't figure out how to find where the AJAX requests are going?
If not with Chrome's Dev Tools, is there another tool? Is there any way to figure this out?
The first column in the network tab, the name, contains the destination. Hover over the name of one of the rows to see the full path.
For the example below, I posted a test comment on this question, and in Chrome devtools, I can see that the XHR request was to the endpoint https://stackoverflow.com/posts/66510503/comments.
You can also look at the :path in the Request Headers.
You can also right click the name, go to Copy, and press Copy link address to get it on your clipboard.
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?
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.
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.