VsCode 各場景高級調試技巧，有用！

VsCode 自從誕生以來，以其各自優異的特性迅速走紅。尤其是對於前端開發小夥伴來說，幾乎成爲必不可少的開發工具。所以，熟練掌握 VsCode 的各自使用技巧與調試技巧會讓你的日常開發工作效率倍增。本文將會以大量圖文的方式，從下面幾個方面詳細介紹 VsCode 的各種技巧：

第一部分主要介紹 VsCode 的基本技巧，比如常用快捷鍵、輔助標尺等。熟悉此部分的可以直接跳過。
第二部分主要各種斷點（比如日誌斷點、內聯斷點、表達式斷點等等）、數據面板等等
第三部分主要講解各種項目的調試實戰，比如 Node 程序、TS 程序、Vue 程序、Electron 程序、Html 等的調試實戰
最後一部分將會講解其他有用的技巧，比如代碼片段、重構、Emmet 等等

基本技巧

快速啓動

VsCode 安裝後，會自動寫入環境變量，終端輸入code即可喚起 VsCode 應用程序。

常用快捷鍵

ctrl + p快速搜索文件並跳轉，添加:可以跳轉到指定行

ctrl + shift + p 根據您當前的上下文訪問所有可用命令。
ctrl + shift + c在外部打開終端並定位到當前項目路徑
ctrl + 按鍵1左邊的符號顯示隱藏終端面板
Ctrl+B 切換側邊欄
Ctrl+\ 快速拆分文件編輯
alt + 單機左鍵 添加多處光標
alt + shift + 單擊左鍵 同一列所有位置添加光標
alt + shift + 鼠標選擇 選擇相同開始和結束的區域

alt + 上鍵或下鍵 將當前行或者選中的區域上移 / 下移一行

垂直標尺

在配置文件中添加如下配置，可以增加字符數標尺輔助線

"editor.rulers": [40, 80, 100]
複製代碼

進階技巧

斷點的基本使用

下面以在 VsCode 中快速調試一個 Node 項目爲例，演示斷點的基本使用。後文會繼續結束各種高級斷點。

創建一個基本的 node 項目爲 Nodejs
打開左側調試面板，選擇你要調試的 node 項目名稱，添加調試配置

選擇調試的項目類型爲 Node.js

打開生成的. vscode/launch.json 文件，指定程序入口文件

program字段用於指定你的程序入口文件，${workspaceFolder}表示當前項目根路徑

在程序中添加斷點，只需要點擊左側的邊欄即可添加斷點

按F5開始調試，成功調試會有浮窗操作欄

浮窗的操作按鈕功能依次爲：

繼續 (F5)、
調試下一步 (F10)、
單步跳入 (F11)、
單步跳出 (Shift F11)、
重新調試 (Ctrl + Shift + F5)、
結束調試 (Shift + F5)

日誌斷點

日誌斷點是普通斷點的一種變體，區別在於不會中斷調試，而是可以把信息記錄到控制檯。日誌斷點對於調試無法暫停或停止的服務時特別有用。步驟如下:

添加日誌斷點的步驟

輸入要日誌斷點的信息，點擊回車添加完成

可以使用{}使用變量，比如在此處添加日誌斷點，b的值爲${b}

日誌斷點添加成功後會有是一個菱形圖標

按F5運行查看調試結果

表達式條件斷點

條件斷點是表達式結果爲true時纔會進行斷點，步驟如下:

在代碼行左側右擊，也可以添加斷點，此處選擇添加條件斷點

填寫表達式，按回車鍵

添加成功的小圖標如下

按F5調試，條件成立所以進行了斷點

命中計數斷點

只有該行代碼命中了指定次數，纔會進行斷點。步驟如下:

選擇條件斷點，切換爲命中次數選項，填寫命中次數

填寫成功如下圖所示

按F5調試，如圖所示，index 爲 9 時才中斷

內聯斷點

僅當執行到達與內聯斷點關聯的列時，纔會命中內聯斷點。這在調試在一行中包含多個語句的縮小代碼時特別有用。比如 for 循環，短路運算符等一行代碼包含多個表達式時會特別有用。步驟如下:

在指定位置按Shift + F9

調試之後，每次運行到該內聯處的代碼都會中斷

補充知識點：數據面板介紹

數據面板可以查看所有變量

在變量上點擊右鍵，可以設置變量值、複製變量值等操作

