之前在小組中的一個分享初肉，在這里記錄下~
問題：使用launch.json 啟動調(diào)試失敗
launch.json文件如下：
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Egg",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"windows": { "runtimeExecutable": "npm.cmd" },
"runtimeArgs": [ "run", "debug"],
"console": "integratedTerminal",
"protocol": "auto",
"restart": true,
"port": 9229,
"autoAttachChildProcesses": true
}
]
}
"script": {
"debug": "era-cloud debug --env local",
}
了解一下 Visual Studio Code Node Debug & launch.json 配置
知識點1：VsCode debug :
VsCode代碼編輯器為Node.js運行時提供了內(nèi)置的調(diào)試支持。vs code nodejs-debugging
NodeJS 給我們提供了 Debugger 模塊宁玫，內(nèi)建客戶端，通過 TCP 將命令行的輸入傳送到內(nèi)建模塊以達到調(diào)試的目的。
在VSCode中有三種方式調(diào)試方式：
1轩娶、 在內(nèi)置的終端中使用 auto attach的方式
2、 直接使用debug 面板
3框往、 使用launch.json配置文件調(diào)試： 常用鳄抒， 配置項全，適合復雜項目。
知識點2： Launch.json配置
launch.json存放在.vscode文件夾下许溅。全部的設置項 https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md
核心是 runtimeExecutable 使用的命令瓤鼻，以及 runtimeArgs 參數(shù)，這里不需要 --inspect 了（IDE內(nèi)部會處理）
-
必選字段
type：調(diào)試器類型贤重。這里是 node(內(nèi)置的調(diào)試器)茬祷，如果裝了 Go 和 PHP 的擴展后對應的 type 分別為 go 和 php request：請求的類型，目前只支持 launch 和 attach并蝗。launch 就是以 debug 模式啟動調(diào)試祭犯；attach 就是附加到已經(jīng)啟動的進程開啟 debug 模式并調(diào)試 name：下拉菜單顯示的名字
request 字段，有兩個值可以選擇：launch 和 attach 借卧， 它表示VS Code中核心的兩種調(diào)試模式盹憎。
launch 指的是直接由編輯器啟動（直接 fork 一個進程）；而 attach 表示服務已經(jīng)啟動铐刘，我們是 attach 到原來那個進程中陪每，比如上面的 Chrome 調(diào)試。然后打上斷點镰吵，執(zhí)行就行了檩禾。
-
可選字段
program：可執(zhí)行文件或者調(diào)試器要運行的文件 (launch) runtimeArgs：要傳遞給調(diào)試程序的參數(shù) (launch) env：環(huán)境變量 (launch) cwd：當前執(zhí)行目錄 (launch) address：ip 地址 (launch & attach) port：端口號 (launch & attach) skipFiles：想要忽略的文件，數(shù)組類型 (launch & attach), 比如想繞過對node_modules中文件的調(diào)試 //"${workspaceRoot}/node_modules/**/*.js", processId：進程 PID (attach) runtimeVersion: 使用nvm 時 指定版本 eg: 10.19.0 restart：設置為 true疤祭，修改代碼保存后會自動重啟調(diào)試 runtimeExecutable：用什么命令執(zhí)行 app.js盼产，可以為 nodemon，默認是 node console：當點擊停止按鈕或者修改代碼保存后自動重啟調(diào)試勺馆，而 nodemon 是仍然在運行的戏售，通過設置為 console 為 integratedTerminal 可以解決這個問題。 -
目錄變量
${workspaceRoot}：當前打開工程的路徑 ${file}：當前打開文件的路徑 ${fileBasename}：當前打開文件的名字草穆，包含后綴名 ${fileDirname}：當前打開文件所在的文件夾的路徑 ${fileExtname}：當前打開文件的后綴名 ${cwd}：當前執(zhí)行目錄
知識點3：Node.js 調(diào)試技巧
1灌灾、expression ：表達式為true時 調(diào)試
2、Hit count: 命中次數(shù)
知識點4： inspector 調(diào)試的一點原理
1锋喜、通過給 node 增加 --inspect 參數(shù)會開啟調(diào)試模式，這個模式下豌鸡，還會開放一個默認的 9229 端口嘿般，允許其他 IDE 接入。
這個模式下涯冠，會輸出下面的信息：
Debugger listening on ws://127.0.0.1:9229/d598ab05-88e8-433f-b641-bf2766da97f5
For help, see: https://nodejs.org/en/docs/inspector
ws://127.0.0.1:9229/d598ab05-88e8-433f-b641-bf2766da97f5 是暴露的調(diào)試鏈接炉奴，里面包含了協(xié)議、host功偿、端口和一個唯一的 uuid盆佣。這是一個標準 v8 調(diào)試協(xié)議往堡。
2、但是 僅僅開啟調(diào)試還是不夠的共耍，調(diào)試器還沒有接收到足夠的信息虑灰，或者說沒有一個展現(xiàn)調(diào)試的地方。node 還提供了另一個會卡住的調(diào)試命令痹兜。--inspect-brk 會停在代碼的第一行穆咐，等待下一步的指示：
3、可以通過命令執(zhí)行下一步等調(diào)試操作字旭， 也可以通過支持 v8調(diào)試協(xié)議的 UI对湃。
有許多種方法可以作為 UI，而最簡單的就是我們電腦上一般都會有的 Chrome 瀏覽器遗淳。
Chrome 自帶了一個調(diào)試頁 chrome://inspect/ 拍柒，打開后，如果是在本機屈暗，會直接列出可調(diào)式的端口和文件地址（如果在遠程拆讯，也可以配置 ip）。
點擊inspect 就可以調(diào)試了养叛。 4种呐、在 Chrome UI 打開的時候，控制臺會輸出一句話弃甥。
這的意識是表明這個調(diào)試協(xié)議已經(jīng)連上了 node 開啟的調(diào)試端口爽室；所以整個調(diào)試分為兩個部分：
“開啟 node 調(diào)試端口” + “符合 v8調(diào)試協(xié)議的調(diào)試器 attach 到調(diào)試端口”
5、除了使用Chrome調(diào)試淆攻，也可以使用VSCode, vscode集成了調(diào)試的 UI,本質(zhì)和最基本的一樣阔墩，開啟調(diào)試端口，連接調(diào)試端口瓶珊。只是 VSCode 本身是個編輯器戈擒，可以直接在其之上打斷點，集成度更高;使用方式 就是配置一個上面提到的 launch.json（等價于啟動命令）艰毒。
總結(jié)： 所有的調(diào)試的原理都是一樣的，藉由 Node.js 原生的打開調(diào)試端口的能力搜囱，不同的 IDE 才能連接到該端口丑瞧，進而做出更加強大的能力。
比如 VSCode 不僅僅能做傳統(tǒng)的調(diào)試蜀肘，也能增加配置绊汹，在執(zhí)行調(diào)試前后增加鉤子，執(zhí)行自己的命令扮宠，這都是擴展能力的體現(xiàn)西乖。
由上面的基礎(chǔ)知識狐榔， 可以看到 上面JSON的意思是node --inspect-brk=DEBUG_PORT run debug
即執(zhí)行 'era-cloud debug --env local'， debug方式調(diào)試啟動已過時获雕； era-cloud命令中 可以使用run 命令
解決辦法：
更換debug 調(diào)試方式為 inspector方式： era-cloud run --env local --port 7070
參考文檔：
各種VSCode 調(diào)試demo
寫 Node.js 代碼薄腻，從學會調(diào)試開始
hi~ 點贊沒
