Node.js 深度調試指南

時間 2020-06-28

原文原文鏈接

在 Node.js 項目開發過程當中，隨着項目的發展，調用關係愈來愈複雜，調試工具的重要性日益凸顯。php

Node(v6.3+)集成了方便好用 V8 Inspect 調試器，容許咱們經過 Chrome DevTools 進行圖形化的調試和性能分析。同時，咱們也可使用 VS Code，Webstorm 等支持的編輯器對 Node.js 程序進行調試。html

Node Inspect

要想啓動調試器，咱們須要在啓動 Node.js 應用程序時傳入 --inspect 標誌，也可使用該標誌提供自定義的端口，例如 --inspect=9222 將會在 9222 端口上接受開發者工具的鏈接。前端

一段簡單的代碼node

 function log() {
   let a = 1;
   console.log(a);
   a = 2;
   console.log(a);
 }
 
 log();

使用 node --inspect 啓動web

這時咱們會發現，程序直接執行完成了，沒有中斷，致使咱們沒法使用 Chrome DevTools 進行調試。對於這種直接執行的代碼，咱們可使用 --inspect-brk 參數，在應用程序代碼的第一行終端，而後再進行調試。chrome

Chrome DevTools

當開啓 Node 調試後，咱們能夠打開 Chrome，訪問 chrome://inspect ，在 Devices 中查找到咱們的 Node.js 程序，點擊 inspect 打開調試面板進行操做npm

在調試工具窗口，咱們能夠設置斷點，運行程序進行調試json

運行中程序調試

在某些狀況下，咱們能夠須要對正在運行的 Node.js 程序進行調試，好比 Express Web 服務。咱們不可能中止服務，再以 --inspect 運行調試。瀏覽器

對於這種狀況，咱們能夠先獲取服務的進程 Id服務器

向腳本進程發送 SIGUSR1 信號，就能夠創建調試鏈接

 kill -SIGUSR1 34943
 複製代碼

在 Windows 平臺下，可使用下面的命令

 node -e 'process._debugProcess(30464)'

須要注意的是：這種調試任然會中斷服務進程的執行。

VS Code 調試

快速調試

對於簡單的應用程序，能夠打開文件，按 F5 並選擇調試類型爲 Node，便可進行調試

使用配置調試

對於大多數的調試場景，更推薦使用配置文件，由於它能夠配置並保存調試設置的信息，方便咱們下次快速使用。在 VC Code 中，調試配置一般存儲在 .vscode 文件夾下的 launch.json 文件中。能夠點擊左側欄目中的調試圖標，快速建立 launch.json 文件

VS Code 會自動下面相似的 launch.json 調試配置文件，其中 program 表明咱們須要調試的文件路徑，workspaceFolder 爲當前工做區的路徑，一般是項目的根目錄

 {
   "version": "0.2.0",
   "configurations": [
     {
       "type": "node",
       "request": "launch",
       "name": "啓動程序",
       "skipFiles": ["<node_internals>/**"],
       "program": "${workspaceFolder}/index.js"
     }
   ]
 }

設置斷點，便可啓動調試，並在左側的樹視圖中看到變量對應的值以及堆棧信息

launch.json

launch.json 中有許多不一樣的屬性，支持不一樣的調試器和調試場景，下面的屬性在每一個啓動配置中是必須的

name - 當前調試配置項的名稱，可讀性要好，區分每一個調試配置項
type - 用於此啓動配置的調試器的類型。每一個已安裝的調試擴展都引入一種類型：例如node，php，go 等。
request - 當前調試項的類型，目前支持 launch 和 attach 兩種類型。launch 適合調試未啓動的程序，attach 則適合調試已經運行的程序。

一些其餘比較有用的選項：

program - 啓動調試器時要運行的可執行程序或文件
args - 傳遞給程序進行調試的參數
env - 調試時的環境變量
envFile - 包含環境變量鍵值對的文件
stopOnEntry - 程序啓動時當即中斷
port - 鏈接到正在運行的調試器的端口
runtimeExecutable - 啓用調試的可執行 Runtime，默認是 Node

日誌點 - Logpoints

VS Code 提供了好用的調試小工具 - 日誌點，日誌點是斷點的一種變體，它不 "中斷 "進入調試器，而是將一條消息記錄到控制檯，日誌點對於在調試不能暫停或中止的生產服務器時注入日誌特別有用。

NPM 腳本調試

除了使用 node 啓動 Node.js 項目以外，VS Code 還支持自定義啓動程序 runtime，藉助這個能力，能夠直接使用 NPM 啓動調試。以下面，使用 npm run debug 啓動調試

 "scripts": {
     "debug": "node --inspect server.js"
  }

launch.json

 {
   "type": "node",
   "request": "launch",
   "name": "NPM 啓動",
   "runtimeExecutable": "npm",
   "runtimeArgs": ["run", "debug"],
   "port": 9229
 }