聚焦於數據面板時，可以通過鍵入值來搜索過濾。點擊下圖所示按鈕可以控制是否篩選。

補充知識點：監聽面板介紹

可以將變量添加到監聽面板，實時觀察變量的變化。

在變量面板通過右鍵選擇 “添加到監視” 將變量添加到監聽面板

也可以直接在監聽面板選擇添加按鈕進行變量添加

添加變量後就可以實時監聽變量的變化

補充知識點：調試服務器時打開一個 URI

開發 Web 程序通常需要在 Web 瀏覽器中打開特定 URL，以便在調試器中訪問服務器代碼。VS Code 有一個內置功能 “serverReadyAction” 來自動化這個任務。

一段簡單的 server 代碼

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});
複製代碼

配置 launch.json，以支持打開 URI

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}
複製代碼

pattern是設置匹配的程度端口號，端口號放在小括號內，即作爲一個正則的捕獲組使用。uriFormat映射爲 URI，其中%s使用pattern中的第一個捕獲組替換。最後使用該 URI 作爲外部程序打開的 URI。

按F5調試，會自動打開瀏覽器，且會在下圖所示處中斷，當繼續執行後，瀏覽器才能看到輸出了 server 的內容

終局：各場景調試實戰

調試 NodeJS 項目

關於 NodeJs 項目的調試方法，已經在上述的斷點的基本使用 [1] 部分做了介紹，可以網上滾動翻閱。

調試 Typescript 項目

調試 TS 項目前，先創建一個 TS 項目
```
# 終端運行
tsc --init
複製代碼
```
VS Code 內置了對 Ts 調試的支持。爲了支持調試 Ts 與正在執行的 Js 代碼相結合，VS Code 依賴於調試器的 source map 在 Ts 源代碼和正在運行的 Js 之間進行映射，所以需要需要開啓sourceMap選項。
```
{
  "sourceMap": true,
  "outDir": "./out"
}
複製代碼
```
```
const num: number = 123;
console.log(num);
    
function fn(arg: string): void {
console.log('fn', arg);
}
    
fn("Hello");
複製代碼
```
新建 index.ts 文件，寫一個基本的 ts 代碼
打開tsconfig.json文件，開啓 sourceMap 選項和指定編譯後輸出的路徑
先初始化一個 ts 程序，生成默認的tsconfig.json文件
手動編譯調試 TS

在上述的 ts 基本項目中：
按F5或者運行 -> 啓動調試，此時可以看到可以正常 debug 調試
在 index.ts 中隨意添加一個斷點
此時可以看到生成了 out 文件夾，裏面包含一個index.js和一個index.js.map文件
終端執行 ts 的編譯命令tsc
通過構建任務構建調試 TS

注意，如果你使用的是其他終端 (比如cmder) 的話，有可能會生成不了，如下圖所示，使用默認的 powershell 即可：
調試的話和上述步驟一樣，在有了編譯後的文件後，按F5即可
選擇tsc構建選項，此時可以看到自動生成了編譯文件
按Ctrl+Shift+B或選擇終端 -> 運行生成任務，此時會彈出一個下拉菜單
監視改變並實時編譯
如下圖所示，會實時編譯
按Ctrl + Shift + B選擇監視選項，可以實時監視文件內容發生變化，重新編譯

補充知識點：tasks 配置文件的創建方式

方法 1：點擊終端 -> 配置任務 -> 選擇任務可以生成對應的 tasks.json 配置

方法 2：點擊終端 -> 運行生成任務 -> 點擊設置圖標也可以生成對應的 tasks.json 配置

補充知識點：每次調試時重新編譯

按上述的操作已經生成了 task.json 配置文件

{
 "version": "2.0.0",
 "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 構建 - tsconfig.json"
    }
  ]
}
複製代碼

點擊運行 -> 添加配置 -> 選擇nodejs

在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小寫。該字段的作用是在執行命令前先執行改task任務。

注意，如果編譯後的 js 文件不在相應的位置，通過圖中的outFiles字段可以指定ts編譯後的js路徑。

在index.ts文件中按F5啓動調試，可以看到調試前已經生成了編譯文件，而後就可以正常調試了。

補充知識點：VsCode 的 TS 版本說明

vscode 本身內置了對 ts 的支持
vscode 內置的 ts 版本（即工作區版本），僅僅用於 IntelliSense（代碼提示），工作區 ts 版本與用於編譯的 ts 版本無任何關係。

