Snook.ca

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.

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.

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.

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.

@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!

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.

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!

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.

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.

Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure.
I wrote SMACSS. I tweet. Want to learn more?