TypeScript 調試

VS Code 內置的 Node.js 的調試器支持 JavaScript Source Map，能夠結合 Source Map 調試轉譯前的代碼，如 TypeScript，壓縮混淆的 JavaScript 代碼等均可以利用 Source Map 的支持調試源碼。

我準備了一個簡單的 TS Server Demo，能夠直接 Clone 源碼本地測試。下面是項目中的 src/index.ts 文件，建立了一個 HTTP Server

 import * as http from "http";
 
 let reqCount = 1;
 
 http
   .createServer((req, res) => {
     const message = `Request Count: ${reqCount}`;
 
     res.writeHead(200, { "Content-Type": "text/html" });
 
     res.end(`<html><div>${message}</div></html>`);
 
     console.log("handled request: " + reqCount++);
   })
   .listen(3000);
 
 console.log("server running on port 3000");

建立 tsconfig.json 配置，配置編譯生成 Source Map

 {
   "compilerOptions": {
     "outDir": "./dist",
     "sourceMap": true
   },
   "include": ["src/**/*"]
 }

使用 tsc 編譯一下，生成 JS 代碼：dist/index.js，建立調試配置，入口文件爲 dist/index.js

 {
   "type": "node",
   "request": "launch",
   "name": "Launch Program",
   "program": "${workspaceFolder}/dist/index.js",
   "skipFiles": ["<node_internals>/**"]
 }

而後打斷點，啓動調試，瀏覽器訪問 http://localhost:3000，便可看到調試進入了 TS 文件

遠程調試

當咱們須要在真實的服務器等遠程運行環境調試 Node.js 時，咱們能夠利用上面提到的方式，在服務器上開啓 Node.js 調試功能，並在本地鏈接上遠程的調試端口進行調試。

VS Code 默認支持遠程調試，咱們須要 launch.json 配置文件中指定遠程服務的 IP 地址以及端口，以下所示：

 {
   "type": "node",
   "request": "attach",
   "name": "遠程調試",
   "address": "IP 地址",
   "port": "9229"
 }

VS Code 會自動加載遠程的文件，展現爲只讀代碼供調試使用。

若是想要在調試的過程當中編輯源代碼，或者更好的調試體驗，能夠在遠程文件夾和本地項目之間設置一個映射。VS Code 提供了 localRoot 和 remoteRoot 屬性來映射本地 VS Code 項目和（遠程）Node.js 文件夾：

 {
   "type": "node",
   "request": "attach",
   "name": "遠程調試",
   "address": "IP 地址",
   "port": "9229",
   "localRoot": "${workspaceFolder}/src",
   "remoteRoot": "/var/user/"
 }

在創建映射關係後，便可在本地項目進行斷點調試，遠程的斷點信息會同步到本地項目，使用起來十分方便。

子進程調試

與普通進程調試原理一致，子進程調試時也須要傳入 --inspect 參數，這一點須要特別注意，不然沒法啓動子進程調試。

以下經過子進程啓動 Server 的例子：

 // fork.js 文件
 const { spawn } = require("child_process");
 
 const sp = spawn("node", ["./fork_server.js"]);
 
 console.log("父進程 PID", sp.pid);
 
 sp.stdout.on("data", (data) => {
   console.log(`stdout: ${data}`);
 });
 
 sp.stderr.on("data", (data) => {
   console.error(`stderr: ${data}`);
 });

若是直接使用 node --inspect 啓動主進程的話，會發現只顯示了主進程的調試端口，這就是由於咱們在程序中啓動子進程時沒有傳遞 --inspect 選項致使的。

這裏咱們在啓動進程時添加上 --inspect 參數，同時注意要指定一個默認 9229 端口以外的端口號，避免調試端口衝突

 - const sp = spawn("node", ["./fork_server.js"]);
 + const sp = spawn("node", ["--inspect=9230", "./fork_server.js"]);

再次啓動，就能看到兩個調試信息輸出了

固然，怎麼能少得了強大的 VS Code 呢。VS Code 的 Node 調試器提供了一種機制，能夠追蹤全部子進程，並在調試模式下，自動連接進程。能夠經過 autoAttachChildProcesses 屬性開啓此機制：

 {
   "type": "node",
   "request": "launch",
   "name": "啓動程序",
   "program": "${workspaceFolder}/fork.js",
   "autoAttachChildProcesses": true
 }

啓動後，便可對父進程，或子進程進行斷點調試，效果以下

結語

你們有什麼要說的，歡迎在評論區留言

對了，小編爲你們準備了一套2020最新的web前端資料，須要點擊下方連接獲取方式

一、點贊+評論（勾選「同時轉發」）

學習前端，你掌握這些。二線也能輕鬆拿8K以上

參考文獻

Debugging - Getting Started | Node.js

Debug Node.js Apps using Visual Studio Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。