为你揭开 node.js 调试面纱

coder_koala

发布于 2019-12-06 12:49:05

1.2K0

发布于 2019-12-06 12:49:05

文章被收录于专栏：程序员成长指北

文章来源，公众号【牛技】，经【牛技】作者授权转载也欢迎关注该公众号

前言

最近在写公司内部的一个 node 应用的时候，发现自己在 node 调试这块还是比较薄弱的，特意恶补了一下，在这里也做一下分享。

俗话说写代码三分靠 coding，七分靠 debug，特别是在遇到疑难杂症的时候，debug 显得尤为重要。

Node v6.3+ 的版本提供了两个用于调试的协议：v8 Debugger Protocol 和 v8 Inspector Protocol方便第三方插件和IDE等监测和介入 node(V8) 的进程，从而进行调试。

v8 Debugger Protocol 是 node v6.3 之前就推出的调试协议，使用一个 TCP 端口（通常是 5858）与Client/IDE 交互。

v8 Inpector Protocol是 node v6.3 新加入的协议，原理是通过 websocket（通常是9229端口）和 IDE/Client 进行交互，同时也基于了 chrome 的图形调试界面 devtools 提供了图形调试界面。

调试指南

开启调试

通过使用 node --inspect=9229 app.js 对指定脚本开启指定端口进行调试

下面通过一个简单的例子来说明如何调试

① 首先创建 app.js

const http = require('http');

const server = http.createServer((req, res) => {   
    res.writeHead(200, { 'content-type': 'text/html' });   
    res.end('<h1>hello world!</h1>');  
});

server.listen(3000, () => {   
    console.log('Listening on http://localhost:3000');  
});

② 终端运行 node --inspect app.js

③ 最后，看到下图，就表明调试服务已经开启成功了

提示 Debugger attached 表示已经在浏览器中启动了。然后录就可以在 chrome 浏览器里面进行 js 调试了。

④ 打开 chrome 浏览器并输入 chrome://inspect/#devices。勾选 Discover network targets，然后点击 Configure 设置地址和端口号。

⑤ 确认完成后刷新界面，发现我们的服务已经出现在了 Remote Target 下。

⑥ 点击 insepect 进入调试界面

ps: 推荐 chrome 下一个好用的插件 NIM, 可以省去 4 ~ 6 步骤，自动进入到我们在终端输入的调试服务的调试界面中。

如何调试

基本用法和普通浏览器中的 js 调试一样，常用到的有 Chrome devtool 的 Console Panel 和 Source Panel，涉及到 CPU 性能分析等高级功能可能还有用到 Memory Panel 和 Profile Panel 等。这里只介绍常用的两种 Panel。

Console Panel

console 可以直接代理 node的输出服务，可以打印出在 node 中的输出，并且可以随意在 node 的上下文中执行代码。

Source Panel

Source Panel 中可以查看 node 进程中加载的所有文件，包括第三方库和 node 核心库，最重要的可以打断点进行调试。

进阶

使用 vscode 调试

vscode 内置了 NodeDebugger，支持 v8 Debugger Protocol 和 v8 Inspector Protocol 两种协议。

① 打开浏览器，找到左侧菜单栏的爬虫按钮

点击 Add Configurations，添加 debug 配置文件

选择完成之后，在项目的根目录中会生成一个.vscode的目录，这个目录中存放了各种各样的VScode编辑器的配置。现在这个目录中就包含了一个文件名为lanuch.json的配置文件。

② 添加配置文件内容，一份比较简单的配置文件内容如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "调试node服务测试",
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

其中比较重要的字段是 Program, 它标明了调试程序的入口。

③ 点击启动按钮，就会启动对应的调试服务。

④ 之后的调试步骤和 chrome 中的调试步骤基本一致，可以进行断点调试等。

调试 begg 应用

集团内部的 node 应用基本是采用 begg 框架进行开发，begg 框架本身也提供了一个很好用的 debug npm scripts： tnpm run debug。

之后的调试步骤基本和上述的两种调试步骤相同，唯一需要注意的是 begg 框架本身启动多个进程，所以需要在配置文件中 attatch 多个端口。拿 vscode debug 配置文件为例：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "compounds": [ // 将三个任务组合一起运行
    {
      "name": "Debug Egg",
      "configurations": [
        "npm debug",
        "Attach 5800",
        "Attach 9230"
      ]
    }
  ],
  "configurations": [

    {
      "name": "npm debug",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "debug"
      ],
      "port": 9229
    },
    {
      "name": "Attach 5800", // 对 5800 端口进行调试，Agent
      "type": "node",
      "request": "attach",
      // "timeout": 10000,
      "protocol": "inspector", // 默认会使用 legacy 协议，因为刚开始无法 auto detect
      "port": 5800
    },
    {
      "name": "Attach 9230", // 对 9230 端口进行调试，Worker
      "type": "node",
      "request": "attach",
      // "timeout": 10000,
      "protocol": "inspector",
      "port": 9230
    }
  ]
}