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.
