Channels ▼
RSS

Tools

AJAX Debugging with Firebug


The Firebug Workflow

Firebug knows that most developers have a tight relationship with their favorite text editor, and it isn't out to make you switch. Instead, Firebug gives you a place to experiment by playing with a live page in a separate text editor. This makes the browser's Reload button the equivalent of the Run button in a standalone IDE. For this reason, Firebug preserves the state of its views when you reload, so you can glide smoothly between your editor and browser without losing your place. However, you needn't always reload the page. Firebug lets you modify the page in place and see the result immediately.

Exploring Objects

Web development starts and ends with HTML, so Firebug gives you a lightning-quick way to find and inspect HTML elements that you are interested in. Hit the Inspect button, point your mouse at any part of the page, and Firebug unveils its place in the live HTML source. As you continue to move your mouse, Firebug follows you, which makes for a fun way to learn about the structure of web pages others have created.

An AJAX-ian web page never stands still. HTML nodes are constantly being created, modified, and removed by JavaScript. As changes occur, Firebug's HTML view stays up to date in real-time and highlights the changes in yellow. When you see things moving and changing in a page, this gives you a quick way to learn how it was accomplished.

The HTML view includes a second strip of tabs that give you other ways to inspect an HTML node. The CSS tab shows you the full cascade of CSS rules that affect the style of the selected node. One quick glance at the CSS view solves the mystery of why something doesn't look the way you expected it to.

Pixel Perfection

One issue that confounds new CSS developers is the box model, which defines the way a box is sized and where its contents are placed. The box model can be hard to pick up with the naked eye because of the transparency of margins and padding.

Firebug helps visualize the previously invisible. When your mouse moves over anything that represents an HTML element in Firebug, the element's rectangle in the page is highlighted, and its margin, border, padding, and content are each shaded a different color.

Positioning elements with CSS can also be challenging because you must always remain conscious of the container that defines its local coordinate space. Firebug helps you visualize this by using rulers and guidelines. While viewing the Layout tab, moving your mouse inside the box causes rulers to appear along the bounds of the element's container. Guidelines also appear tangent to each edge of the box so that you can see where the edges intersect the rulers.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video