Subscribe to RSS Feed

Another Firebug feature that would deserve more attention is re-run (introduced here). This neat feature represented by a simple button on Script panel toolbar allows re-execution of the current call-stack you are halted on in the debugger. This helps especially in cases where it's hard to reproduce an action in the UI in order to execute specific Javascript function implemented on a page.

Of course, this button is only available when you are stopped at a breakpoint.

Lets go through real example step by step.

First, we need to create a breakpoint to break on.

We have created a breakpoint in a JS function that is called when you press a button on the example page. Let's pretend that execution of this function is not that simple and the developer needs to go through a complicated scenario to hit the breakpoint.

Click the button on the example page to hit our breakpoint.

As you can see within the Stack side-panel, there is several function calls on the stack. The bottom/oldest stack is the click event handler that has been executed upon our mouse click.

Since the debugger is sitting at the second console.log, the Console panel contains just one log.

Now let's imagine the developer wants to perform the execution again. Perhaps another function has been already called and it's necessary to debug that call too. This would require creating another breakpoint higher in the stack and re-execute.

Re-execution: instead of pressing the Continue button and so, be forced to repeate the user scenario again, let's click the Rerun button!

Yes, we are again at the same spot.

The only evidence that we previously stopped the execution at line 28 and re-ran the stack is the Console Panel that clearly shows only the Hello! text - twice, since the other log has never been reached!

Isn't that cool? 🙂

* Firebug 1.7 contains a little bug related to the stack frame list. There are couple more helper frames displayed (used to implement this feature) that should never be visible. Firebug 1.8 fixes it.


Rss Commenti

7 Comments

  1. Interesting, but can you explain what Firebug mean by "re-run". There is no such obvious concept. The state of the program changes during execution, and often affects the way functions call each other. After reading this post, I have no idea what this "re-run" feature does, and that makes it not very useful to me.

    #1 Jesper Kristensen
  2. @Jesper Kristensen: Yep, I could have probably go deeper into implementation details. Anyway, here it is: when the Rerun button is pressed, Firebug aborts the current call stack and calls the bottom most (the oldest) frame/function with the original arguments/values.
    Yes, there are cases where the state of the program changes and the re-execution could have side effects, but according to our experience this simple rerun concept works in many cases (and especially on a web page).

    #2 Honza
  3. I had a Web Inspector user suggest to me that they wanted to re-run from whatever call frame was selected in the call frame, not just the top-level frame. I told him to open that bug himself (I assume it's not already supported).

    I think he got the idea from Eclipse: bit.ly/ly7OGz . I believe we had this in Smalltalk as well 🙂

    #3 Patrick Mueller
  4. @Patrick: That's a good idea and I believe it should be simple to do.

    #4 Honza
  5. Thanks for explaining!

    Adding a demopage with the script you wrote to test this would have made it even better so people can try this immediately.

    Secondly: "Click the button and break." At first it was not clear to me which button you meant, but then I understood you meant the re-run button.

    #5 Niels Bom
  6. Oh crap, I completely overlooked your demopage, haha 🙂

    #6 Niels Bom
  7. @Niels Bom: I improved the description, should be clear now.

    #7 Honza

Sorry, the comment form is closed at this time.