前言

平常調(diào)試 node 打 log 打習(xí)慣了送粱，突然發(fā)現(xiàn)一個(gè)問(wèn)題就是打印對(duì)象的時(shí)候痢虹，尤其這個(gè)對(duì)象里面有很多屬性的時(shí)候胁勺，在終端上得一直往上拉才能看到怀愧，因此打算使用 vscode 來(lái)打斷點(diǎn)調(diào)試程序。

安裝

這里的例子是使用 koa 挫酿，express 類似构眯。我是使用阿里巴巴的飛冰快速搭建一個(gè)后臺(tái)和前臺(tái)的項(xiàng)目。

1. 下載飛冰

2. 打開(kāi)飛冰早龟，使用ICE Design Pro模板并點(diǎn)擊 添加koa2惫霸，如下

   
   
   image

3. 自動(dòng)安裝完成后，使用 vscode 打開(kāi)項(xiàng)目：

   
   
   image
4. 打開(kāi)終端葱弟，運(yùn)行npm run client 這個(gè)時(shí)候前端項(xiàng)目就運(yùn)行起來(lái)了壹店。
5. 稍微修改一下前端的代碼，因?yàn)檫@個(gè)模板默認(rèn)是使用前端直接返回?cái)?shù)據(jù)芝加，而不去請(qǐng)求接口硅卢，打開(kāi)client/pages/UserLogin/actions.js,將 import {login} from '../../api/user';改為 import {login} from '../../api/index';就可以了。最后打開(kāi)頁(yè)面，地址終端里面有說(shuō)明将塑。

編寫(xiě)launch.json

VsCode左側(cè)第四個(gè)按鈕是調(diào)試按鈕脉顿，默認(rèn)是『沒(méi)有配置』。點(diǎn)擊右側(cè)的齒輪狀圖標(biāo)抬旺，選擇Node.js 會(huì)在項(xiàng)目根目錄下創(chuàng)建 .vscode 的文件夾及 launch.json 文件弊予。launch.json 內(nèi)容如下：

{
    // 使用 IntelliSense 了解相關(guān)屬性祥楣。 
    // 懸停以查看現(xiàn)有屬性的描述开财。
    // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啟動(dòng)程序",
            "program": "${workspaceFolder}/server/index.js"
        }
    ]
}

默認(rèn)會(huì)訪問(wèn)server下的 index.js 文件误褪，但是這個(gè)項(xiàng)目的入口文件是 app.js责鳍，因此需要將index.js改為app.js。

在launch.json中會(huì)使用到一些預(yù)定變量兽间，這里說(shuō)明一下：

• ${workspaceRoot}：VSCode中打開(kāi)文件夾的路徑
• ${workspaceRootFolderName}：VSCode中打開(kāi)文件夾的路徑, 但不包含"/"
• ${file}：當(dāng)前打開(kāi)的文件
• ${fileBasename}： 當(dāng)前打開(kāi)文件的文件名, 不含擴(kuò)展名
• ${fileDirname}： 當(dāng)前打開(kāi)文件的目錄名
• ${fileExtname} 當(dāng)前打開(kāi)文件的擴(kuò)展名
• ${cwd}：當(dāng)前執(zhí)行目錄

當(dāng)我們?cè)趩尾秸{(diào)試程序的時(shí)候历葛，會(huì)進(jìn)入node_modules里面，通常情況下我們并不需要去關(guān)心里面的邏輯實(shí)現(xiàn)嘀略，只關(guān)心項(xiàng)目本身的代碼恤溶。在這個(gè)時(shí)候，我們就需要使用skipFiles：

{
  // 使用 IntelliSense 了解相關(guān)屬性帜羊。
  // 懸停以查看現(xiàn)有屬性的描述咒程。
  // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "name": "啟動(dòng)程序",
    "program": "${workspaceFolder}/server/app.js",
    "skipFiles": [
      "${workspaceRoot}/node_modules/**/*.js",
      "<node_internals>/**/*.js"
    ]
  }]
}

我們還想要自動(dòng)重啟的功能讼育，安裝 nodemon 或者 node-dev：

// 任選其一
npm i nodemon -g
npm i node-dev -g

修改lanuch.json：

{
  // 使用 IntelliSense 了解相關(guān)屬性帐姻。
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息奶段，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "name": "啟動(dòng)程序",
    "program": "${workspaceFolder}/server/app.js",
    "runtimeExecutable": "nodemon", // 或者 node-dev
    "restart": true,
    "console": "integratedTerminal",
    "skipFiles": [
      "${workspaceRoot}/node_modules/**/*.js",
      "<node_internals>/**/*.js"
    ]
  }]
}

這里新增了三個(gè)字段饥瓷，分別是：

• runtimeExecutable：用什么命令執(zhí)行 app.js，這里設(shè)置為 nodemon痹籍，默認(rèn)是 node
• restart：在終止 Node.js 后重啟會(huì)話
• console：?jiǎn)?dòng)調(diào)試目標(biāo)的位置呢铆，這里選擇在 vscode 的集成終端輸出信息

調(diào)試

這里在 server/controller/user.js 的 login 打了個(gè)斷點(diǎn)：

image

image

image

image