Since Firebug has been discontinued, I'm missing two very important pieces of functionality.
I was wondering if there is some replacement available for the following functionality within the default Firefox Web Console.
When a URL was called using Ajax, I had the following options with the URL.
"Open response in new tab" Using this I could open errors that were generated after an AJAX-POST call.
"Resend query" I'm not entirely sure what this function was called, because I used it in Dutch but I used this function to retry AJAX-Calls without having to fill in a form again.
So, is there any way to achieve these two functions in the default Firefox Web Console?
You can access to XHRs in 2 tabs, Console (Web Console) & Network (Network Monitor).
In Console you can see quick view of XHRs. (Headers, Params, Response, Cookies, Call Stack)
In Network tab you can see all requests incl. XHRs. try to select one XHR request, you will see a new column show up in left side with following tabs, Headers, Cookies, Params, Response, Timing & Preview (as Firefox 51.0.1), check the Preview tab, it's great.
Also try to right-click on any XHR in Network tab, you can see few options, incl Edit and Resend and Open in New Tab. this 2 options will be your answer. :)
You can request features/report bugs about Firefox Developer Tools (& of course Firefox) using Bugzilla#Mozilla. Gaps between Firebug and the Firefox DevTools are tracked in bug 991806.
Related
I try to port my Firefox extension to Chrome but the way of working of webrequestonHeadersReceived doesn't seem to be the same.
When I use:
chrome.webRequest.onHeadersReceived.addListener(analyse,{urls: ["http://*/*", "https://*/*"]},["blocking", "responseHeaders"]);
the function analyse is correctly called and I can analyse the response headers and if the function return "cancel: true", on Firefox the page doesn't update and it is perfect but in Chrome, the page is updating and display the famous message
"Requests to server have been blocked by an extension"
The goal of my extension is to manage some type of downloadable file. But where in Firefox, if you click on download, the page doesn't move and I can display a panel who let you choose what to do, in Chrome even if my panel is correctly displayed, the main page is updated with this error message and I am forced to click on "back" to retrieve the original page.
Furthermore, in Firefox, when a request is blocked one time, it does not try to get again the request, while in Chrome, the page which displays the error message try to get a new the request.
Is there some way that I can get stack traces in a browser every time an HTTP request is made? I'm using Chrome dev tools, but I'll use a different tool, if there is one that can do this.
I suppose I could monkeypatch XMLHttpRequest to throw an error, but that is a fairly awkward solution.
I am trying to determine why an HTTP request was made, and being able to identify a high level function that led to that request would really help.
If you are using firefox then use Firebug plugin.
In firebug, you can easily see the stack of HTTP calls.
You can easily see javascript code a put a breakpoint. when debugger stops on breakpoint, it shows the stack of operation it has done to reach till there.
Read Firebug Tutorial
You can remove the XMLHttpRequest support from browser by setting it undefined:
XMLHttpRequest = undefined
Then it will fail any time you try to use it - and throw an error you can use for the stack.
Or better replace send() method with own that will get the stack:
XMLHttpRequest.prototype.send = function() {
try {
crash.me.now(); //make sure this is undefined
}
catch(err) {
console.error(err.stack || err.stacktrace || err.stackTrace);
}
}
In Chrome devtools there is an options to set a "XHR breakpoint".
Once the send() request is fired, the code halts, the breakpoint is hit and then you can see the stacktrace normally similar to using code breakpoints.
In chrome dev tools, you can see something like this if you capture a timeline activity.
First, open the dev tools, then go to "timeline" tab. It should be asking you to capture timeline. Hit ctrl-E and reload the page. After the page has loaded, press "finish" button.
Then go to the "network" tab, click on the ajax request you want to look at. At this point you should check that you have the overview visible: just below the tabs line, there is part that says "View:" and there you should toggle Overview on if it's not already.
Now you can select that part on the overview with your mouse like you were selecting text. Select the part of overview that has your ajax request.
Now, switch to the "timeline" tab. Make sure that on the "View" part you have toggled "flamechart" on. Now, there should be the javascript function calls visible. Unfortunately it seems that the names of function calls are truncated to an optimized form, but there are at least links to the js files that have those functions. Anyways, the topmost of the stack you are seeing should be the Event that triggered the XMLHttpRequest call.
I am currently working on an addon and it had a addon window with addon buttons and a tab in main window it maintains. I am able to open a page in main tab by
mainWindow().location = "http://murmuring-retreat-7618.herokuapp.com/signin";
I created mainWindow by following way
getBrowser().getBrowserForTab(bridge.recordingTab).contentWindow;
where I have already saved bridge.recordingTab as the tab I am connected.
but if I want to send a post request instead of just open a url, how do I do it?
If you use jQuery in your firefox addon then you could simply do a $.post
Note though that you need the destination server to be CORS enabled, otherwise you can only do JSONP requests using $.getJSON
In Internet Explorer 9, how is it possible to view data that is returned by an ajax script?
For example, in Firefox using Firebug, The 'All' tab has a 'Response' Sub Tab. that show any data returned by an Ajax Script like below. How is it possible to view this in Internet Explorer?
I have a script that is failing in IE9. It's not a bug or error, but it just wont work. I've cleared the cache etc. etc.
{"action":"add","close":false,"success":true}
use developer tools or press f12 and in network tab you can see xhr request captured and in then click go to detailed view button to see the response
I'm writing my first bit of jQuery, and I'm having a problem with jQuery.get(). I'm calling this;
$.get(url, updateList);
where updateList is defined like so;
function updateList(data)
{
if (data)
{
$('#contentlist').html(data);
}
else
{
$('#contentlist').html('<li>Nothing found. Try again</li>');
}
}
The function runs, and updateList is called. It works fine in Internet Explorer. However, in Firefox, the data parameter is always empty. I would expect it to be filled with the content of the webpage I passed in as the URL. Am I using it wrong?
Notes;
in Firebug, I've enabled the Net panel, and I get the request showing up. I get a 200 OK. The Headers tab looks fine, while the Response and HTML panels are both empty.
The page I'm trying to download is a straight HTML page -- there's no problem with server code.
The page with JavaScript is local to my machine; the page I'm downloading is hosted on the Internet.
I've tried checking the URL by copy-pasting it from my page into the browser -- it happily returns content.
The error occurs even in Firefox Safe Mode -- hopefully that rules out rogue addins.
You probably won't be able to do this due to cross-domain security. Internet Explorer will allow you to Ajax remote domain when running from file://, but Firefox and Chrome won't.
Try to put both files on the same server and see if it works (it should).
You'll most likely need to fix your page that you're quering with XHR because it should be returning content. Copy paste the link in the Firebug net tab and make a new tab, and edit that page with your text editor so it spits content back.
Stick alert (or breakpoint in Firebug) and see if the data returned is not an object (or if there is any data). If the former - you may need to drill into the object to get your markup