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

語言: CN / TW / HK

作者:愣錘 

https://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 瞭解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲瞭解更多信息,請訪問: 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 值。

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

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

補充:更進一步

  • 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: