Debugging Firebug Tips & Tricks

See some tips and tricks that are useful when hacking on Firebug.

Start Hacking

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.

Tracing Console

It's hard to debug a debugger and one thing that might help you a lot is our Tracing Console (also Firefox extension). 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!");

DOM Inspector

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.

Browser Toolbox

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.