How to visualize NodeJS .cpuprofile

Question

I use v8-profiler to profile my NodeJS app. It generates a .cpuprofile file.

I used to be able to visualize the content of the file with Google Chrome built-in DevTools. However, Chrome recently changed the file format for profiling results and Chrome is no longer able to read .cpuprofile files.

Note: My goal is to see the call tree and bottom-up. I do not care about flame chart.

Thanks.

Backbencher

There is converter from JSON .cpuprofile to callgrind: github.com/jlfwong/chrome2calltree (with native GUI tools KCacheGrind or QCacheGrind and some limitations around recursion) and to d3 flamegraph: ebaytechblog.com/2016/06/15/igniting-node-js-flames. Older chrome internal viewer probably is written with help of JS and can be extracted from the git chromium.googlesource.com/chromium/src.git (somewhere near devtools/front_end/profiler/CPUProfileView.js?) – Kleptomania

Answer 1

I ended up downloading an old Chromium version. http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html?prefix=Win_x64/381909/

Backbencher

Answer 2

There is a vscode extension for viewing .cpuprofile:

Flame Chart Visualizer for JavaScript Profiles

https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-js-profile-flame

Ongoing

Answer 3

The tool called 0x had turned a .cpuprofile (written by v8-profiler-next) into an interactive flamegraph for me, very easy:

0x --visualize-cpu-profile my.cpuprofile

(After, ofcourse, installing it once, e.g. npm install -g 0x)

Whitewing

Answer 4

Yes, it seems the format has changed. From NodeJS v9.11.1 I'm getting a tree-like JSON structure:

{
  "typeId": "CPU",
  "uid": "1",
  "title": "Profile 1",
  "head": {
    "functionName": "(root)",
    "url": "",
    "lineNumber": 0,
    "callUID": 1319082045,
    "bailoutReason": "no reason",
    "id": 17,
    "hitCount": 0,
    "children": [
      {
        "functionName": "(anonymous function)",
        "url": "...",
        "lineNumber": 726,
        "callUID": 3193325993,
        "bailoutReason": "no reason",
        "id": 16,
        "hitCount": 0,
        "children": [
          {
             ...

From Chromium 66.0.3359.117 I'm getting a flat structure:

{
  "nodes": [
    {
      "id": 1,
      "callFrame": {
        "functionName": "(root)",
        "scriptId": "0",
        "url": "",
        "lineNumber": -1,
        "columnNumber": -1
      },
      "hitCount": 0,
      "children": [
        2,
        3
      ]
    },
    {
      ...

What worked for me is the chrome2calltree tool, which takes the old format used by NodeJS and turns it into a .prof file that tools like KCacheGrind and QCacheGrind can open.

Marelda