New debug icon "Step F9" in Chrome Dev Tools

Question

So what does this actualy do?

I searched trough the release notes of the Chrome Dev Tools and couldn't find a trace of it. None of the tutorials out there don't mention it either so I'm guessing it's new.

Experimenting with some code I seems to behave the same as "Step Into" and couldn't find a difference.

Answer 1

They have changed the existing "step into" button so it will now step into async functions (such as setTimeout).

So this new "Step F9" button works in the same way as the old "step into" button used to work, whereby it will step over the async function and onto the next line.

This page from google has a nice animated GIF which visually explains the above

https://developers.google.com/web/updates/2018/01/devtools#async