nodejs各類姿式斷點調試

nodejs開啓debug模式經過傳遞參數 --inspect 或 --inspect-brk,調試方法分爲IDE和chrome devtools兩種，下面就具體講解這兩種方式如何調試node程序；

part1:VS Code調試：

1、launch.json 配置

配置詳解看另外一篇：VSCode launch.json配置詳解

1 nodejs調試:

1.1 點擊添加配置文件

咱們看到 .vscode/launch.json的configurations.program屬性爲 "${workspaceFolder}/express-app.js",表示調試的入口文件，其中 workspaceFolder是vscode資源管理器的根目錄

1.2 啓動調試

點擊綠色箭頭，啓動調試

2. 調試npm scripts

在實際項目中，命令基本上都是放到了npm scritps中 ps:注意調試npm scripts時參數--inspect必須指定端口

2.1 添加npm scripts

{
  ...
  "scripts": {
    ...
    "debug": "node --inspect-brk=6666 index.js"
  },
  ...
}
複製代碼

6666是任意指定的調試端口號。

2.2 修改vscode調試配置

打開 .vscode/launch.json 刪除program屬性 增長如下3個配置項，runtimeExecutable，runtimeArgs，port。

{
    ...
    "configurations": [
        {
            ...
            "runtimeExecutable": "npm", //默認是node,這裏改爲npm
            "runtimeArgs": [
                "run-script",//別名 run
                "debug"//對應上npm scripts上的debug
            ],
            "port": 6666 //調試端口
        }
    ]
}
複製代碼

2.3 啓動調試

啓動調試方法同上

3. 調試非node命令

3.1 node_modules/.bin

npm run會自動添加node_module/.bin 到當前命令所用的PATH變量中，例如：

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}
複製代碼

運行npm run build其實是調用 node_modules/.bin/webpack 而運行node_modules/.bin/webpack實際上會根據當前shell環境調用對應腳本，查看能夠發現有3個同名不一樣後綴名的腳本： webpack(標註了可執行程序sh) 、 webpack.cmd 、webpack.ps1 例如在cmd命令行工具下會調用 webpack.cmd腳本,查看代碼能夠發現內部其實是調用命令：

node ./node_modules/webpack/bin/webpack.js
複製代碼

3.2 不能直接加 --inspect-brk

這種狀況下，直接加--inspect-brk=6666是不行的 如下配置，會自動執行npm run debug，但不會進入斷點。

{
  ...
  "scripts": {
    "debug": "webpack --inspect-brk=6666"
  },
  ...
}
複製代碼

3.3 轉換成node調用

修改npm scripts:

{
  ...
  "scripts": {
    "debug": "node --inspect-brk=6666 ./node_modules/webpack/bin/webpack.js"
  },
  ...
}
複製代碼

啓動成功！

3.4 stopOnEntry

設置 configurations.stopOnEntry=true，啓動調試後，斷點能夠自動停在第一行代碼上

2、attach 附加到node.js

1. Auto Attach 自動附加無需配置，快速開始調試

打開用戶設置，修改"debug.node.autoAttach": "on"，開啓自動附加

vscode集成終端輸入 node --inspect-brk index.js 自動進入vscode的debug模式；

2. 設置「附加」配置

跟自動附加相比，能夠顯式配置各類調試配置選項，示例配置以下：

{
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command:PickProcess}"
          },
複製代碼

啓動步驟：

1.命令行以debug模式運行nodejs程序

node --inspect-brk index.js
複製代碼

2.選擇並運行附加配置

3. 選擇要附加的進程 ，開啓調試

part2: Chrome DevTools調試:

Chrome DevTools是nodejs天生支持的調試方式，使用步驟：

1.命令行以debug模式運行nodejs程序

node --inspect-brk index.js
複製代碼

2.打開谷歌瀏覽器，訪問chrome://inspect/#devices，能夠看到當前瀏覽器監聽的全部inspect 3.點擊下圖紅框內的超連接，會打開Chrome DevTools面板，就能夠使用他的各類功能

vscode遠程調試插件:Remote Development