VsCode高级调试与使用技巧详解：从基础到实战，让编码效率倍增

VsCode自发布以来，凭借其卓越的特性迅速获得开发者青睐，尤其是前端开发者几乎将其视为必备工具。熟练掌握VsCode的使用与调试技巧，能显著提升日常开发效率。本文通过大量图文，从以下方面详细介绍VsCode的各种技巧：

第一部分：基本技巧

快速启动

VsCode安装后会自动配置环境变量，在终端输入code即可唤起VsCode应用。

常用快捷键

• Ctrl + P：快速搜索文件并跳转，添加:可跳转到指定行。
• Ctrl + Shift + P：根据当前上下文访问所有可用命令。
• Ctrl + Shift + C：在外部打开终端并定位到当前项目路径。
• Ctrl + `：显示或隐藏终端面板。
• Ctrl + B：切换侧边栏。
• Ctrl + ：快速拆分文件编辑。
• Alt + 单击左键：添加多处光标。
• Alt + Shift + 单击左键：在同一列所有位置添加光标。
• Alt + Shift + 鼠标选择：选择相同开始和结束的区域。
• Alt + 上键或下键：将当前行或选中区域上移或下移一行。

垂直标尺

在配置文件中添加如下配置，可增加字符数标尺辅助线：

"editor.rulers": [40, 80, 100]

第二部分：进阶调试技巧

断点的基本使用

下面以在VsCode中快速调试一个Node项目为例，演示断点的基本使用。后续会继续介绍各种高级断点。

1. 创建一个基本的Node项目。
2. 为Node.js打开左侧调试面板，选择要调试的项目名称，添加调试配置。
3. 选择调试的项目类型为Node.js。
4. 打开生成的.vscode/launch.json文件，指定程序入口文件。program字段用于指定程序入口文件，${workspaceFolder}表示当前项目根路径。
5. 在程序中添加断点，只需点击左侧边栏即可。
6. 按F5开始调试，成功调试会有浮窗操作栏。

浮窗操作按钮功能依次为：继续（F5）、调试下一步（F10）、单步跳入（F11）、单步跳出（Shift + F11）、重新调试（Ctrl + Shift + F5）、结束调试（Shift + F5）。

日志断点

日志断点是普通断点的一种变体，区别在于不会中断调试，而是将信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下：

1. 在断点位置右键，选择“添加日志断点”。
2. 输入要记录的信息，点击回车添加完成。
3. 可以使用{}使用变量，例如输入b的值为${b}。
4. 日志断点添加成功后显示为菱形图标。

第三部分：调试实战

本部分将讲解各种项目的调试实战，包括Node程序、TypeScript程序、Vue程序、Electron程序、HTML等的调试方法。每种项目都有对应的调试配置和注意事项，开发者可根据实际项目类型进行配置。

第四部分：其他实用技巧

最后一部分讲解其他有用的技巧，如代码片段、重构、Emmet等，这些功能能进一步提升编码效率。