深入讲解 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 课程及专业认证助您踏上全栈开发工程师之路