Better JavaScript Debugging in 15 Minutes

I have created a 15 minute screencast that will show you how to Debug JavaScript with Firebug. I cover a number of concepts such as using the console, interactive debugger and timer features of the Firebug extension for Firefox. If you haven’t tried Firebug yet, I’m sure that this screencast will convince you to make it a part of your JavaScript coding workflow.

I hope you enjoy my first screencast! I plan on doing a few more over the next couple of weeks, so I would appreciate your feedback.

Launch the screencast now! (requires Flash)

Both comments and pings are currently closed.

16 Responses to “Better JavaScript Debugging in 15 Minutes”

Oliver Merk said on May 28th, 2006 at 5:50 pm
Great screencast! I wasn’t aware that Firebug was so powerful.

Point of irony: your screencast page throws a Firebug error;)

Cheers,
Oliver
Jim said on May 28th, 2006 at 9:33 pm
Odd - My Firebug shows no errors! It is worth noting that Firebug often doesn’t refresh itself properly when moving from page to page or from tab to tab. Maybe it was a leftover error message!
web output said on May 29th, 2006 at 12:02 am
JavaScript Debugging mit Firebug Screencast…

Jim Rutherford (Digital Media Minute) hat einen interessanten Screencast online gestellt, der einen Teil von Firebugs tollen Fähigkeiten sehr anschaulich erklärt. In 15 Minuten umreisst er Schritt für Schritt das Debugging von JavaScript mit den schon …
Firebug 0.4 » die Netzspielwiese said on May 29th, 2006 at 4:03 am
[...] Jim Rutherford hat einen interessanten Screencast zum Umgang mit dem JavaScript-Debugger veröffentlicht. [...]
Scott said on May 29th, 2006 at 5:30 am
Thankyou for the screencast..

I am off to download it now!
Oliver Merk said on May 29th, 2006 at 6:17 am
Jim,
You’re right. I refreshed and it was gone. A bug in Firebug - even more ironic;)
Michael Hupp said on May 29th, 2006 at 11:16 am
Great stuff.

I did notice one error though. At the end when you are naming your timers, you name the End timer different than the begin function. Could that be why there was a 0 ms?

Regardless, thanks for the screencast, I’m on my way over to download Firebug now!
Tom Pester said on May 29th, 2006 at 3:31 pm
Thanks for putting this together! I think the source and style inspector needs a good screencast.

This tool isn’t only for devs. Designers are going to love it too
Jim said on May 29th, 2006 at 7:40 pm
Tom - That is my plan for another screencast next week!

Michael - Thanks for pointing that out! I will get it fixed as soon as I get a chance!
David said on May 31st, 2006 at 9:53 am
Well done. Succinct, clear presentation. I did find that I had to turn the volume to max.
arley said on June 20th, 2006 at 12:54 pm
Perfect pages… tnx
Javascript Fehlerbeseitigung mit Firebug - Screencasting Weblog said on June 29th, 2006 at 9:53 am
[...] FireBug ist eine Erweiterung für Firefox, die sich an Webentwickler richtet. Zwei Screencasts führen in die Funktionsweise von Firebug ein. FireBug - Firefox Erweiterung für Webentwickler auf pixelgraphix zeigt die grundlegenden Funktionen und Better JavaScript Debugging in 15 Minutes von Digital Media Minute zeigt, wie man Javascript-Fehler mit Firebug bereinigen kann. [...]
dave haug said on July 6th, 2006 at 2:22 pm
I appreciate your video which taught me the basics of debugging for js. Thanks. One tiny nit: it was difficult for me to hear.
Brian Buckley said on July 19th, 2006 at 2:11 pm
Excellent intro! Thank you.
Andrew said on September 16th, 2006 at 9:50 pm
Great intro. Very instructive. Keep up the good work!
Tom Bullock said on October 8th, 2007 at 12:10 pm
Your screencast came just in time for me. Previous and infrequent attempts to understand how to use firebug were unsuccessful. The screencast gave me a lot of important insights. Is there a site that lists all the screen casts and tutuorial pieces? Great job and a greater THANK YOU!!