Javascript – Firebug doesn’t load JavaScript files or stop execution on breakpoints

firebugjavascript

I'm new to Firebug and having a lot of trouble.

  1. JavaScript files usually show up empty, or load partially (some of the time)
  2. Lines are not available to set breakpoints on frequently (line numbers are greyed out)
  3. When I do set breakpoints, script execution often does not stop on them

I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.

I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.

Due diligence:

These discussions seem to cover the same problem, but have no answers:

  1. "Firebug not showing Javscript errors" – http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
  2. "firebug does not always load javascript" – http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary

(Sorry I'm new, and not allowed to hyperlink those)

Best Solution

A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.

You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().

This should confirm that jQuery is actually loaded and running.

Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.

Based on your question, you probably know some of this already, but confirm that all of that is working first.

When you don't see jQuery in the scripts list, can you do console.log(jQuery)?

PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.

Edit: A few more suggestions:

1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.

2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.

try {

    // your code here

} catch (e) {

    console.log(e)

}

3) Setup another FF profile to test if you get the same problem.