Author: Nancy Li (@lilysjtu2011), Jecelyn Yeen (@jecfish)
Posted: Nov 9, 2022
Status: Complete
Chrome bug tracker: https://crbug.com/1354548

The goal of this RFC is to validate the design with the community, solicit feedback on open questions, and enable experimentation via a non-production-ready prototype included in this proposal.

Complete: This RFC is now complete. See a summary #2 (comment).

Motivation #

Since Chrome 58, the DevTools team set a long-term goal to deprecate the JavaScript Profiler (Profiler tab), and migrate Node.js and Deno developers to use Performance panel for profiling JavaScript CPU performance.

These changes allow users to profile performance consistently with one single entry point - the Performance panel.

Goals #

• Profile Node.js / Deno JavaScript CPU performance with Performance panel

  • Developers are able to profile JavaScript CPU performance with the Performance panel.
  • The Performance panel should display relevant JavaScript CPU information, similar to the Profiler tab.

• Minimize impact on the ecosystem

  • Overall mental model: developers should be able to apply their existing knowledge to profile JavaScript CPU performance using the Performance panel, with minimal learning curve.

Current state #

Here is the current workflow on profiling JavaScript CPU performance:

1. Run node --inspect file-name.js or deno --inspect file-name.js (e.g. use this example file)

2. Open DevTools for Node via one of these options:

   • The green Node button at the top of DevTools
   • Enter url chrome://inspect > Devices > click Open dedicated DevTools for Node
   • Enter url chrome://inspect > Remote target > click Inspect
     

3. Start and end profiling by clicking the Record button in the Profiler tab.
   

4. View the result in the Profiler tab. Use the dropdown to switch to different views. It support 3 modes currently :

   • Chart. Users can switch to the Chart view with the dropdown.
   • Heavy (bottom up). This is the default view.
   • Tree (top down). Users can switch to the Chart view with the dropdown.

   Chart
   
   Heavy (bottom up)
   
   Tree (top down)
   

Try the prototype: Profile using the Performance panel #

There is a prototype implementation. Below, we show a guide for trying it out. This is a draft implementation, with missing features and non-final design aspects.

Please use Chrome Canary to play with the prototype.

Profiling with the Record button

1. Run node --inspect file-name.js or deno --inspect file-name.js

2. Open DevTools for Node. (Chrome Canary)

3. Open the Performance panel via the 3-dot menu > More tools > Performance panel. This step is not required once the changes are rolled out officially, the Performance panel will show by default.
   

4. Start and end profiling by clicking the Record button in the Performance panel.
   

5. View the result in the Performance panel. The UI is different from the Profiler tab but you can find all the information:

   • Chart. The Performance panel always shows the chart on top.
   • Heavy (bottom up). The Performance panel shows this information in the bottom pane > Bottom-up.
   • Tree (top down). The Performance panel shows this information in the bottom pane > Call tree.

   Chart
   
   Bottom-up
   
   Call tree
   

Profiling with the console.profile() command

If you profile performance with the console.profile() command, you need to enable an experiment to map the result to the Performance panel.

1. Enable the View console.profile() results in the Performance panel for Node.js checkbox via the Settings icon > Experiments tab.
   
2. Open DevTools for Node. (Chrome Canary)
3. Run node --inspect file-name.js or deno --inspect file-name.js (e.g. use this example file)
4. Once the profile is completed, the result will be shown in the Performance panel automatically.

FAQ #

1. What will happen with the Profiler tab in the future? Will that be deprecated / removed?
   Yes, we plan to deprecate the Profiler tab by stages. We will look into community feedback, and implement the JavaScript profiling capability into the Performance panel before deprecation.

2. Can I load the CPU profile I saved in the Profiler tab previously into the Performance panel?
   Yes. You can import .cpuprofile files to the Performance panel.

3. Are both Profiler tab and Performance panel using the same data source?
   Yes. The backend data source is the same for both. However, there are frontend logics that change the displayed data in the Profiler tab.

   Below are the same profiling results shown in the Profiler tab and Performance panel.

   
   

   There are 3 1 known differences at the moment:

   a. From showing frames directly to organizing them under call stack - In the above example, the Profiler shows executeUserEntryPoint and the Module frames straight away. On the other hand, the Performance panel organizes them under the same call stack, you need to expand them to view it.
   b. crbug.com/1382733 (Fixed) - Some frames like (garbage collector) are hidden now in the Performance panel. We are working on adding them.
   c. crbug.com/1080918 (Fixed) - Differences in profiling setTimeout call due to the stack trace collection. We are working on addressing this.

4. Where is the realtime total JS heap size view?
   The realtime Total JS heap size information is already available in the Memory panel. There is no plan to move that into the Performance panel.

   The realtime total JS heap size in the Memory panel
   

5. Does the Performance panel support reload and record Node.js / Deno performance?
   No. This proposal focuses on migrating the existing features in the Profiler tab to the Performance panel. The Profiler tab doesn’t support reload and record.

Questions for Discussion #

In addition to general feedback, we would like to collect feedback on the following specific questions:

1. Does the prototype correctly display JavaScript profiling information?
   We are interested in any cases where the information is missing or has discrepancy with the Profiler tab.

2. Does profiling in the Performance panel UI work well for you?
   We would be interested in any use cases where this change in UI would be problematic or burdensome, and where the UI is important.
   For example, should we enlarge the Bottom-up tab and show it by default when you open the Performance panel in Node.js / Deno mode?