What's the difference of Step and Step Into in Google Chrome developer tools?

Viewed 1561
1 Answers

You can spot the difference while running async code or multi-threaded code.

Step into: DevTools assumes that you want to pause in the asynchronous code that eventually runs

Step: DevTools pause in code as it chronologically ran

Consider this example:

setTimeout(() => {
    console.log('inside')
}, 3000);
console.log('outside')

After stopping on the breakpoint on the first line (setTimeout(() => {).

Step into: it waits 3 seconds and stops on the 2nd line (console.log('inside'))

Step it pauses on the 4th line (console.log('outside'))

Link to the docs: https://developers.google.com/web/updates/2018/01/devtools#async

Related