修改工作區 ts 版本的方法：

在狀態欄選擇 typescript 的圖標，選擇版本切換

選擇你需要的版本即可

調試 html 項目

學會了上述 ts 的調試後，我們嘗試調試 html 文件，並且 html 文件中引入 ts 文件:

創建 html，引入 ts 編譯後的 js 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta >
  <title>Document</title>
</head>
<body>
  <h3>Hello</h3>
  <script src="./out/index.js"></script>
</body>
</html>
複製代碼

ts 源文件如下：

const num: number =  1221;
console.log(num);

function fn(arg: string): void {
  console.log('fn', arg);
}

document.body.append('World')

fn("he");
複製代碼

打 debug

launch.json 啓動命令配置

{
  // 使用 IntelliSense 瞭解相關屬性。 
  // 懸停以查看現有屬性的描述。
  // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "file:///E:/demo/vscode/debug/ts/index.html",
      "preLaunchTask": "tsc: 構建 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
複製代碼

選擇我們的啓動命令

按F5可以正常喚起 chrome 瀏覽器，並在 vscode 的 ts 源碼處會有 debug 效果

調試 Vue 項目的兩種方式

下面介紹兩種調試 vue2 項目的 3 種方法，其他框架的調試也類似：

不使用 vscode 插件 Debugger for chrome 的方法

初始化 vue 項目，配置vue.config.js，指定要生成 sourceMaps 資源

module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};
複製代碼

根目錄下創建./vscode/launch.json文件 或者選擇運行 -> 添加配置 -> Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "serve"
    }
  ]
}

複製代碼

添加任務腳本

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "serve",
      "type": "npm",
      "script": "serve",
      "isBackground": true,
      "problemMatcher": [
        {
          "base": "$tsc-watch",
          "background": {
            "activeOnStart": true,
            "beginsPattern": "Starting development server",
            "endsPattern": "Compiled successfully"
          }
        }
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}
複製代碼

該腳本的作用是運行npm run serve編譯命令。

按F5啓動調試即可

注意：此方式的主要點在於launch.json配置文件中，通過preLaunchTask字段指定調試前先運行一個任務腳本，preLaunchTask的值對應tasks.json文件中的label值。

更多詳細內容，大家可以點擊這裏的參考文檔 [2] 查閱。

藉助 vscode 插件 Debugger for Chrome 在 Chrome 中調試

第一步還是初始化 vue 項目，添加vue.config.js文件配置，指定要生成 sourceMaps 資源

module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};
複製代碼

vscode 中擴展中安裝Debugger for Chrome插件，並確保沒有禁用插件

手動啓動項目的運行, 此方式不需要配置tasks.json任務

# 終端執行命令，啓動項目
npm run serve
複製代碼

按F5啓動調試即可

更多詳細內容，請點擊這裏的參考文檔 [3] 查閱。

藉助 vscode 插件`Debugger for Firfox`在 Firefox 中調試

和Debugger for Chrome基本一樣，區別在於安裝Debugger for Firfox插件，並在 launch.json 配置中，增加調試 Firefox 的配置即可，配置如下

{
  "version": "0.2.0",
  "configurations": [
    // 省略Chrome的配置...
    // 下面添加的Firefox的配置
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}
複製代碼

調試時選擇對應的調試命令即可

Firefox 初始啓動時不會觸發調試，需要刷新一次

調試 Electron 項目

Electron 很多人都使用過，主要用於開發跨平臺的系統桌面應用。那麼來看下vue-cli-electron-builder創建的Electron項目怎麼調試。步驟如下：

在初始化項目後，首先修改vue.config.js文件配置，增加 sourceMaps 配置：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
複製代碼

創建調試配置.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "preLaunchTask": "bootstarp-service",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args": ["--remote-debugging-port=9223", "./dist_electron"],
      "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "urlFilter": "http://localhost:*",
      "timeout": 0,
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}
複製代碼

此處配置了兩個調試命令: Electron: Main用於調試主進程，Electron: Renderer用於調試渲染進程；compounds[].選項用於定義複合調試選項; configurations定義的複合命令是並行的; preLaunchTask用於配置命令執行前先執行的任務腳本，其值對應tasks.json中的label字段; preLaunchTask用在compounds時，用於定義configurations複合任務執行前先執行的腳本。

