前言
平常調試 node 打 log 打習慣了，突然發現一個問題就是打印對象的時候，尤其這個對象里面有很多屬性的時候，在終端上得一直往上拉才能看到，因此打算使用 vscode 來打斷點調試程序。
安裝
這里的例子是使用 koa ，express 類似。我是使用阿里巴巴的飛冰快速搭建一個后臺和前臺的項目。
- 下載飛冰
-
打開飛冰，使用ICE Design Pro模板并點擊 添加koa2，如下
image -
自動安裝完成后，使用 vscode 打開項目：
image - 打開終端，運行
npm run client這個時候前端項目就運行起來了。 - 稍微修改一下前端的代碼，因為這個模板默認是使用前端直接返回數據，而不去請求接口，打開
client/pages/UserLogin/actions.js,將import {login} from '../../api/user';改為import {login} from '../../api/index';就可以了。最后打開頁面，地址終端里面有說明。
編寫launch.json
VsCode左側第四個按鈕是調試按鈕，默認是『沒有配置』。點擊右側的齒輪狀圖標，選擇Node.js 會在項目根目錄下創建 .vscode 的文件夾及 launch.json 文件。launch.json 內容如下：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程序",
"program": "${workspaceFolder}/server/index.js"
}
]
}
默認會訪問server下的 index.js 文件，但是這個項目的入口文件是 app.js，因此需要將index.js改為app.js。
在launch.json中會使用到一些預定變量，這里說明一下：
-
${workspaceRoot}：VSCode中打開文件夾的路徑 -
${workspaceRootFolderName}：VSCode中打開文件夾的路徑, 但不包含"/" -
${file}：當前打開的文件 -
${fileBasename}： 當前打開文件的文件名, 不含擴展名 -
${fileDirname}： 當前打開文件的目錄名 -
${fileExtname}當前打開文件的擴展名 -
${cwd}：當前執行目錄
當我們在單步調試程序的時候，會進入node_modules里面，通常情況下我們并不需要去關心里面的邏輯實現，只關心項目本身的代碼。在這個時候，我們就需要使用skipFiles：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "啟動程序",
"program": "${workspaceFolder}/server/app.js",
"skipFiles": [
"${workspaceRoot}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
}]
}
我們還想要自動重啟的功能，安裝 nodemon 或者 node-dev：
// 任選其一
npm i nodemon -g
npm i node-dev -g
修改lanuch.json：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "啟動程序",
"program": "${workspaceFolder}/server/app.js",
"runtimeExecutable": "nodemon", // 或者 node-dev
"restart": true,
"console": "integratedTerminal",
"skipFiles": [
"${workspaceRoot}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
}]
}
這里新增了三個字段，分別是：
- runtimeExecutable：用什么命令執行 app.js，這里設置為 nodemon，默認是 node
- restart：在終止 Node.js 后重啟會話
- console：啟動調試目標的位置，這里選擇在 vscode 的集成終端輸出信息
調試
這里在 server/controller/user.js 的 login 打了個斷點：
image
image
vscode 集成終端打印如下：
image
在前端頁面點擊登錄，會跳到這里：
image
我們就能看到變量的信息啦??（注意：如果此時終止了調試，nodemon 還是會運行，得在集成終端終止）
