Subscribe to RSS Feed

I have recently wrote several posts about new features introduced in Firebug 1.5 (so far beta 1 is available) and now I would like to describe another great feature called Break On Next (or simply Break On), which is also new in Firebug 1.5.

This feature extends the idea of breakpoints, which is one of the cornerstones of todays debugging tools and I believe that Break On Next brings a breath of fresh air to the world of debugging & breakpoints.

It's primary goal is breaking the Javascript execution at required place in the code that is unknown to the developer beforehand. The typical example, probably well known to most web developers is: "Where in the hell is the code, which is executed if I click this button?".

Let's see how Firebug can answer this question...

Break On Next UI

The entire feature is represented by a new Break On button that is available in Firebug's main toolbar.

Break On Next button in Firebug's UI

The logic of the button depends on the panel that is currently selected in Firebug. For instance, if the Script panel is selected and the feature activated (by clicking on the button that starts throbbing Break On Next Activated), the debugger halts as soon as the next line of Javascript is executed. So, this is the moment when you have to e.g. press a button in your web app and see what code is actually called.

Here is how the button works in other Firebug panels (the button is disabled for panels, which doesn't support this feature):

  • Script: Break on the next executed script.
  • HTML: Break on HTML mutation (element addition or removal and attribute change).
  • Net: Break on XMLHttpRequest execution.
  • Console: Break on Javascript error.

See also online interactive demo page. Sure, you need Firebug 1.5b1.

We have got some feedback that the UI (yeah, the UI is always the hardest part) could be confusing. So please, if you have any ideas how to improve this feature, post a comment here or on Firebug newsgroup.

Thanks!


Rss Commenti

17 Comments

  1. [...] Software is hard | Firebug 1.5: Break On Next http://www.softwareishard.com/blog/firebug/firebug-15-break-on-next – view page – cached More musings on software development — From the page [...]

    #1 Twitter Trackbacks for Software is hard | Firebug 1.5: Break On Next [softwareishard.com] on Topsy.com
  2. W00t, i love this, it's been on my mind as the most important missing part in javascript debugging, but never got to request it. Great to see i was not the only one with this idea 😀

    #2 Dorus
  3. Can there be a shortcut for it? Right now, you have to worry about mouseover/mouseout events because you have to move your mouse to turn on the Break on Next

    #3 Trevan
  4. This looks useful..!! 😀

    #4 Zim
  5. Saweet!

    #5 Dan Gayle
  6. Dorus, Venkman has had this feature forever (for JavaScript).

    #6 Colby Russell
  7. @Trevan: Yes, good point, I'll do it.

    #7 Honza
  8. [...] Software is hard | Firebug 1.5: Break On Next [...]

    #8 12 Tips to improve your jQuery code | Geekology | DevBlogr
  9. Social comments and analytics for this post...

    This post was mentioned on Twitter by ljouanneau: AWESOME ! break-on-next and other break features in firebug 1.5 ! http://tinyurl.com/yjllnkr http://tinyurl.com/yfqbyvf...

    #9 uberVU - social comments
  10. [...] Break On Next: breaking on the next executed script, HTML mutation, XHR execution, or JavaScript error. [...]

    #10 Firebug 1.5: a closer look ✩ hacks.mozilla.org
  11. @colby russell, I'd like to know why you think Venkman has these features. It does not even have an HTML, DOM or Net panel to set breakpoints on!

    #11 johnjbarton
  12. [...] Break on Next XHR [...]

    #12 Firebug 1.5 Release Notes – FirebugWiki | ERVINTER.COM
  13. Is it possible to set a breakpoint in javascript source code using a pseudo comment or something?

    #13 Nick
  14. @Nick: you can use 'debugger' keyword. Firebug will break on it.
    Honza

    #14 Honza
  15. I clicked on the pause button and it stopped throbbing. But still my script breaks on errors..

    #15 Gany
  16. @Gany: Please create a new issue for this + detailed steps how to reproduce the problem (what page to load, when exactly click the button, what is the error, etc.), in Firebug's issue list http://code.google.com/p/fbug/issues/list and I'll take a look at it. Thanks!

    #16 Honza
  17. Firebug 1.5.3 break on next feature doesn't work in FF 3.6.3
    At least it wouldn't for me. It did break when I put a manual breakpoint in. I want to poke a new value into a parameter passed to a function but the function is generated dynamically so I can't set a manual breakpoint.

    #17 Hugh

Sorry, the comment form is closed at this time.