VSCode launch.json配置詳解

以下為vscode 的node.js debugger 的 `launch.json` 配置詳情:

啟動配置必須設(shè)定請求類型聊记，屬性request 降盹，分為launch(啟動) 和 attach(附加)兩種 ,看下面例子：

{
    "version": "0.2.0",
    "configurations": [
        {
          ...
            "request": "launch", //請求類型為啟動

        },
        {
        ...
            "request": "attach"首懈， //請求類型為附加

        }
    ]
}

下面是`launch` 和 `attach` 類型共有的屬性：

protocol 設(shè)置調(diào)試協(xié)議
auto 嘗試自動檢測目標(biāo)運(yùn)行時使用的協(xié)議
inspector 新的V8調(diào)試器協(xié)議骚揍，解決遺留版本的多數(shù)問題宏榕，node versions >= 6.3 and Electron versions >= 1.7.4.
legacy 原始的v8調(diào)試器協(xié)議治力，node versions < v8.0 and Electron versions < 1.7.4.
port調(diào)試使用的端口
address TCP/IP地址眶熬，用于遠(yuǎn)程調(diào)試
localRoot 遠(yuǎn)程調(diào)試時映射的本地地址
remoteRoot 遠(yuǎn)程調(diào)試時的遠(yuǎn)程目錄地址
sourceMaps 默認(rèn)為true
outFiles 當(dāng)map文件不在js文件同目錄時用于指定 sourceMaps的位置
restart 自動重啟調(diào)試
timeout 配置自動附加的超時時間
stopOnEntry 自動斷點(diǎn)到第一行代碼處
smartStep 自動跳過未映射到源代碼的代碼
skipFiles :[]String,指定跳過單步調(diào)試的代碼

 "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",  //跳過node_modules
    "${workspaceFolder}/lib/**/*.js",//跳過lib
    "<node_internals>/**/*.js"http://跳過node核心模塊
  ]

trace啟用診斷輸出

以下是特定于類型 `launch`(啟動)的配置屬性：

program 指定調(diào)試入口文件地址
args :[]String 傳遞給程序的參數(shù),可在process.argv拿到
cwd 指定程序啟動調(diào)試的目錄 ,當(dāng)vscode啟動目錄不是項目根目錄妹笆，并且調(diào)試npm script時非常有用
runtimeExecutable 設(shè)置運(yùn)行時可執(zhí)行文件路徑，默認(rèn)是node
可以是其他的執(zhí)行程序娜氏，如npm拳缠、nodemon
runtimeArgs 傳遞給運(yùn)行時可執(zhí)行文件的參數(shù),例如：

        {
            "type": "node",
            "request": "launch",
            "name": "npm launch app",
            "args":["a"],
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "app",
                "b"
            ],
            "port": 6666
        }

打印參數(shù)可以發(fā)現(xiàn) args 、runtimeArgs都會傳給程序贸弥，但是runtimeArgs參數(shù)會緊跟可執(zhí)行文件

image.png

runtimeVersion 設(shè)置運(yùn)行時可執(zhí)行程序的版本窟坐，如果使用nvm，可以切換node.js版本
env 添加額外的環(huán)境變量
envFile 文件加載環(huán)境變量
console 配置終端可以是外部終端或者內(nèi)部集成終端绵疲，默認(rèn)值internalConsole
outputCapture -如果設(shè)置為std哲鸳，則進(jìn)程stdout / stderr的輸出將顯示在調(diào)試控制臺中，而不是偵聽調(diào)試端口上的輸出盔憨。這對于直接寫入stdout / stderr流而不是使用console.*API的程序或日志庫很有用徙菠。
autoAttachChildProcesses 跟蹤調(diào)試對象的所有子過程，并自動附加到在調(diào)試模式下啟動的子過程

以下是特定于類型 `attach`(附加)的配置屬性：

processId 指定nodejs進(jìn)程id,由于每次啟動都會變郁岩，傳入"${command:PickProcess}"

questions：

1. 如果使用了符號鏈接怎么調(diào)試婿奔？

傳遞參數(shù):

{
  "runtimeArgs": ["--preserve-symlinks"]
}

如果主腳本也在符號鏈接路徑里面，需要再傳遞一個參數(shù)"--preserve-symlinks-main"问慎，支持的版本是 Node 10+.

2. 如何調(diào)試ECMAScript模塊萍摊？

如果使用esm或傳遞--experimental-modules給Node.js以便使用ECMAScript模塊，則可以傳遞這些選項通過runtimeArgs屬性：

"runtimeArgs" : ["--experimental-modules"] -使用Node v8.5.0 +中的實驗性ECMAScript模塊支持
"runtimeArgs" : ["-r", "esm"] -使用esm ES模塊加載器（請注意如叼，["-r esm"]如果沒有逗號冰木，則無法使用）

vsCode launch 模式調(diào)試web應(yīng)用

正常啟動前端項目
配置 launch.json：

url: 前端項目運(yùn)行的url地址
webRoot: 指定 Web 服務(wù)器根的工作區(qū)絕對路徑，對于Monorepo項目需要如下配置路徑笼恰。

點(diǎn)擊運(yùn)行和調(diào)試踊沸，啟動debugger。

{
  // 使用 IntelliSense 了解相關(guān)屬性挖腰。 
  // 懸停以查看現(xiàn)有屬性的描述雕沿。
  // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "針對 localhost 啟動 Chrome",
      "url": "http://localhost:8848",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      "webRoot": "${workspaceFolder}/packages/xxx/src"
    }
  ]
}

VSCode launch.json配置詳解

以下為vscode 的node.js debugger 的 launch.json 配置詳情:

下面是launch 和 attach 類型共有的屬性：

以下是特定于類型 launch(啟動)的配置屬性：

以下是特定于類型 attach(附加)的配置屬性：