How to reveal line level profiling in JS sources?

Question

I've read this article about analyzing runtime performance. The image below is copied from this article. If you check this image, there are yellow highlighted execution time hints for JS files next to each line in the file.

I find this line level profiling feature pretty useful and I would like to try it in my own projects, too.

However, when I open a JS source file in the sources tab, I cannot see it. Note that, I already took a performance profiling snapshot. But still I cannot see this execution time hints.

How can I reveal this feature?

Thanks.

Answer 1

it's seems that it's removed to new tab. you can try this:

1. open javascript profile tab (or ctrl+ shift + p on win and type javascript profile)
2. start to record the site and refresh
3. stop the record

4. click on one of the js file enter image description here

5. you got exactly what you need enter image description here