CODEWITHSUNDEEP
javascriptgoogle-chromedebuggingfirefoxconsole.log
red-o-alf
red-o-alf

Reputation: 3245

Firefox Javascript console and network tab not showing important errors?

While casually debugging some javascript on a web page, I noticed that Firefox (33.0 - Windows 7) Javascript console would not tell me if some .js files failed to load, so I decided to give this a closer look.

What I found is that if I have an HTML with a script tag pointing to a wrong local url, as the page loads the console shows no errors at all. Instead it shows the full path and file name for the wrong .js script as if there was nothing wrong with it.

I also tried with a button element issuing a xmlhttprequest to a non existing remote url, and same thing, no errors at all in the console when clicking.

$("#button").click(function(){
    console.log("clicked me")
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

while "clicked me" will show as expected.

Also I verified that every possible log setting in developer tools is checked.

After reading that someone had luck with complete settings reset I went through that using Menu > Help > Troubleshooting > Reset Firefox settings. But... no. The errors still don't show up.

So, end of the story, given I just recently decided to look into this, and I can't exactly remember how long I've not been seeing errors exactly, I am questioning myself whether those kind of errors do not shown up at all in Firefox by design and if it's just a prerogative of Chrome... which, it goes by itself, shows all the errors (like for example "net::ERR_FILE_NOT_FOUND").

Anyone for a quick test on their console?

UPDATE, attaching screenshots of both Firefox and Chrome.

As you can see the situation is totally different.


Code: code


Firefox Console Tab: Firefox Console Tab

Also no errors on the missing files, whose name is just printed out normally in the console as if nothing was wrong with them.


Firefox Network Tab: Firefox Network Tab


AS OPPOSED TO


Chrome Console Tab: Chrome Console Tab


Chrome Network Tab: Chrome Network Tab:

Upvotes: 1

Views: 2468

Answers (1)

whiplashomega
whiplashomega

Reputation: 49

After looking at the screenshots you added, I noticed that you were references resources on your local file system, so I decided to do some tests. I found that Firefox indeed does not report network errors for files on the local filesystem, reporting nothing on the console or the network tab, however it does report them properly for network resources. Unfortunately I could not reproduce the errors in chrome exactly, as my local filesystem is locked down rather tightly (I'm on an enterprise-owned system) and chrome simply reports that it doesn't have permission to access the local filesystem, regardless of whether the file exists or not (Firefox says nothing). Meanwhile, I imagine if you pointed your script/link tags to a network address such as a CDN, or if you are testing on a local test server something like:

http://localhost/[script-address]

it should report the error in both consoles.

Here's my test code: enter image description here

And the firefox net panel enter image description here

And the chrome console enter image description here

Preserving my original answer below this point, as the JQuery API notes may be helpful for others who find themselves here

As mentioned in Ian's comment, and the JQuery API document at http://api.jquery.com/jQuery.getJSON/ JQuery's getJSON method will simply fail silently if you have a syntax error, the URL doesn't exist, or if it doesn't return a response. You can force it to do so by adding a .fail() method call to the end like so:

$("#button").click(function(){
console.log("clicked me")
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
  $("div").append(field + " ");
    });
  }).fail(function() {
    console.log("AJAX request failed");
  });
});

You can also bind a function to the error event by using the .ajaxError method documented here: http://api.jquery.com/ajaxError/

$.ajaxError(function() {
    console.log("AJAX request failed.");
});

Note that when you do it this way, JQuery will pass the function several useful parameters if you create variables to hold them, including the error event itself, the ajax object that triggered it, the settings that were used, and the error string, which you can then use to output whatever information you need to the console in order to debug what was causing your error. Good luck!

Upvotes: 2

Related Questions