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

Question

What is the difference of "Step" and "Step into" in Google Chrome Developer tools,? I even can't find it in docs https://developers.google.com/web/tools/chrome-devtools/javascript/step-code

Answer 1

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