When Should You Be Using Firebug?
To install Firebug, go to http://www.getfirebug.com.
Firebug can be opened as a panel on any side of your browser or even as a whole separate window. To open it on a side of your browser, right click the Firebug icon and hover over the Firebug UI Location section. Then click on either top, bottom, left, or right to bring up Firebug in those locations. If you select detached, Firebug will be opened as a separate window.
When Firebug is open you will notice panels on the toolbar such as Console, HTML, CSS, Script, DOM, Net and Cookies.
The Console panel provides debugging information of the website. Select the Console tab to begin debugging. If the debugger finds any errors, they will appear in the console and can be interacted with by clicking on them. Pressing the pause icon while the debugger is active will cause a break point whenever an error appears.
The HTML panel displays the HTML of the current page. The HTML elements are arranged in a tree and can be selected by either clicking or using directional keys are the keyboard. On the right side of the HTML panel there is a side panel that shows information regarding CSS styles and additional information regarding selected elements.
The CSS panel has options for adding, editing and removing CSS styles. It also has an editing mode which allows you to edit CSS files directly via the panel.
The DOM panel displays information about DOM properties and methods. Objects and arrays display an expandable tree view.
The Net panel monitors HTTP traffic initiated by a web page and displays all collected information. It displays a list of entries and each entry represents one request/response made by the page.
The Cookies panel displays cookies set by the current page.
On the top left of the Firebug panel is the Firebug icon. It allows the user to open new windows, set options, display keyboard shortcuts and provide links to the Firebug website.
When the Inspect icon is selected, the cursor can be hovered over elements on the current website and will display its properties in the Firebug panel such as showing the HTML and CSS behind the elements.
Firebug® is a registered trademark of the Mozilla Foundation.