Call us at 1-800-413-0939

Hands On IT Training Blog

Working with Firebug

Working with Firebug®

Firebug is a web development tool that integrates with Firefox, allowing users to debug and edit a website’s HTML, CSS, the DOM and JavaScript code. These features allow makes Firebug a very useful tool for web developers. It’s also 100% open source and free, so it’s available to everyone.

When Should You Be Using Firebug?

  • Firebug can be used to debug JavaScript. Error information includes a description, the file and line number, and the line of source code that caused the error.
  • Firebug has the capability to edit HTML and see the changes immediately. This is great if you are thinking about making a change to your website, you can test it out.
  • CSS source code can be edited and saved live.
  • Firebug features CSS code hints which assist the user in writing correctly formed statements.
  • Firebug has the ability to analyze a page's load time. This provides the ability to test whether or not scripts are taking too long to load.

Installing Firebug
To install Firebug, go to http://www.getfirebug.com.


Opening Firebug
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.


Firebug Panels

When Firebug is open you will notice panels on the toolbar such as Console, HTML, CSS, Script, DOM, Net and Cookies.

Console
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.

HTML
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.

  • Style Panel - The Style side panel displays the CSS styles were inherited from various elements on the page.
  • Computed Panel - The Computed side panel allows you to inspect the CSS values of the selected elements on the page.
  • Layout Panel - The Layout side panel gives positioning details of a selected element.
  • Dom Panel - The DOM side panel shows the JavaScript properties of selected elements on the page
  • Events Panel - The Events side panel displays what event listeners are bound to selected elements on the page.

CSS
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.

Script
The Script panel allows you to debug JavaScript code. The script execution can be stopped at a specific point in your code by selecting a breakpoint. To create a breakpoint, click on the left of a line’s number, which will bring up a red circle next to the line. This can help you debug your code if you need to stop a script at a certain point.

DOM
The DOM panel displays information about DOM properties and methods. Objects and arrays display an expandable tree view.

Net
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.

Cookies
The Cookies panel displays cookies set by the current page.


Firebug Icon
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.

Inspect Icon
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.

Multiple Training Locations - Convenience and Cost Control

Attend Regularly Scheduled Courses in More than 100 Cities Across North America and the United Kingdom or via Remote Attendance