前置條件
- 首先執(zhí)行如下命令將項(xiàng)目克隆到本地
git clone https://github.com/jessun1990/VSCode-debug-nodejs
VSCode 安裝擴(kuò)展
debugger-for-chrome安裝依賴
# 進(jìn)入項(xiàng)目目錄
yarn install
# or
npm insatll
VSCode 調(diào)試方案
方案一：啟動一個獨(dú)立的無插件的 chrome 以調(diào)試 client
在終端中運(yùn)行
yarn run clientornpm run client吸占，保證 web server 運(yùn)行总寒，能夠訪問http://127.0.0.1:8091/(whatever)下內(nèi)容。VSCode 編輯器進(jìn)入 Debug 的界面，調(diào)試配置選擇
啟動一個獨(dú)立的 Chrome 以調(diào)試 client這個選項(xiàng)重父。
如果是第一次運(yùn)行調(diào)試挤牛，且項(xiàng)目目錄下
.vscode/launch.json文件沒有相應(yīng)配置泥张，debugger-for-chrome插件會自動生成相應(yīng)的 JSON 配置選項(xiàng)呵恢。
- 能夠正確 debug 后（可以打duan dai n），會有一個無插件模式的 chrome 來啟動媚创，并且訪問
http://localhost:8091/client/index.html和相應(yīng)的 Js 文件渗钉。
8091 端口必須在 web sever 中開啟訪問，同時(shí)在
launch.json文件的設(shè)置選項(xiàng)中設(shè)置："file": "${workspaceFolder}/client/index.html"钞钙。
此時(shí)是沒有 web server 服務(wù)的鳄橘。
.vscode/launch.json 中的內(nèi)容
{
"type": "chrome",
"request": "launch",
"name": "啟動一個獨(dú)立的 Chrome 以調(diào)試 client",
// "url": "http://localhost:8091/client/index.html",
"webRoot": "${workspaceRoot}",
"file": "${workspaceFolder}/client/index.html",
"sourceMaps": true
}
方案二：監(jiān)聽一個已經(jīng)啟動調(diào)試模式的 Chrome 以調(diào)試 client （推薦）
- 在終端中運(yùn)行：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# 或者
/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary --remote-debugging-port=9222
確保 Google Chrome / Google Chrome Canary 事先沒有啟動，如果已經(jīng)啟動芒炼，可能無效瘫怜。
- 在終端中運(yùn)行：
yarn run client
此時(shí)應(yīng)該可以使用上述的瀏覽器訪問 http://127.0.0.1:8091/
VSCode 編輯器進(jìn)入 Debug 的界面，調(diào)試配置選擇
監(jiān)聽一個已經(jīng)啟動調(diào)試模式的 Chrome這個選項(xiàng)本刽。能夠正確 debug 后（可以打斷點(diǎn)）鲸湃，會出現(xiàn)一個選擇框來選擇 tab 來調(diào)試，選擇地址為
http://127.0.0.1:8091/client/index.html瀏覽器中在
http://127.0.0.1:8091/client/index.html地址下刷新子寓。在 VSCode 編輯器中進(jìn)行編輯和調(diào)試 JS 文件暗挑。
.vscode/launch.json 中的內(nèi)容
{
"type": "chrome",
"request": "attach",
"name": "監(jiān)聽一個已經(jīng)啟動調(diào)試模式的 Chrome",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
}
方案三：啟動調(diào)試 Node 服務(wù)器以調(diào)試 server
VSCode 編輯器打開
./server/app.js文件。進(jìn)入調(diào)試界面斜友，選擇啟動調(diào)試 Node 服務(wù)器炸裆。可以設(shè)置斷點(diǎn)。
.vscode/launch.json 中的內(nèi)容
{
"type": "node",
"request": "launch",
"name": "啟動 Node 服務(wù)器",
"program": "${workspaceRoot}/server/app.js"
}
方案四：Nodemon 啟動服務(wù)器（inspect 模式）以調(diào)試 server
- 終端中運(yùn)行：
yarn run server:inspect
訪問
http://localhost:8092鲜屏。VSCode 進(jìn)入調(diào)試模式烹看，選擇
附加于已啟動的 Node 服務(wù)器（insepect 模式）。終端中顯示Debugger attached信息洛史。在 VSCode 編輯中加斷點(diǎn)（或者在 Chrome 瀏覽器的 DevTools 中加斷點(diǎn)）惯殊，刷新網(wǎng)頁進(jìn)行斷點(diǎn)調(diào)試。
