-
Notifications
You must be signed in to change notification settings - Fork 29
Debugging Firebug Tips & Tricks
See some tips and tricks that are useful when hacking on Firebug.
The first thing you want to usually do is cloning Firebug source code repository onto your local machine and run it. For this first step see detailed instructions. Note that you need to run Firebug.next with Firefox Nightly at the moment.
It's hard to debug a debugger and one thing that might help you a lot is our Tracing Console (also Firefox extension, download xpi). It displays various runtime logs coming from Firebug and allows to see what's happening under the hood.
Here is an example of a log that print a message into the Tracing Console:
const { Trace, TraceError } = require("../core/trace.js").get(module.id);
Trace.sysout("Hello from Firebug source code!");
If you want to make logs in the tracing console more visible append !!! at the begging of the log message. The log will be automatically highlighted.
Hacking on Firebug often include a lot of browser restarts and repeated manual actions like opening a page and the toolbox. These actions can be automated in lib/debug/startup module.
Set [email protected] preference to true if you want to have the toolbox opened (+ a test page) by default after Firefox starts.
DOM Inspector is Firefox extension that helps developers to inspect user interface markup. You might want to use it together with Element Inspector that allows to Shift-RightClick any element to open it in DOM Inspector quickly.
In order to inspect the UI you can also use Browser toolbox: Tools -> Web Developer -> Browser Toolbox. This built-in Firefox feature allows complex inspection of the UI. It's a little slower to launch, but provides more detailed info.
Set the following pref to false to avoid the prompt for connection every time the browser toolbox is opened.
devtools.debugger.prompt-connection
If you want to debug JavaScript running within a child process (see 10s) use Browser Content Toolbox: Tools -> Web Developer -> Browser Toolbox.