Thursday, January 18th, 2007
Joe Hewitt somehow managed to find the time to write an article on Ajax Debugging with Firebug, which he created.
- The Firebug Workflow: modify the page in place
- Pixel Perfection: 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.
- 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.
- 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.
- Log Debugging: Firebug is not just a way for you to examine a page from the outside; it is also a place for you to send messages from within the page itself. To facilitate this, Firebug provides every web page loaded in Firefox with the console object that contains a number of functions for logging. As your script executes, you can fill the console with an ongoing stream of data for you to analyze.
- Profiling: console.time(“loading”); loadWidgets(); console.timeEnd(“loading”);
Posted by Dion Almaer at 10:00 am