深入講解 VsCode 各場景高級調試與使用技巧

語言: CN / TW / HK
時間 2022-09-26 08:46:38
主題:

作者：愣錘 

http://juejin.cn/post/7071146744339234846

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項目的調試方法，已經在上述的斷點的基本使用部分做了介紹，可以網上滾動翻閲。

調試Typescript項目

  • 調試TS項目前，先創建一個TS項目

    • 先初始化一個ts程序，生成默認的 tsconfig.json 文件 
# 終端運行
tsc --init
  • 打開 tsconfig.json 文件，開啟sourceMap選項和指定編譯後輸出的路徑

VS Code 內置了對 Ts 調試的支持。為了支持調試 Ts 與正在執行的 Js 代碼相結合，VS Code 依賴於調試器的source map在 Ts 源代碼和正在運行的 Js 之間進行映射，所以需要需要開啟 sourceMap 選項。 

{
"sourceMap": true,
"outDir": "./out"
}

  • 新建index.ts文件，寫一個基本的ts代碼

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

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

fn("Hello");

  • 手動編譯調試TS

    在上述的ts基本項目中：

    • 終端執行ts的編譯命令 tsc
  • 此時可以看到生成了out文件夾，裏面包含一個 index.js 和一個 index.js.map 文件

  • 在index.ts中隨意添加一個斷點

  • 按 F5 或者 運行 -> 啟動調試 ，此時可以看到可以正常debug調試

  • 通過構建任務構建調試TS

    • 按 Ctrl+Shift+B 或選擇 終端 -> 運行生成任務 ，此時會彈出一個下拉菜單
  • 選擇 tsc構建選項 ，此時可以看到自動生成了編譯文件

注意，如果你使用的是其他終端(比如 cmder )的話，有可能會生成不了，如下圖所示，使用默認的powershell即可：

  • 調試的話和上述步驟一樣，在有了編譯後的文件後，按 F5 即可

  • 監視改變並實時編譯

    • 按 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 name="viewport" content="width=device-width, initial-scale=1.0">
  <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 瞭解相關屬性。 
  // 懸停以查看現有屬性的描述。
  // 欲瞭解更多信息，請訪問: http://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 值。

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

藉助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 啟動調試即可

更多詳細內容，請點擊這裏的參考文檔查閲。

藉助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 http://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的內容，可以點擊參考文檔查閲。

補充：更進一步

  • VS調試React app文檔

  • VS調試Next.js文檔

  • 更多...

其他技巧

技巧一：代碼片段（snippets）

從擴展商店中安裝snippets 

@category:"snippets"

創建全局代碼片段

  • 選擇 文件 -> 首選項 -> 用户片段
  • 選擇 新建全局代碼片段文件
  • 添加代碼片段文件的文件名稱，會生成 .code-snippets 後綴的文件

  • 定義用户片段

{
  "自動補全console.log": {
    "scope": "javascript,typescript",
      "prefix": "log",
      "body": [
        "console.log('$1');",
        "$2"
      ],
    "description": "輸出console.log('')"
  }
}
關鍵詞 類型 説明
scope string 代碼片段生效的作用域，可以是多個語言，比如 javascript,typescript 表示在js和ts生效，不加 scope 字段表示對所有文件類型生效
prefix `string string[]`
body string[] 代碼片段內容，數組的每一項會是一行
description string IntelliSense 顯示的片段的可選描述
1−n - 定義光標的位置，光標根據數字大小按tab依次跳轉；注意 $0 是特殊值，表示光標退出的位置，是最後的光標位置。
  • 在鍵盤輸入 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 
# 終端運行，主要node版本需要12及以上，node10會安裝報錯
npm i -g yo generator-code
  • 運行 yo code 創建命令，選擇要生成的項目模板。這裏演示 New extension

  • 根據提示依次選擇

  • 生成的內容如下

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

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

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

- EOF -

覺得本文對你有幫助？請分享給更多人

關注「大前端技術之路」加星標，提升前端技能

點贊和在看就是最大的支持 :heart:

「」