Screencast: Firebug Breakpoints

That's right folks. It's time for another screencast! This time, I thought it'd be nice to cover a little bit of Firebug. I've actually been meaning to put together a few screencasts on Firebug. If you like this one, definitely let me know and I'll be sure to put some more together.

In this screencast, I take a quick look at how to use breakpoints in Firebug to help in your debugging endeavours. It's a feature that I don't use nearly as often as I should and by putting this screencast together, I've hopefully pushed myself to use it more.

This screencast is just over 5 minutes long and, like last time, is available for the iPhone, as well.

View with Quicktime View on iPod or iPhone

Breakpoints may seem all "programmery" but at a very basic level can be easy to use. With the script and console tabs enabled for your test domain, use the script tab to view a particular script. With a script in view, you can click to the left of the line number to add a breakpoint. A red dot should appear. Refresh the page and the red dot will not have a triangle play button to let you know that execution has stopped there.

With execution stopped, you can use the console tab to run arbitrary code in the context of that function. If you're debugging private methods, this will be an invaluable way to inspect things without having to go back and edit the original code and doing a page refresh.

I didn't cover the Step Into, Over, Out features. Just knowing that you can create breakpoints and know what they do will help improve your ability to debug a particular function.

With regards to the screencast itself, I've been doing production a little differently each time. This time, I captured the video using Screenium and then pulled it into iMovie. iMovie doesn't have the most intuitive interface but once I figured it out, it was pretty powerful. I did a quick overlay for the intro and managed to splice two videos together. I exported the standard video and iPhone versions right from iMovie instead of using Handbrake like I did last time.

The audio was just using the internal mic. I have a more professional mic but no convenient place to set it up. I used it on a previous screencast and it makes a difference. It's just harder to work with.

Anyways, here's hoping you enjoyed yet another screencast!

Published February 28, 2009 · Updated February 28, 2009
Categorized as JavaScript
Short URL: http://snook.ca/s/931

Conversation

20 Comments · RSS feed
frebro said on February 28, 2009

Very interesting to see! I've done some JS and worked with jQuery from time to time, and this will surely help me with that. I knew of breakpoints before, but not how to actually use them.

It was also very interesting to see your work with Canvas. Would be nice with a screencast intro of that too if you feel up to it. Thanks!

Rhys said on February 28, 2009

Thanks for posting this great tutorial. I really need to learn to use more of firebug's features. It's great for CSS, I know already, but I don't think I have any appreciation of what it can do with js yet.

Keep the screncasts coming.

lolguy said on February 28, 2009

Moar!

Antoine Leclair said on February 28, 2009

Nice screencast!

Firebug is full of great surprises.

Mark Story said on February 28, 2009

Great screencast jon, I didn't know that console worked in the current function scope, that's a great trick thanks :)

Ibrahim said on March 01, 2009

Thank you Jonathan, please more on Firebug.

Lars Gunther said on March 02, 2009

A tip!

How about adding a free format for your videos?

Why I won't install QT again? I do not like iTunes, having Quicktime starting on system boot and taking up valuable RAM, nor do I appreciate Apple's efforts to sneak bonjour onto my systems.

Lars Gunther said on March 02, 2009

Oops!

I forgot. Yes. I have VLC and can play your file, just in case anyone wanted to call me a dumbnut. That's not really my point. I just thought a free format would be a nice addition - and make the screencast playable inside Opera or Firefox directly.

Jonathan Snook said on March 02, 2009

@Lars: thanks for the suggestion. I've been mostly waiting to see if anybody would request another format. It shouldn't be a big deal to export in another format... I just wasn't sure if it'd be necessary (and after doing 3 of them, I'm still not sure that it is). Maybe if more people request it. But I certainly understand your concerns and will consider it for future screencasts. Thanks!

Chris Gunther said on March 02, 2009

Great screencast.

Firebug is an amazingly powerful tool and I feel like I'm barely scratching the surface when using it. Nice to see another use from it.

Erin Cummings said on March 02, 2009

I mostly use firebug for css. This really helped explain how to use it for js.

Thanks for the great screencast.

Brian Hart said on March 02, 2009

Thanks for the great tutorial... I've been using Firebug for a long time for CSS, but just getting into the javascript aspects. Your tutorial was quick and to the point — very informative. I like the short format and looking forward to more.

I'll pass along... thanks very much.

pab said on March 03, 2009

Been looking for tutorials on this subject, this was great.

Would love to see a more extensive one.

Frank said on March 03, 2009

Keep up the good work, I am always finding something new about Firebug that makes my work easier to debug.

Thanks Snook!

Matt Curry said on March 03, 2009

Hey Jonathan,

Nice screencast. Even though I use FireBug all the time and I know about it's JS debugging, I hardly ever use it. It's something I really should try to do more.

Any reason you don't include an embeded version?

Ben Carlson said on March 03, 2009

Thanks for the screencast. Have always used Firebug to live-edit HTML, but was never really sure how to get into the JS part of it. This explains quite a few things. I would certainly welcome more screen casts as well!

Scott said on March 03, 2009

Great screencast, Jonathan. I'd like to see some more screencasts on the advanced functionality available in Firebug. Up to now I pretty much only use it to check applied CSS rules and catch javascript errors. I know it's capable of a whole lot more and I'd love to learn all about it.

Shira said on March 04, 2009

Thanks for this, Jonathan!
Can we have some more, sir? Please, sir?

John Faulds said on March 05, 2009

Another vote for being able to view screencasts in-browser rather than launching a separate app.

Erico said on March 05, 2009

Hi, sorry to bother you but as this is related to Firebug debugging, I thought it would be a good place to ask for help.

It seems that Firefox doesn't detect errors in code that was fetched using an AJAX call, and would like to know if there's a way to debug those (Incredible enough, I've resorted to use IE with a debugger attached!!!). You can find more details in this Stack Overflow question:
http://stackoverflow.com/questions/606794/debugging-ajax-code-with-firebug

And I apologize in advance if you think this is not the right place to ask for this.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.