Thursday, January 18th, 2007

Ajax Debugging with Firebug

Category: Articles, Utility

>Joe Hewitt somehow managed to find the time to write an article on Ajax Debugging with Firebug, which he created.

The article will show you that Firebug is more than just a JavaScript console:

  • The Firebug Workflow: modify the page in place
  • Exploring Objects: 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.
  • 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.
  • Breakpoint Debugging: Firebug’s Script tab contains a powerful debugger that lets you pause JavaScript execution on any line. You can then step forward line-by-line to analyze how the state of the program changes in real time. Breakpoints need not be triggered indiscriminately; Firebug lets you specify the circumstances under which a breakpoint is triggered.
  • Profiling: console.time(“loading”); loadWidgets(); console.timeEnd(“loading”);

Related Content:

Posted by Dion Almaer at 10:00 am
12 Comments

++++-
4.3 rating from 56 votes

12 Comments »

Comments feed TrackBack URI

That was a great article. There are some good time saving tips that you wouldn’t know about just by playing with Firebug.

Comment by cedric — January 18, 2007

Must have tool for all web developers.
It speeds up developing of web pages very much.

Comment by asaris — January 18, 2007

I’m a huge fan of FireBug, everybody who work with website be it Programmer, Designer or QA should have this tool installed.

Comment by Sam — January 18, 2007

It’s hard for me to believe that I used to debug JS with nothing but the console.

I’d also recommend the Web Developer’s Toolbar, if you don’t already have it. It’s a nice complement to Firebug.

Comment by CrackWilding — January 18, 2007

Firebug is awesome. It saves me time from hunting down obscure errors and banging my head against the desk. The real-time updating lets me follow all the things firing on the screen and you can see how fast everything loads (great for optimizing)

Comment by Alex — January 18, 2007

I still prefer Microsoft Script Editor. Seriously.

Comment by Kaitnieks — January 18, 2007

Very great tool!

Comment by sikifon — January 19, 2007

Kaitnieks said
> I still prefer Microsoft Script Editor. Seriously.

Whoa…

May I know how that’s possible?

I mean MSE doesn’t even support JS debugging in the top level frame, is unclear to use (about as confusing as the ol’ Venkman at least, jumping up and down the stack is much more natural in Firebug for example), doesn’t include profiling or console output support, completely freeses MSIE when open, doesn’t handle conditional breakpoints, …

Seriously, i’d like to know how you can prefer MSE.

Comment by Masklinn — January 19, 2007

I’ve written a handy Greasemonkey script to switch on debugging in Dojo with Firebug on any page using Dojo, without having to change the source code. Have a look here – http://shaneosullivan.wordpress.com/2007/01/12/greasemonkey-script-to-turn-on-firebug-debugging-for-dojo/

Comment by Shane — January 22, 2007

I’m just a humble non tech blogger, who loves firebug and what it can do but can not figure out how to save changes made in firebug sessions. I’m bogging in google blogger which has a window for editing the html template file. What I’ve been doing is using firebug to identify what I need to do, then jumping into the blogger window to implement the changes. this is obviously very unproductive (but still better than not having firebug at all.) Forgive my ignorance and lack of techo wisdom, I’m just a humble etc etc. Can someone please help me.
cheers
Steve

Comment by magic — February 17, 2007

I saw an article where someone made enhancements to Firebug to allow PHP debugging. Firebug is open source, so I think if one knows XUL/XPCOM, they could add the save functionality if they wanted.

Personally, I have no clue where to begin to try an figure out how to add this; is it C, XPCOM, both? Why was this not already added? Is it a security issue to protect potential copyright material? I just don’t know.

But I think Firebug will only get more powerful as time goes one. There is already a CMS that I saw on google, that saves Firebug changes.

There don’t yet seem to be an intuitive way to use Firefox for saving changes, I guess if there was something that is breaking your code, you just need to fix it as usual…Firebug plays the “Fire alarm” which beats alert();

Comment by Spoon — July 8, 2007

firebug is very useful, indeed, but since Firefox 2.0.0.3 on my Mac OS X 10.4.10 often hangs or crash, i am frustating about it, it is possible firefox will be released as Firefox Extension ?, so i can use it without firefox browser (eg. camino)

Comment by adit — September 12, 2007

Leave a comment

You must be logged in to post a comment.