VS Code 調試 Node.js 代碼

做爲前端開發者，在平常工做過程當中，咱們已經習慣了使用 Chrome 等瀏覽器去調試代碼。可是隨着目前前端工做流愈來愈複雜，距離咱們的代碼運行在瀏覽器以前，會在本地進行一套複雜的構建過程，一般是運行在 Node 環境下的 JS 代碼。若是這一過程出現了問題，咱們須要找到必定的辦法去調試代碼，查找問題。另外當你去研究各類前端工具代碼庫如 Webpack Vue-CLI 的時候，代碼的斷點調試一般是源碼閱讀的一大利器。

今天就介紹下，在 VS Code 中怎麼調試 Node.js 代碼。首先要說明的是，能實現 Node.js 的調試是 Node 提供的底層支持^[1]。當 Node.js 開啓調試模式的時候，咱們能夠經過 websocket 鏈接和 Node 進程通訊，從而控制 Node.js 的執行過程，同時也可以獲取程序執行中的各類信息，咱們平時最經常使用的就是窺探代碼執行過程當中調用堆棧和各類變量的信息。這種通訊方式也是基於 V8 Inspector Protocol 。另外要說明的是，Node.js 代碼的調試方式有不少種，而 VS Code 給咱們提供了一個可視化的界面，爲咱們調試 Node.js 提供了極大的方便，和咱們在 Chrome 中調試源代碼的體驗幾乎同樣。

想要調試 Node.js 代碼，有兩個工做。

1. Node.js 開啓調試模式，指定調試端口；
2. 讓 VS Code 與調試端口鏈接；

接下來用具體例子介紹下怎麼完成這兩個步驟。

調試 build-w.js 代碼

真正啓用調試的過程很簡單，咱們會經過示例項目 ts-hello 去介紹。這個項目中是一段 TS 示例代碼。build-w.js 的工做是使用 webpack 編譯打包 TS 代碼。build-w.js 會接收一個參數去控制編譯工做是要使用 ts-loader 仍是 babel-loader。

而後咱們會去調試這段代碼，看下咱們傳遞的參數是否被成功接收到。

【步驟一】：你須要啓動執行你的 build-w.js 代碼，而且開啓調試。你只須要在命令行裏執行 node --inspect-brk build/build-w.js --loader ts-loader。其中 --inspect-brk 參數就是告訴 Node.js 啓用調試，同時會在代碼的開始處等待調試命令去繼續執行，而且使用本機 9229端口啓用 websocket 接收控制消息。更多和啓用調試相關的參數參考文檔。

【步驟二】：咱們須要讓 VS Code 可以和 Node.js 的 websocket 鏈接起來。此時能夠在 VS Code 裏使用 Shift + Command + P 搜索命令 Debug，你會看到:

選擇 Attach to Node Process 以後會看到正在執行的 Node 進程。選擇咱們剛纔執行的 Node 進程。

以後 VS Code 就會進入調試模式，就和咱們在 Chrome 中調試幾乎同樣了。

繼續執行的話就會看到，咱們傳入的參數被正確解析了。

launch.json

上面是咱們先運行的 Node.js 程序，而後使用 VS Code 去鏈接 Node 進程。實際上這兩步能夠並做一步都交給 VS Code 去作。操做以下圖：

你只須要添加一個 launch.json 文件，而後在 VS Code 中啓用調試便可。其中 program 字段指定了程序運行的入口。args 字段指定了程序的參數。skipFiles 指定了咱們要跳過 Node 內部代碼。在 launch.json 文件內咱們能夠進行更多的配置，詳細的配置項能夠參考官方文檔。

這裏須要注意的是：你須要在代碼中先標記一個斷點，不然代碼是直接運行不會停下來的（前面的例子是由於咱們傳遞了 --inspect-brk 參數）。

調試 webpack 程序

若是咱們想要去調試 webpack 命令行工具的執行過程。好比咱們 npm-scripts 的配置以下：

{
  "scripts": {
    "rollup-t": "node build/build-r.js --ts",
    "rollup-b": "node build/build-r.js",
    "webpack-b": "node build/build-w.js",
    "webpack-t": "node build/build-w.js --loader 'ts-loader'",
    "debug": "webpack --config webpack.config.js"
  }
}
複製代碼

針對 "debug": "webpack --config webpack.config.js"，咱們應該怎麼指定程序入口，開啓調試呢？

這時候要清楚，這裏的 webpack 命令，實際的可執行文件是在 node_modules/.bin 文件夾下^[2]。所以，這裏咱們的 launch.json 文件的配置應該以下。注意其中 program 字段指定的入口文件位置。

{
  "version": "0.2.0",
  "configurations": [
    {
     "type": "node",
      "request": "launch",
      "name": "啓動程序",
      "program": "${workspaceFolder}/node_modules/.bin/webpack",
      "args": ["--config", "webpack.config.js"],
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}
複製代碼

同時，由於 .bin 文件夾下的文件都是軟連接，你應該在源文件中去打斷點。webpack 可執行文件的源文件路徑爲：node_modules/webpack/bin/webpack.js。這個路徑是 webpack 項目中的 package.json bin 指定的。你也能夠經過 ls -l node_modules/.bin/webpack 命令看到該軟連接的源文件地址:

> ls -l node_modules/.bin/webpack
lrwxr-xr-x  1 didi-feng  staff  25 11 29 01:30 node_modules/.bin/webpack -> ../webpack/bin/webpack.js
複製代碼

調試 npm 程序

還有一種狀況，當咱們使用 npm run debug 的時候，在執行到咱們 "debug": "webpack --config webpack.config.js" 中指定的 webpack 代碼前，npm 會作一些初始化操做，好比將全部的的 npm 配置項添加到環境變量中^[3]。所以若是代碼中使用到了 npm 配置項，好比 process.env.npm_package_version ，那前面的操做是不知足的，由於你 program 指定的入口是 webpack 。因此咱們須要程序從 npm 命令開始執行。那麼 launch.json 的配置應該爲：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug"
      ],
      "port": 9229,
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}
複製代碼

這裏 runtimeExecutable 字段指定的是，npm 命令。其實這裏能夠指定任何你係統中的可執行命令。runtimeArgs 字段指定的是傳遞給 npm 命令的參數。

另外你的 npm-scripts-debug 命令配置應該改成 "debug": "node --inspect-brk node_modules/.bin/webpack --config webpack.config.js"。也就是說，當 npm 命令執行到咱們配置的 webpack 代碼時，須要 Node.js 開啓調試。

前面咱們是經過指定 program 字段指定 Node.js 入口文件，VS Code 在運行入口文件的時候會自動開啓調試。可是目前咱們的啓動入口是 npm 命令，npm 運行後可能會運行不少 Node.js 程序，至於你但願調試哪些 Node.js 程序，須要你本身指定哪些 Node.js 進程須要開啓調試。同時 launch.json 中指定的 port 端口號，要和 Node.js 調試端口號對應。（--inspect-brk 默認指定的端口號就是 9229。）

最後

以上基本能知足咱們平時調試 Node.js 代碼的需求。但這裏介紹的還不是 VS Code 調試的全部能力。

更多和 VS Code 調試相關的技巧能夠查看官方文檔。

若是有問題，能夠在評論中留言。