Does the "Set next statement" feature exist in Chrome's Dev Tools or in Firebug?

Šime Vidas picture Šime Vidas · Apr 25, 2012 · Viewed 8.7k times · Source

IE's development tools, more specifically its JavaScript debugger, offer a "Set next statement" command, which enables you to specify which statement should be executed next. That way, you can effectively skip certain parts of functions or even (again, effectively) return from a function early.

So, for this function...

function test () {
    alert(1);
    alert(2);
    alert(3);
}

If we set a break-point on the first alert, and then invoke the function, we can execute the first alert (F10), and then right-click on the third alert and choose "Set next statement". Now, if we press F10, the third alert will be executed, so, effectively, the second alert was skipped.

(Test in IE here: --- open IE's tools with F12, switch to "Script" tab, set breakpoint, press "Start debugging" button, refresh page if necessary)

I like this "set next statement" feature. However, I did not notice it in Chrome's dev tools or in Firebug. Does this feature exist in those debuggers?

Answer

Paul Irish picture Paul Irish · Apr 30, 2012

While Chrome DevTools doesn't have "Set Next Statement", you can more explicitly define next statement by just editing the JavaScript while it's paused at the breakpoint.

I've made a short screencast for you to show Chrome DevTools Live Edit + Breakpoint Debugging.

In essence: while at a breakpoint, live edit your script by clicking into the Scripts panel and making changes. Hit cmd + s to save. Then walk through that code with its new changes. Far more powerful than just bypassing code, you could be adding new functionality as well.