Firebug Internals

From FirebugWiki

Contents 1 Resources 2 Source 3 Overview of Firebug 4 How are the XUL files used? 5 How are panels created? 6 How does debugging work? 7 How to write a firebug extension? 8 How to use FBTrace?

Resources

• The best place to learn about this is Honza's site
• Extending Firebug

Source

Firebug source is available via subversion

Don't use /trunk, its just old code.

The Firebug source is under branches, eg branches/firebug1.5.

• fbtest/ Firebug test harness
• tests/content contains the FBTest suite.
• lite/ Firebug for non-Firefox browsers
• chromebug/ Debugger for Firebug (and other Firefox extensions)
• Most of the remaining directories are extensions (to be under extensions/ some day).

Overview of Firebug

How are the XUL files used?

• browserOverlay.xul : puts Firebug into the bottom of the browser window by "overlay" on to Firefox's browser.xul
• firebug.xul: puts Firebug into its own window.
• firebugOverlay.xul: overlays browserOverlay.xul or firebug.xul to add placement-independent features by XUL.

How are panels created?

Basically follow the pattern of an existing panel.

• extend Firebug.Panel
• add methods
• use 'this.context' for context dependence
• Add UI to 'this.panelNode' as HTML.
• Learn about domplate to create the HTML
• registerPanel

How does debugging work?

See the Chromebug User Guide

How to write a firebug extension?

A Firebug extension is just a Firefox extension that happens to work on top of Firebug.

How to use FBTrace?

if (FBTrace.DBG_YOUREXT)
  FBTrace.sysout(<string>, object);