Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Chrome DevTools: JavaScript CPU Profiling in Chrome 58

In Chrome 58, 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 moved to a more hidden location.

The long-term goal is to remove the old JavaScript CPU Profiler, and get everyone working with the new workflow.

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.

Accessing the old JavaScript CPU profiler

If you prefer the old "Record JavaScript CPU Profile" workflow that used to be available on the Profiles panel, you can still access it like so:

  1. Open the DevTools main menu.
  2. Select More tools > JavaScript Profiler. The old profiler opens in a new panel called JavaScript Profiler.

How to record a JS profile

  1. Open DevTools.
  2. Click the Performance tab.

    The Chrome DevTools Performance panel
    Figure 1. The Performance panel.

  3. Record in one of the following ways:

    • To profile a page load, click Record Page Load. DevTools automatically starts the recording and then automatically stops when it detects that the page has finished loading.
    • To profile a running page, click Record, perform the actions that you want to profile, and then click Stop 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.

Mapping between flame chart in old workflow and new workflow.
Figure 2. Mapping between flame chart in old workflow (left) and new workflow (right).

The Heavy (Bottom Up) view is available in the Bottom-Up tab:

Mapping between Bottom-Up view in old workflow and new workflow.
Figure 3. Mapping between Bottom-Up view in old workflow (left) and new workflow (right).

And the Tree (Top Down) view is available in the Call Tree tab:

Mapping between Tree view in old workflow and new workflow.
Figure 4. Mapping between Tree view in old workflow (left) and new workflow (right).

Feedback

How was this article? Great? Terrible? Let us know by answering the questions below.

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.

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!