使用 VSCode 調試 Koa 或者 Express 項目

前言

日常調試 node 打 log 打習慣了，忽然發現一個問題就是打印對象的時候，尤爲這個對象裏面有不少屬性的時候，在終端上得一直往上拉才能看到，所以打算使用 vscode 來打斷點調試程序。

安裝

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

1. 下載飛冰
2. 打開飛冰，使用ICE Design Pro模板並點擊 添加koa2，以下

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

1. 打開終端，運行npm run client 這個時候前端項目就運行起來了。
2. 稍微修改一下前端的代碼，由於這個模板默認是使用前端直接返回數據，而不去請求接口，打開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 打了個斷點：
啓動調試，以下：

vscode 集成終端打印以下：

在前端頁面點擊登陸，會跳到這裏：

咱們就能看到變量的信息啦😄（注意：若是此時終止了調試，nodemon 仍是會運行，得在集成終端終止）