如何可视化NodeJS .cpuprofile

Question

我使用 v8-profiler 来分析我的 NodeJS 应用程序。它生成一个 .cpuprofile 文件。

我曾经能够使用 Google Chrome 内置的 DevTools 可视化文件的内容。但是，Chrome 最近更改了分析结果的文件格式，Chrome 不再能够读取 .cpuprofile 文件。

注意：我的目标是查看调用树并自下而上。我不关心火焰图。

谢谢。

Answer 1

有一个vscode扩展用于查看.cpuprofile：

JavaScript 配置文件的火焰图可视化工具

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

Answer 2

我最终下载了旧的 Chromium 版本。 http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html?prefix=Win_x64/381909/

Answer 3

是的，格式好像变了。从 NodeJS v9.11.1 开始，我得到了一个树状的 JSON 结构：

{
  "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": [
          {
             ...

从 Chromium 66.0.3359.117 开始，我得到了扁平结构：

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

对我有用的是

chrome2calltree

工具，它采用 NodeJS 使用的旧格式并将其转换为 KCacheGrind 和 QCacheGrind 等工具可以打开的

.prof

文件。

Answer 4

名为 0x 的工具已将

.cpuprofile

（由 v8-profiler-next 编写）变成了交互式火焰图，非常简单：

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

（当然是安装一次之后，例如

npm install -g 0x

）