You're paused on A. By pressing Step out, DevTools executes
the rest of the code in getName(), which is just B in this example, and
then pauses on C.

Run all code up to a certain line

When debugging a long function, there may be a lot of code that is not related
to the problem you're debugging.

You could step through all the lines, but that can be tedious. You could
set a line-of-code breakpoint on the line you're interested in and then
press Resume Script Execution, but there's
a faster way.

Right-click the line of code that you're interested in, and select
Continue to here. DevTools runs all of the code up to that point, and
then pauses on that line.

Figure 4. Selecting Continue to here

Restart the top function of the call stack

While paused on a line of code, right-click anywhere in the Call Stack pane
and select Restart Frame to pause on the first line of the top function
in your call stack. The top function is the last function that was called.

You're paused on A. After clicking Restart Frame, you'd be paused
on B, without ever setting a breakpoint or pressing
Resume script execution.

Figure 5. Selecting Restart Frame

Resume script execution

To continue your script's execution after a pause, click Resume Script
Execution.
DevTools executes the script up until the next breakpoint, if any.

Figure 6. Resume script execution, outlined in blue

Force script execution

To ignore all breakpoints and force your script to resume execution, click and
hold Resume Script Execution and then select Force script
execution.

Figure 7. Selecting Force script execution

Change thread context

When working with web workers or service workers, click on a context listed
in the Threads pane to switch to that context. The blue arrow icon represents
which context is currently selected.

Figure 8. The Threads pane, outlined in blue

For example, suppose that you're paused on a breakpoint in both your main
script and your service worker script. You want to view the local and global
properties for the service worker context, but the Sources panel is showing
the main script context. By clicking on the service worker entry in the Threads
pane, you'd be able to switch to that context.

View and edit local, closure, and global properties

While paused on a line of code, use the Scope pane to view and edit the
values of properties and variables in the local, closure, and global scopes.

Double-click a property value to change it.

Non-enumerable properties are greyed out.

Figure 9. The Scope pane, outlined in blue

View the current call stack

While paused on a line of code, use the Call Stack pane to view the
call stack that got you to this point.

If you're working with async code, check the Async checkbox to enable
async call stacks.

Click on an entry to jump to the line of code where that function
was called. The blue arrow icon represents which function DevTools is
currently highlighting.

Figure 10. The Call Stack pane, outlined in blue
Note: When not paused on a line of code, the Call Stack pane is empty.

Copy stack trace

Right-click anywhere in the Call Stack pane and select Copy stack trace
to copy the current call stack to the clipboard.

Ignore a script or pattern of scripts

Blackbox a script when you want to ignore that script while debugging. When
blackboxed, a script is obscured in the Call Stack pane, and you
never step into the script's functions when you step through your code.

For example, suppose you're stepping through this code:

function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}

A is a third-party library that you trust. If you're confident that the
problem you're debugging is not related to the third-party library, then
it makes sense to blackbox the script.

Watch the values of custom JavaScript expressions

Use the Watch pane to watch the values of custom expressions.
You can watch any valid JavaScript expression.

Figure 15. The Watch pane, outlined in blue

Click Add Expression to create a
new watch expression.

Click Refresh
to refresh the values of all existing expressions. Values automatically
refresh while stepping through code.

Hover over an expression and click Delete Expression to
delete it.

Make a minified file readable

Click Format to make a
minified file human-readable.

Figure 16. Format, outlined in blue

Edit a script

When fixing a bug, you often want to test out some changes to your JavaScript
code. You don't need to make the changes in an external browser and then reload
the page. You can edit your script in DevTools.