How to visualize NodeJS .cpuprofile - node.js

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.

Answer 1

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

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

Answer 3

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.