深入講解 VsCode 各場景高級調試與使用技巧
作者:愣錘
http://juejin.cn/post/7071146744339234846
VsCode自從誕生以來,以其各自優異的特性迅速走紅。 尤其是對於前端開發小夥伴來説,幾乎成為必不可少的開發工具。 所以,熟練掌握VsCode的各自使用技巧與調試技巧會讓你的日常開發工作效率倍增。
本文將會以大量圖文的方式,從下面幾個方面詳細介紹VsCode的各種技巧:
-
第一部分主要介紹VsCode的基本技巧,比如常用快捷鍵、輔助標尺等。熟悉此部分的可以直接跳過。
-
第二部分主要各種斷點(比如日誌斷點、內聯斷點、表達式斷點等等)、數據面板等等
-
第三部分主要講解各種項目的調試實戰,比如Node程序、TS程序、Vue程序、Electron程序、Html等的調試實戰
-
最後一部分將會講解其他有用的技巧,比如代碼片段、重構、Emmet等等
基本技巧
快速啟動
VsCode安裝後,會自動寫入環境變量,終端輸入 code
即可喚起VsCode應用程序。
常用快捷鍵
-
ctrl + p
快速搜索文件並跳轉,添加:
可以跳轉到指定行
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b61833b0066736c68f49bd2189110f59d760bc7eaae035236e3e049b5f3895fbe.jpg)
-
ctrl + shift + p
根據您當前的上下文訪問所有可用命令。 -
ctrl + shift + c
在外部打開終端並定位到當前項目路徑 -
ctrl + 按鍵1左邊的符號
顯示隱藏終端面板 -
Ctrl+B
切換側邊欄 -
Ctrl+\
快速拆分文件編輯 -
alt + 單機左鍵
添加多處光標 -
alt + shift + 單擊左鍵
同一列所有位置添加光標 -
alt + shift + 鼠標選擇
選擇相同開始和結束的區域
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b03070f6bf0db1adbb43c7d9c3644fc9cac28fc5255a29bae883273a816d5ad74.jpg)
-
alt + 上鍵或下鍵
將當前行或者選中的區域上移/下移一行
垂直標尺
在配置文件中添加如下配置,可以增加字符數標尺輔助線
"editor.rulers": [40, 80, 100]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be72694b9a41b287ecbedd7ea4be25590c8d019129cdf580964014a8a95107a50.jpg)
進階技巧
斷點的基本使用
下面以在VsCode中快速調試一個Node項目為例,演示斷點的基本使用。後文會繼續結束各種高級斷點。
-
創建一個基本的node項目為Nodejs
-
打開左側調試面板,選擇你要調試的node項目名稱,添加調試配置
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393102615081a3a158d8d0fad8906c5ed88b174aeeb21907e6c5d2884de9c4dac08.jpg)
-
選擇調試的項目類型為Node.js
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b7cbce11fba9490de334782360b6aa80b23753391b5761db77fa63e89dead35c8.jpg)
-
打開生成的.vscode/launch.json文件,指定程序入口文件
program
字段用於指定你的程序入口文件, ${workspaceFolder}
表示當前項目根路徑
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b4f462f97f4140663360fb9d8c494436b9b77d22640593f22bfbbfd7659cdb521.jpg)
-
在程序中添加斷點,只需要點擊左側的邊欄即可添加斷點
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b71cdced3ecd19d5adb518d40e13b7479cc24685af56cd6d19dffc42e83ce685f.jpg)
-
按
F5
開始調試,成功調試會有浮窗操作欄
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229be4c170b932fbf3730bf7faedb20c3e47c2dd945aa76353e2c1794f75c1711cc7.jpg)
浮窗的操作按鈕功能依次為:
-
繼續(
F5
)、 -
調試下一步(
F10
)、 -
單步跳入(
F11
)、 -
單步跳出(
Shift F11
)、 -
重新調試(
Ctrl + Shift + F5
)、 -
結束調試(
Shift + F5
)
日誌斷點
日誌斷點是普通斷點的一種變體,區別在於 不會中斷調試 ,而是可以把信息記錄到控制枱。日誌斷點對於調試無法暫停或停止的服務時特別有用。步驟如下:
-
添加日誌斷點的步驟
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b83a8da7cc645a16d59188b02bd9c359c5e4957e0e14520f2d3c98ab9547bbc7b.jpg)
-
輸入要日誌斷點的信息,點擊回車添加完成
可以使用 {}
使用變量,比如 在此處添加日誌斷點,b的值為${b}
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b22e3038eacd06a907030baa18c65f6cf8dbcc778ea462da2dd0d45a1a6e1d07f.jpg)
-
日誌斷點添加成功後會有是一個菱形圖標
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983931b5e1cc76cd3e14fa967981db52cc4f8d51f99fba3fcf90cc76a00a47732d26c.jpg)
-
按
F5
運行查看調試結果
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bafe2f86914b1b89ea1a53a33c6c3e4a7091d79e9c0ce1a3d5e43b3da14c836c8.jpg)
表達式條件斷點
條件斷點是表達式結果為 true
時才會進行斷點,步驟如下:
-
在代碼行左側右擊,也可以添加斷點,此處選擇添加條件斷點
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bdae51482438fd6638052eb376afbb14f5110d6b824bab5ee96537ce9d73275af.jpg)
-
填寫表達式,按回車鍵
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b62eff92090aa3d29d1b0ef9ca60b66ff17d64392494fd58dcb50c8501a731118.jpg)
-
添加成功的小圖標如下
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b57a60301fff70ea6ef3e81f9121665cb6aaf39211b08c008bce7d2a2a068c07b.jpg)
-
按
F5
調試,條件成立所以進行了斷點
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b975a552b7b1af8b9eadcf1270ac4c1bb390cd87f943b17f13b7dff23759a7f2d.jpg)
命中計數斷點
只有該行代碼命中了指定次數,才會進行斷點。步驟如下:
-
選擇條件斷點,切換為命中次數選項,填寫命中次數
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bf0252b6c89b9ef1ab1390c20a976d78cce3682814fb1800685ec4af16ee44983.jpg)
-
填寫成功如下圖所示
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983939272102a7cc172978086a6a38a0d75d998c67a3f43dbfe9d71f3c306460a753c.jpg)
-
按
F5
調試,如圖所示,index為9時才中斷
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b36037ac626a9810765874270218efd6db8f3c012d0579848110eabd4d7472f5e.jpg)
內聯斷點
僅當執行到達與內聯斷點關聯的列時,才會命中內聯斷點。這在調試在一行中包含多個語句的縮小代碼時特別有用。比如for循環,短路運算符等一行代碼包含多個表達式時會特別有用。步驟如下:
-
在指定位置按
Shift + F9
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be411e0deefb82226182acabfc1a52d976538c78fd58c00aa5abc4622bda23a8a.jpg)
-
調試之後,每次運行到該內聯處的代碼都會中斷
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b4d96c0a8ff1544294d2d013ae4f799a742b1624331134633fe33c454ccb35968.jpg)
補充知識點:數據面板介紹
-
數據面板可以查看所有變量
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393a98e60f0ac8855f1a06776ca30074a97a23af4b78d4e478650a0cf88417dbcff.jpg)
-
在變量上點擊右鍵,可以設置變量值、複製變量值等操作
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bc20b76a9d7373be12bd8ce1ca5854edb59ffedf2a5641cf06bc23c20c10ade8c.jpg)
-
聚焦於數據面板時,可以通過鍵入值來搜索過濾。點擊下圖所示按鈕可以控制是否篩選。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983935090d6e68298a8b9d62649f79ce8f1e9e1c4876e6d85e99dc86bc437da4db6c7.jpg)
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b742463ef3c63bb2bcf1e1a1e220201c0ba9600da8ff1577cbec4648e831d5bd2.jpg)
補充知識點:監聽面板介紹
可以將變量添加到監聽面板,實時觀察變量的變化。
-
在變量面板通過右鍵選擇“添加到監視”將變量添加到監聽面板
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b924511d4fcddcab61f870ff7e9613cfd02be7fdf6d96e4c6c34875670b091288.jpg)
-
也可以直接在監聽面板選擇添加按鈕進行變量添加
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b651f53a411cb1f84f37d2ae388a3be4ab214b742e1437c52f91f928a478e40c3.jpg)
-
添加變量後就可以實時監聽變量的變化
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b4ee8e5ff0e8e50d782aef43e8704302df7a6c430b0844ce4da8c04f49cd6934c.jpg)
補充知識點:調試服務器時打開一個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的內容
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983933a3123b6c0558b4e0ebd41b3ef30b5caf2b167ec76589d62d824fac7d44f200e.jpg)
終局:各場景調試實戰
調試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
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b7164bdf9a56ad012fe44eba26594b560a3780512692237fb3c039cae144a296d.jpg)
-
此時可以看到生成了out文件夾,裏面包含一個
index.js
和一個index.js.map
文件
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393a5dc4db70b6bf26d27f793d411e9ce07170c3b97a890f8ec6522eceb4bef0746.jpg)
-
在index.ts中隨意添加一個斷點
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b93ccda32a713c0a98f4c60032200af8db0e2c7d82315747644347b16fce8a2d9.jpg)
-
按
F5
或者運行 -> 啟動調試
,此時可以看到可以正常debug調試
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b43abbd8d4cdc8ae53cc4b14810fe6b9f82032e8edbb4b2d7e7f858ccd2c72bf5.jpg)
-
通過構建任務構建調試TS
-
按
Ctrl+Shift+B
或選擇終端 -> 運行生成任務
,此時會彈出一個下拉菜單
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b4d7cc7d17fa46f1f5aa66ee7cfc8915194933150e5452ae10d248074a6f3fcbb.jpg)
-
選擇
tsc構建選項
,此時可以看到自動生成了編譯文件
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b3fa0f727b485e718f656efa44eb3d060907e51137f1df6b6ec0fae3e91d10c1c.jpg)
注意,如果你使用的是其他終端(比如 cmder
)的話,有可能會生成不了,如下圖所示,使用默認的powershell即可:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b66c4b8d2ca7866a1c7d933610152d5504749baae7e7a4ddc74a9696b9e74f8e6.jpg)
-
調試的話和上述步驟一樣,在有了編譯後的文件後,按
F5
即可 -
監視改變並實時編譯
-
按
Ctrl + Shift + B
選擇監視選項,可以實時監視文件內容發生變化,重新編譯
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b2c7a75245cdfce16cd455eaa3d847fe8217687e4989df7dd6b1911de1a7857cb.jpg)
-
如下圖所示,會實時編譯
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983932be63c89f76c71aeb45d7d117c99eb3a144295bd1f14d5575a56b15d1e89fbf6.jpg)
補充知識點:tasks配置文件的創建方式
-
方法1:點擊
終端 -> 配置任務 -> 選擇任務
可以生成對應的tasks.json配置
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b16ad5d659a976dba8bce6ab113ab178ae301fc0cdf6ce120b6942b0acc45db28.jpg)
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839307fcd9cc8c4bbcad669c100e3e5e870ce74342e8bd66a7b01e17e65901b0e2d5.jpg)
-
方法2:點擊
終端 -> 運行生成任務 -> 點擊設置圖標
也可以生成對應的tasks.json配置
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b53d727e5c2512d656bf125e689e5c2bcb7434873014498af167410125936ebd8.jpg)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b075d0b8c9f4c6542fea95766bffaca9864f851f16f1289b94f30839a78775e10.jpg)
補充知識點:每次調試時重新編譯
-
按上述的操作已經生成了task.json配置文件
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": "build",
"label": "tsc: 構建 - tsconfig.json"
}
]
}
-
點擊
運行 -> 添加配置 -> 選擇nodejs
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bdbe4a5189e130a92d892eda829b058385e49e9f445e9bdc8826363102efbc605.jpg)
-
launch.json preLaunchTask tasks.json label task
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b67ee6956a4dbc5524b01e46b76cc24a870c558ff08eb115fcfaafcf3b3038b94.jpg)
注意,如果編譯後的js文件不在相應的位置,通過圖中的 outFiles
字段可以指定 ts
編譯後的 js
路徑。
-
在
index.ts
文件中按F5
啟動調試,可以看到調試前已經生成了編譯文件,而後就可以正常調試了。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4ba1be302e16e8586f0545fbb489c6d6a7c1df0a11233046e2abf7120827543a92.jpg)
補充知識點:VsCode的TS版本説明
-
vscode本身內置了對ts的支持
-
vscode內置的ts版本(即工作區版本),僅僅用於IntelliSense(代碼提示),工作區ts版本與用於編譯的ts版本無任何關係。
修改工作區ts版本的方法:
-
在狀態欄選擇typescript的圖標,選擇版本切換
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b248e62a9df29bcd422039b5eee602eee2c5d3c81bab749092f129032ce9e9b13.jpg)
-
選擇你需要的版本即可
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983938ef06cd5cdc81bc9d14564c0e11f9f06b114e112a4e4cc0f051402ee2f5de91b.jpg)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229ba2377499d9f76a43ae5a3046314a2b2ceb7c843a76abcb93da11559cbdd82eca.jpg)
調試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
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bede5c02d78c00f934e5f0d1fe24f3c7026a2d5556626b160dab0b06755cd2854.jpg)
-
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}"
}
]
}
-
選擇我們的啟動命令
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b164b0aca4350313839094f19692e81cb940d09409491eeed42196e009d343e79.jpg)
-
按
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
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bd69a612fb77e018e07473634cc29bddd4e8d2a4302b51da21f9d980bbbb82fdc.jpg)
{
"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
插件,並確保沒有禁用插件
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393dcfc210fcfcb1b384ce6dae8bdbca8f654b3429a2a8ca748f436eca3f0e27b66.jpg)
-
手動啟動項目的運行, 此方式不需要配置
tasks.json
任務
# 終端執行命令,啟動項目
npm run serve
-
按
F5
啟動調試即可
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b0aa91c0408ba5d6194567866ccccc85b9c1489e8ab6b78f56ad7e7571e921c11.jpg)
更多詳細內容,請點擊這裏的參考文檔查閲。
藉助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}/" }]
}
]
}
-
調試時選擇對應的調試命令即可
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bc00663b18099646413b95cd87b9d384269e110fe3f10b0e912e6efa2ef125ca2.jpg)
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\\."
}
}
}
]
}
-
啟動調試
在主進程相關代碼上打上斷點,然後啟動調試主進程命令就可以調試主進程了
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b4f7acc8ec75c5e856b1f27daa1965c1e7d9d39544c94b275186b0b4540502b91.jpg)
注意,這裏的 options
參數是根據實際的情況,自定義添加我們運行項目時所需要的參數,比如我這裏因為啟動項目的npm命令是:
"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"
-
主進程調試成功
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b51823b3487bfc104503afa47c1eb8c3344ab88020a085cb37eff6a9ec4daaca3.jpg)
-
開始調試渲染進程
切換到渲染進程的調試選項,在渲染進程的代碼處打上斷點,點擊調試。注意,此時並不會有斷點終端,需要 ctrl+r
手動刷新軟件進程才會看到渲染進程的斷點。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393f871ae610f140aee3078846bdfb67fbf8014db317c0ee8db76a57dc606e50d97.jpg)
-
刷新渲染進程後的效果,如下圖,已經進入了斷點
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839397dd377f49eabb80524c5b13fefbf650cfe7f9d10e434d820525f8a3dd384b3e.jpg)
-
另一種方式
同時開啟渲染進程和主進程的調試,只需要切換到調試全部的選項即可。注意,此種方式因為 compounds[].configurations
配置是並行執行的,並不一定能保證渲染進程調試一定能附加到主進程調試成功(估計是時機問題),有些時候會調試渲染進程不成功。所以,可以採取上面的方式進行調試。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393f8e26baf333b02a3ca31abb3d0c38a194e925204a698c72998a5790e994175d4.jpg)
更多調試Electron的內容,可以點擊參考文檔查閲。
補充:更進一步
-
VS調試React app文檔
-
VS調試Next.js文檔
-
更多...
其他技巧
技巧一:代碼片段(snippets)
從擴展商店中安裝snippets
@category:"snippets"
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b00b89232c8120a9f40052cfb832ebb0d5edef9ac7473eb2de3866522c69ecca2.jpg)
創建全局代碼片段
-
選擇
文件 -> 首選項 -> 用户片段
-
選擇
新建全局代碼片段文件
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8a7d5572f80f249d1cc72811bcc948c9e04d608f5294f4b6fe7b66dedab5cf59.jpg)
-
添加代碼片段文件的文件名稱,會生成
.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
時效果如下
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393d28135ce367c1ab659d2ad95ad808f8d2a1f4729b27074be939b869b88c38581.jpg)
-
指定光標處的默認值並選中
"body": [
"console.log('${1:abc}');"
],
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983934748c8fe72a4dce0e95ebdec917ca25d5f09398af7d50506b5976a5a588bce76.jpg)
-
指定光標處的默認值有多個,並提供下拉選擇
用兩個豎線包含多個選擇值, |多個選擇值直接用逗號隔開|
"body": [
"console.log('${1:abc}');",
"${2|aaa,bbb,ccc|}"
],
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bcfc0768d11b1d20761f47c6917c3f951eaf2e1e84bc2edd85f88b6d77f42027d.jpg)
新建當前工作區的代碼片段
只需要選擇 文件 -> 首選項 -> 用户片段 -> 新建xxx文件夾的代碼片段
, 新建後會在當前工作區生成 .vscode/xxx.code-snippets
文件
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bf6d8a2b47ea1689f8cb77c8317df0c5e665198fab2c0ce0070142cfa99df540c.jpg)
技巧二:Emmet
vscode內置了對Emmet的支持,無需額外擴展。例如html的Emmet演示如下:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bb3ed8014504d341b9a8bb9b0e71658570ea7a0b4f6ac663e46968b65b731927a.jpg)
技巧三:對光標處代碼變量快速重命名
選中或者光標所處的位置,按 F2
可以對所有的變量重命名
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393dc7b3644013de53579d13df27cc4f8883a613ce91a0e32c38281095d732768c7.jpg)
技巧四:代碼重構建議
-
選中要重構的代碼,點擊出現的黃色小燈的圖標
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b55741aa06e2f6b86450cfaa32b4e13893ed343c6906a099aec7571db15d2bb1a.jpg)
-
選中重構的類型
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b05f25f0f240c6cbd8cee03953b37a559659be4bd39992e9ac07f6f85afc88040.jpg)
-
輸入新的變量名
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bff7005882f612c13e81e4f2c74647853fffcbe397679568a73fe045e4e596151.jpg)
-
還可以重構到函數
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b7ec443593f9bd0e392b8a7ed0a95dc0b6a868b978daf5cb59d0d21ebc3e4bb01.jpg)
-
TS中還可以提取接口等等
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b366b3672165603bb9ea4e1009e6f7f129561fab10ccc7f549bfbc33ce40355f7.jpg)
補充:VsCode擴展插件開發
VsCode擴展插件可以做什麼事情?
-
定製主題、文件圖標
-
擴展工作台功能
-
創建webView
-
自定義新的語言提示
-
支持調試特定的runtime
基於 Yeoman
快速開發VsCode插件,步驟如下:
-
安裝
Yeoman
和用於生成模板的插件VS Code Extension Generator
# 終端運行,主要node版本需要12及以上,node10會安裝報錯
npm i -g yo generator-code
-
運行
yo code
創建命令,選擇要生成的項目模板。這裏演示New extension
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393e5eabc1ac936fac43d10b82dbc89e12805698aa7377ed519dd225e4c537d6ae7.jpg)
-
根據提示依次選擇
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b4c0f67727c3c26d5b8d2ec9ea5969f921a6803d2084173281f4f77452537b13d.jpg)
-
生成的內容如下
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bc246ba9c8cb78d17ec4c328a880a007cd29b3a1e45591a2f4b7e38d74a94c53a.jpg)
-
按
F5
生成編譯項目,此時會自動打開一個新窗口 -
在新窗口按
Ctrl+Shfit+P
,輸入Hello World
命令
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393f269e3e130a6c7b7ff084e54d2fbfcbe7e745237ab79b7dac2df26d1acac7dc3.jpg)
-
此時會彈出一個彈窗的效果
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b84a51679bd71cf41349dbf5fad8f5bc8469ab15a2eba2c39ec1f1ac2e71f9f9.jpg)
-
至此,一個最簡單的插件就完成了
- EOF -
覺得本文對你有幫助?請分享給更多人
關注「大前端技術之路」加星標,提升前端技能
點贊和在看就是最大的支持 :heart:
- 深入講解 VsCode 各場景高級調試與使用技巧
- 使用 Three.js 實現跳一跳遊戲
- TypeScript 終極初學者指南
- 給螞蟻金服 antv 提個 PR, 以為是改個錯別字, 未曾想背後的原因竟如此複雜!
- 眾多Mock工具,你選對了嗎
- 使用 Vite 和 TypeScript 帶你從零打造一個屬於自己的 Vue3 組件庫
- React:我們即將和後端 API 告別?
- 前端監控 SDK 開發分享
- Vue 想要拋棄虛擬 DOM 了?!
- 一文掌握 vue3.2 setup 語法糖
- 2022,VSCode 前端插件推薦
- 為什麼會存在 1px 問題?怎麼解決?
- 面試官問:Vue3 對比 Vue2 有哪些變化?
- 回望 2021 年大前端技術,未來可期!
- 您準備好成為最熱門大前端技術人才嗎? Node.js 課程及專業認證助您踏上全棧開發工程師之路