vscode 學習筆記 —— 調試 (以 node 爲例)

時間 2019-12-19

標籤 vscode 學習筆記調試 node 爲例简体版

原文原文鏈接

1、創建配置文件

一、選擇你的項目

二、選擇你項目的語言

三、當前項目路徑下生成 `.vscode/launch.json`

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/test.js"
        }
    ]
}

type - 用於此啓動配置的調試器類型。每一個安裝的調試擴展都會引入一種類型，例如，node 內置節點調試器，php 以及 goPHP 和 Go 擴展。php

request - 此啓動配置的請求類型。目前支持的是 launch 和 attach。( request 的詳解見下面的第三章)node

name - 友好名稱，顯示在「調試啓動配置」下拉列表中。json

program - 啓動調試器時要運行的可執行文件或文件編輯器

args - 傳遞給程序進行調試的參數spa

env- 環境變量（該值 null 可用於「取消定義」變量）debug

cwd - 當前工做目錄，用於查找依賴項和其餘文件3d

注1：${workspaceFolder} 表示工做空間文件夾的根路徑，${file} 表示活動編輯器中打開的文件。調試

注2：」program": "${workspaceFolder}/test.js」，我不太清楚 vscode 是怎麼識別我想要調試當前目錄下的 /test.js。[待解決]code

注3：還能夠把配置文件寫進 User Settings 成爲全局配置。orm

四、快速回到你的配置文件

2、打斷點

一、Breakpoint (傳統斷點)

（1）圖形用圓形代替
（2）不能夠打在空行上

二、Logpoint

（1）能夠在 debug console 裏打印出信息（用 {} 包裹表達式）
（2）圖形用菱形代替
（3）若是不打在語句上，而是空行，則調試執行的時候，會消失，但不影響效果。因此仍是推薦打在語句上！

三、Conditional Breakpoint

分兩種條件：表達式 / 命中數

（1）能夠在符合條件時中斷到離此斷點下方最近的一條語句上
（2）圖形用正方形代替
（3）若是不打在語句上，而是空行，則調試執行的時候，會消失，但不影響效果

3、調試

第一章提到的 launch.json 配置文件裏有 request 字段，取值範圍爲：launch 和 attach

launch：vscod e獨立自主的跑起一個調試進程

attach：你經過 node --inspect-brk xxx.js 自行啓動調試，而後 vscode 再去 attach 它

下面就分這兩類來講說具體調試方式的區別：

一、launch 方式

（1）點擊 `Launch Program`

（2）選擇啓動哪一個配置文件

注：launch.json 配置文件中 name 屬性的值會顯示在這個下拉列表中。

（3）開始調試

二、attach 方式

（1）把 `Auto Attach：On` 打開

（2）以調試的方式啓動 node

node --inspect-brk test.js

（3）開始調試

4、調試相關功能

一、DEBUG CONSOLE

能夠在此操做變量

5、多目標調試

需求：同時調試 server.js 和 client.js

一、創建配置文件

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Server",
            "program": "${workspaceFolder}/server.js",
            "cwd": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Client",
            "program": "${workspaceFolder}/client.js",
            "cwd": "${workspaceFolder}"
        }
    ],
    "compounds": [
        {
            "name": "Server/Client",
            "configurations": ["Server", "Client"]
        }
    ]
}