Channels ▼
RSS

Tools

AJAX Debugging with Firebug


Joe is the Chief Technology Officer at Parakey Inc. and is the creator of Firebug. Contact him at joe@joehewitt.com.


In the early days of the Web, all you needed to know to craft web sites was HTML. More than a decade later, the situation has changed. Modern web sites are a product of several distinct technologies, and web developers must be proficient in all of them—HTML, CSS, JavaScript, and the DOM, among others.

Then a couple of years ago, AJAX came along and every web development tool on the market became obsolete overnight. Today you can no longer rely strictly on tools that were designed for the creation of static pages. This is where Firebug comes in.

Firebug, an extension I wrote for the Firefox browser (www.mozilla.com), makes web development fun again. Combined with your favorite text editor, the freely available Firebug (www.joehewitt.com/software/firebug/) is a highly productive IDE for the complete stack of AJAX technologies.

Firebug Overview

Firebug's biggest draw is its convenience. As you browse with Firefox, you can open Firebug at any time to begin working on any page. Firebug appears either as a separate window or as a small panel at the bottom of your browser. Tabbed browsing and Firebug are best friends; each tab can hold a separate Firebug session, which always reflects the current page as you browse.

Firebug breaks the page down into a set of tabs that depict its most important aspects—HTML, CSS, JavaScript, the DOM, network activity, and a console for errors and log messages. No tab is an island; Firebug lets you browse code just as you browse the Web by presenting objects as hyperlinks that can take you from one view to another.


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