CODEWITHSUNDEEP
javascriptdebuggingfirefoxfirebug
Chappy
Chappy

Reputation: 9

How to debug JavaScript on Firefox without Firebug?

How can I debug JavaScript on Firefox without Firebug? I found that not all JavaScript source files, which were being loaded initially, are shown on the left panel of the debug tool. Any chances for me to dig them out?

More background: We have to do remote debugging on a customer's machine and this machine has everything blocked except our remote connection. Also, the customer is refused to install Firebug.

Upvotes: 0

Views: 616

Answers (1)

Sebastian Zartner
Sebastian Zartner

Reputation: 20105

Firefox has built-in devtools, which can be opened via F12 when Firebug is not installed, Ctrl+Shift+I or via Firefox menu > Developer > Toggle Tools:

Toggle Firefox DevTools

Their Debugger panel can be opened via Ctrl+Shift+S. It works similar to the one in Firebug.
Note that to be able to debug dynamically evaluated scripts (e.g. scripts executed via eval()), the scripts need to include a //# sourceURL comment.
Note: If they don't include that comment, they won't be shown within the Sources side panel!

See the following example for such a //# sourceURL comment (taken from the linked MDN website):

var button = document.getElementById("clickme");
button.addEventListener("click", evalFoo, false);

var script = "function foo() {" +
             "  console.log('called foo');" +
             "}" +
             "foo();//# sourceURL=my-foo.js";

function evalFoo() {
  eval(script);
}

The Firefox DevTools have a feature called 'black boxing' to detect JS libraries and automatically exclude them from debugging, because people normally only want to debug their sources but not third party sources. Those scripts will still be listed within the Sources side panel and blacklisting can be turned off for them manually.

Black boxed source within Debugger panel

Upvotes: 1

Related Questions