Firebug
Contents
about Firebug
Firebug is the Mozilla Firefox web development tool. Firebug allows you to inspect and edit the HTML and CSS of a webpage, test and debug Javascript, log via the console and much more. Firefox is a free browser so download it to use Firebug or alternatively use Firebug Lite for other browsers.
source: getFirebug.com
To get started download and install Firebug from:
- getFirebug.com: The official Firebug page
- Firefox Add-ons page
Inspect HTML and CSS
If you understand the basics of HTML and CSS the Firebug HTML and CSS inspector allows you to analyze and tweak your own web design and that of any other webpage. To start using Firebug startup Firefox and click on the Firebug icon in the bottom right: 
. By default you will see the webpage on the top, the HTML source code in the bottom left and the CSS code in the bottom right.
Video tutorial
The easiest way to explain how this Firebug feature works is by watching the Firebug HTML and CSS inspector video by Jesse Newland. The first 1:40 min of the screencast will do. We won't go into the AJAX part right here.
Development tools
The Firebug add-on comes with a clear documentation on its features, so rather then quoting the documentation we'll guide you to the right page. The core features are the HTML, CSS and Layout inspectors:
- getfirebug.com > HTML
- With the HTML Inspector you can view, edit and copy the source code.
- Hover over the HTML elements in the source code to locate (highlight) and check out the element on the webpage. Select an element and click on 'edit' to modify the code live.
- Use the inspect icon
and hover over elements on the webpage to analyze them. Click on them to jump to the element in the source code.
- getfirebug.com > CSS:
- When you select an element its style is shown in the 'CSS' tab on the right. You can view and edit the styles here live.
- The cascading effect of the stylesheet is shown as styles that are overruled are stricken out. To only view which rules eventually apply to an elmeent select 'Show computated style' in the drop down menu of the 'CSS' tab.
- getfirebug.com > Layout:
- Click on the 'layout' tab in the right panel of the inspector to analyze the box model of an element.
Javascript
jQuery
Javascript debugging
AlternateIdea.com Javascript Debugging
Extensions
The Firebug add-on can be extended with a wide variety of extensions which provide additional functionality. An overview can be found at getfirebug.com/extensions:
- Chromebug
- Firebug Code Coverage
- Firebug Net Panel History Overlay
- Live Coder
- Firecookie
- FirePHP
- Firequark
- FireQuery
- Firediff
- Jiffy
- Pixel Perfect
- FireRainbow
- YSlow
- Inline Code Finder
- Firesymfony
- CodeBurner
- ColdFire
- SenSEO
- FormBug
- FirePython
- XRefresh
- Firefinder
- FireAtlas
- FirePalette
- CSS Usage
- Widerbug
Firebug for other browsers
Firebug is an add-on for Mozilla Firefox but is also available in a lite version for Internet Explorer, Opera, Safari and Google Chrome and there are also some alternative developer tools available for the other browsers:
Resources
- GetFirebug.com
- JoeHewitt.com
- FireRainbow extension
- FireQuery extension
- Firebug tutorial at Evotech.net
- Firebug tutorial at WebMonkey.com
- Firebug tutorial (video) at Viddler.com
- Firebug tutorial on inspecting HTML and CSS (video) at JNewland.com
- Firebug tutorial on Javascript debugging at AlternateIdea.com
- Firebug tutorial on Javascript debugging (video) at DigitalMediaMinute.com
