Web App Development

Chrome DevTools: Restart Frame

The Restart Frame feature in Chrome’s developer tools allows you to re-run the preceding code after hitting a breakpoint. That means you can time travel within the current call stack (to a limited extent).

If you prefer a video, I made a screencast about the Restart Frame feature.

Example usage of Restart Frame

I’ve put up this small example project on Github.

This is the main bit of code. Unfortunately it’s not working.

function calculateValue(){
    var value = 6;
    value = subtractTwo(value); // 6 - 2 = 4
    value = multiplyByThree(value); // 4 * 3 = 12
    value = addFour(value); // 12 + 4 = 16

    console.assert(value === 16, "Value wasn't 16.")

    return value;
}

If you enable “Pause on uncaught exceptions” Chrome will pause when the assert call fails.

Assert fails because the value is 20 insted of 16

Now we could set a breakpoint at the top of the function and reload the page. But “Restart Frame” actually allows us to simply re-run the function.

To use it, go to the call stack and find the function you want to restart. Then right-click and select “Restart Frame” from the context menu.

Restart Frame feature in call stack pane

Chrome moves execution to the top of the function.

Execution is now at the top of the frame

You can now step through the function as normal. That means you can pinpoint where the value stopped being correct.

By stepping through the function line by line (using “Step Over”) we find that the error was introduced by the multiplyByThree function:

After calling multiplyByThree the values is 16 instead of the expected 12.

value is now 16, but it should be (6 - 2) * 3 = 12.

Now that we know what function isn’t working correctly we can use “Restart Frame” again, but this time we’ll step into multiplyByThree and find the bug.

After calling multiplyByThree the values is 16 instead of the expected 12.

multiplyByFour is actually multiplying by three. If you want, you can actually edit the file inside Chrome, save it and continue execution. The app will show the correct result.

Limitations of Restart Frame

When using Restart Frame Chrome merely moves the execution pointer to the top of the function. It doesn’t actually restore the state from when that part of code was running.

For example, if you pass the original value into our function and call calculateValue(6) Chrome will not reset the value to 6 after restarting the frame:

Value not being reset

However, you can often get around this by using Restart Frame on the parent function, in this case onClick.


Follow me on Twitter