創建任務腳本

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "bootstarp-service",
      "type": "process",
      "command": "./node_modules/.bin/vue-cli-service",
      "windows": {
        "command": "./node_modules/.bin/vue-cli-service.cmd",
        "options": {
          "env": {
            "VUE_APP_ENV": "dev",
            "VUE_APP_TYPE": "local"
          }
        }
      },
      "isBackground": true,
      "args": [
        "electron:serve", "--debug"
      ],
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": ""
        },
        "background": {
          "beginsPattern": "Starting development server\\.\\.\\.",
          "endsPattern": "Not launching electron as debug argument was passed\\."
        }
      }
    }
  ]
}
複製代碼

啓動調試

在主進程相關代碼上打上斷點，然後啓動調試主進程命令就可以調試主進程了

注意，這裏的options參數是根據實際的情況，自定義添加我們運行項目時所需要的參數，比如我這裏因爲啓動項目的 npm 命令是:

"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"
複製代碼

主進程調試成功

開始調試渲染進程

切換到渲染進程的調試選項，在渲染進程的代碼處打上斷點，點擊調試。注意，此時並不會有斷點終端，需要ctrl+r手動刷新軟件進程纔會看到渲染進程的斷點。

刷新渲染進程後的效果，如下圖，已經進入了斷點

另一種方式

同時開啓渲染進程和主進程的調試，只需要切換到調試全部的選項即可。注意，此種方式因爲compounds[].configurations配置是並行執行的，並不一定能保證渲染進程調試一定能附加到主進程調試成功（估計是時機問題），有些時候會調試渲染進程不成功。所以，可以採取上面的方式進行調試。

更多調試 Electron 的內容，可以點擊參考文檔 [4] 查閱。

補充：更進一步

VS 調試 React app 文檔 [5]
VS 調試 Next.js 文檔 [6]
更多...[7]

其他技巧

技巧一：代碼片段（snippets）

從擴展商店中安裝 snippets

@category:"snippets"
複製代碼

創建全局代碼片段

選擇文件 -> 首選項 -> 用戶片段
選擇新建全局代碼片段文件

添加代碼片段文件的文件名稱，會生成.code-snippets後綴的文件
定義用戶片段

{
  "自動補全console.log": {
    "scope": "javascript,typescript",
      "prefix": "log",
      "body": [
        "console.log('$1');",
        "$2"
      ],
    "description": "輸出console.log('')"
  }
}

在鍵盤輸入log時效果如下

指定光標處的默認值並選中

"body": [
  "console.log('${1:abc}');"
],
複製代碼

指定光標處的默認值有多個，並提供下拉選擇

用兩個豎線包含多個選擇值，|多個選擇值直接用逗號隔開|

"body": [
  "console.log('${1:abc}');",
  "${2|aaa,bbb,ccc|}"
],
複製代碼

新建當前工作區的代碼片段

只需要選擇文件 \-> 首選項 \-> 用戶片段 \-> 新建xxx文件夾的代碼片段, 新建後會在當前工作區生成.vscode/xxx.code-snippets文件

技巧二：Emmet

vscode 內置了對 Emmet 的支持，無需額外擴展。例如 html 的 Emmet 演示如下:

技巧三：對光標處代碼變量快速重命名

選中或者光標所處的位置，按F2可以對所有的變量重命名

技巧四：代碼重構建議

選中要重構的代碼，點擊出現的黃色小燈的圖標

選中重構的類型

輸入新的變量名

還可以重構到函數

TS 中還可以提取接口等等

補充：VsCode 擴展插件開發

VsCode 擴展插件可以做什麼事情？

定製主題、文件圖標
擴展工作臺功能
創建 webView
自定義新的語言提示
支持調試特定的 runtime

基於Yeoman快速開發 VsCode 插件，步驟如下:

安裝Yeoman和用於生成模板的插件 VS Code Extension Generator[8]

# 終端運行，主要node版本需要12及以上，node10會安裝報錯
npm i -g yo generator-code
複製代碼

運行yo code創建命令，選擇要生成的項目模板。這裏演示New extension

根據提示依次選擇

生成的內容如下

按F5生成編譯項目，此時會自動打開一個新窗口
在新窗口按Ctrl+Shfit+P, 輸入Hello World命令

此時會彈出一個彈窗的效果

至此，一個最簡單的插件就完成

關於本文

來源：愣錘

https://juejin.cn/post/7071146744339234846

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/lrDcU82p4rMZ34IXsgfNwA