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

5. you got exactly what you need

Answer 2

I wasn't seeing the line by line timings from the profiler either, and it was driving me crazy for days.

My code was written in TypeScript and converted to JavaScript with source maps using esbuild.

When I turned source maps off in esbuild, the line timings reappeared from the profiler!

The JavaScript is close enough to the TypeScript so the line timings are still useful.

I could have sworn I'd seen it work with source maps in the past but now I'm not so sure. It would be great if the line timings did work with source maps but it kind of makes sense that they don't.

Has anyone else seen profiler line timings work on code with sourcemaps turn on?

Answer 3

I have the same issue, but it starts to work when I deselect checkbox: Disable JavaScript samples. It works fine also with enabled Source Maps.