Channels ▼

Open Source

AJAX Debugging with Firebug

Experimenting and Tweaking

Firebug is not just an inspector, it's also an editor. Virtually every object in Firebug can be edited inline just by clicking or double-clicking it. As you type, Firebug applies changes immediately, giving you constant feedback. All editors support autocomplete. The CSS editor autocompletes as you type, and the DOM editor autocompletes property names when you hit the Tab key.

The Firebug command line, found at the bottom of the Console tab, is no different than any command line you've used in UNIX, DOS, or Windows—except that it accepts commands written in JavaScript.

The result of executing each command is displayed in the console. The results are not just static text, they are hyperlinks. For example, if the result of a command is an HTML element, clicking the link takes you to the HTML tab with the element selected, and moving your mouse over the link highlights the element itself in the page above.

The command line is more than just a place for one-liners. You can expand it to become a full-size editor. When you're working in your external editor, you can quickly copy-and-paste code into the Firebug editor to execute them immediately and how they effect the live page. Once you've gotten the result you'd like, copy the finished code and paste it back into your editor.

Network Activity

The core idea of AJAX is that small snippets of data will be fetched from the server using a channel called "XMLHttpRequest", then used to update the page. Without Firebug, all that traffic is invisible. But with Firebug, you can observe the progress of each request and inspect the sent/received text.

There are two places that you can observe XMLHttpRequests. The first is the Console tab. Each request is logged to the console so that you can see when it took place in the flow of other messages. You can also click each request to expand it and see the headers and text in transit.

The other place to observe XMLHttpRequests is in the Net tab (Figure 1). This tab shows a real-time view of every file loaded in the page, including HTML, CSS, JavaScript, Flash, and image files. The timeline of requests is animated as each one moves across the wire, helping you understand when each one began and ended, and how large it was.

[Click image to view at full size]

Figure 1: Net tab.

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.