如何可视化 NodeJS .cpuprofile答案

【问题标题】：How to visualize NodeJS .cpuprofile如何可视化 NodeJS .cpuprofile
【发布时间】：2017-06-21 22:53:26
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

有从 JSON .cpuprofile 到 callgrind 的转换器：github.com/jlfwong/chrome2calltree（使用原生 GUI 工具 KCacheGrind 或 QCacheGrind 以及一些递归限制）和 d3 火焰图：ebaytechblog.com/2016/06/15/igniting-node-js-flames。较旧的 chrome 内部查看器可能是在 JS 的帮助下编写的，可以从 git chromium.googlesource.com/chromium/src.git 中提取（靠近 devtools/front_end/profiler/CPUProfileView.js？）

标签： node.js profiling

【解决方案1】：

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

【讨论】：

【解决方案2】：

是的，格式好像变了。从 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 文件。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：