如何安装和使用 Visual Studio Code 中的调试扩展插件？

alankuo

于 2024-10-10 08:20:25 发布

阅读量837

点赞数 6

分类专栏： IT工具文章标签：测试工具

本文链接：https://blog.csdn.net/alankuo/article/details/142796560

版权

IT工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

以下是在Visual Studio Code（VS Code）中安装和使用调试扩展插件的一般步骤：

一、安装调试扩展插件

打开扩展视图
- 在VS Code中，可以通过点击左侧活动栏中的“扩展”图标（看起来像四个方块），或者使用快捷键Ctrl + Shift + X（Windows和Linux）或者Command + Shift + X（Mac）来打开扩展视图。
搜索插件
- 在扩展视图的搜索框中输入你想要安装的调试扩展插件的名称，例如“Debugger for Chrome”。
安装插件
- 在搜索结果中找到对应的插件，然后点击“安装”按钮。安装完成后，可能需要重新加载VS Code以使插件生效。

二、使用调试扩展插件（以Debugger for Chrome为例）

配置调试环境
- 创建调试配置文件：
  - 在项目根目录下创建一个名为.vscode的文件夹（如果不存在的话）。
  - 在.vscode文件夹中创建一个launch.json文件。可以通过点击VS Code的“调试”视图（左侧活动栏中的虫子图标），然后点击顶部的齿轮图标（配置或修复“launch.json”）来创建这个文件。
- 配置调试设置：
  - 在launch.json文件中，对于Debugger for Chrome插件，可能的配置如下：
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000", // 根据你的项目实际运行的本地地址修改
      "webRoot": "${workspaceFolder}/public" // 根据你的项目结构修改，这里假设前端代码在public文件夹下
    }
  ]
}
```
设置断点
- 在你的代码中，点击行号左侧的空白区域来设置断点。当代码执行到断点处时，程序会暂停，以便你查看变量的值、调用栈等信息。
启动调试
- 在VS Code的“调试”视图中，选择你刚刚配置好的调试配置（如“Launch Chrome against localhost”），然后点击绿色的“启动调试”按钮（或者使用快捷键F5）。
- 如果一切配置正确，VS Code会启动Chrome浏览器并打开指定的网址，同时在代码中的断点处暂停执行。
调试操作
- 查看变量：当程序暂停在断点处时，可以在“调试”视图的“变量”面板中查看当前作用域内的变量的值。
- 单步调试：可以使用“调试”工具栏上的“单步执行（F10）”、“进入函数（F11）”、“跳出函数（Shift + F11）”等按钮来逐步执行代码并查看程序的执行流程。
- 修改代码：在调试过程中，可以直接在VS Code中修改代码，然后重新启动调试或者使用“重新加载（Ctrl + R）”（Windows和Linux）或者Command + R（Mac）来重新加载代码并继续调试。