前言

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

安裝

這里的例子是使用 koa ，express 類似。我是使用阿里巴巴的飛冰快速搭建一個后臺和前臺的項目。

1. 下載飛冰

2. 打開飛冰，使用ICE Design Pro模板并點擊 添加koa2，如下

   
   
   image

3. 自動安裝完成后，使用 vscode 打開項目：

   
   
   image
4. 打開終端，運行npm run client 這個時候前端項目就運行起來了。
5. 稍微修改一下前端的代碼，因為這個模板默認是使用前端直接返回數(shù)據(jù)，而不去請求接口，打開client/pages/UserLogin/actions.js,將 import {login} from '../../api/user';改為 import {login} from '../../api/index';就可以了。最后打開頁面，地址終端里面有說明。

編寫launch.json

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

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請訪問: 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中會使用到一些預(yù)定變量，這里說明一下：

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

當我們在單步調(diào)試程序的時候，會進入node_modules里面，通常情況下我們并不需要去關(guān)心里面的邏輯實現(xiàn)，只關(guān)心項目本身的代碼。在這個時候，我們就需要使用skipFiles：

{
  // 使用 IntelliSense 了解相關(guān)屬性。
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請訪問: 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 了解相關(guān)屬性。
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請訪問: 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：用什么命令執(zhí)行 app.js，這里設(shè)置為 nodemon，默認是 node
• restart：在終止 Node.js 后重啟會話
• console：啟動調(diào)試目標的位置，這里選擇在 vscode 的集成終端輸出信息

調(diào)試

這里在 server/controller/user.js 的 login 打了個斷點：

image

image

image

image