Chrome DevTools: JavaScript CPU Profiling in Chrome 57
In Chrome 57, which is currently Canary, the Timeline panel has been renamed to the Performance panel, the Profiles panel has been renamed to the Memory panel, and the Record JavaScript CPU Profile feature on the Profiles panel has been removed.
Have no fear, you can still profile your JavaScript from the Performance panel. In fact, that's why the Record JavaScript CPU Profile feature was removed. The workflows and layouts are a little different, but the Performance panel provides all of the same information as the old workflow, and then some.
This little migration guide shows you how to record a JS profile in the Performance panel, and how the Performance panel's UI maps to the old workflow that you're used to.
How to record a JS profile
- Open DevTools.
- Click the Performance tab.
Set the performance profile to JavaScript.
![JS Performance Profile]()
You can record in two ways:
- To profile a page load, press Command+R (Mac) or Control+R (Windows, Linux) to reload the page. DevTools automatically starts the recording and then automatically stops when it detects that the page has finished loading.
- To profile a running page, press Record
![Record]()
, perform the actions that you want
to profile, and then click Record again when you're finished.
, perform the actions that you want
to profile, and then click Record again when you're finished.How the old workflow maps to the new
From the Chart view of the old workflow, the screenshot below shows you the position of the CPU usage overview chart (top arrow) and the flame chart (bottom arrow) in the new workflow.
The Heavy (Bottom Up) view is available in the Bottom-Up tab:
And the Tree (Top Down) view is available in the Call Tree tab:
Feedback
How was this article? Great? Terrible? Let us know by answering the questions below.
Did this article adequately explain how the old workflow maps to the new workflow?
Are there any features from the old workflow missing in this article?
Ping @ChromeDevTools on Twitter or open a GitHub issue on our docs repo if we missed any features, or if you have any other questions about this article.