vscode怎么断点调试

1. 环境配置

在开始断点调试之前，我们首先需要对我们的 VS Code 进行一些配置，以确保可以正常使用调试功能。

1.1 安装插件

第一步：打开 VS Code

第二步：点击左侧的扩展按钮

第三步：在搜索栏中输入 Debugger for Chrome

第四步：点击安装按钮进行安装

第五步：安装完成之后，我们需要重新启动 VS Code 才能使插件生效。

1.2 配置调试环境

第一步：打开需要调试的项目

第二步：按下 ctrl + shift + D 打开调试面板

第三步：点击面板中的齿轮图标，打开 launch.json 文件

第四步：在 launch.json 文件中添加以下代码：

{

    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    }]
}

其中，url 代表项目启动时的地址。如果需要调试多个页面，可以配置多个 configurations 。上面的代码中，我们配置了针对于 localhost:3000 地址的调试。

2. 断点调试

当我们完成环境的配置之后，就可以愉快地开始断点调试了。

2.1 添加断点

第一步：找到要调试的代码

第二步：点击代码行号，添加断点。断点会用一个小红点表示。

第三步：运行项目，并执行到该断点位置时，程序会自动停止。

2.2 调试控制台

调试控制台是一个非常重要的工具，可以通过它来查看当前程序的状态，并使用一些调试命令来控制程序的执行。

第一步：打开调试面板

第二步：点击面板中的控制台按钮

第三步：在控制台中可以使用下列命令：

continue：继续执行程序

step over：单步执行当前行，不进入函数

step into：单步执行当前行，进入函数

step out：跳出当前函数

在调试过程中，我们可以在控制台中输入一些表达式，来查看它们的值。

2.3 监视变量

监视变量是一个非常有用的功能，可以在变量发生改变时自动停下程序，并显示新的值。

第一步：右键点击变量，选择“添加监视”

第二步：开始调试

在变量的值发生改变时，我们可以看到变量值的变化。

2.4 条件断点

条件断点是一种高级的调试功能，可以在某个特定条件下触发断点。

第一步：找到需要加入条件的断点

第二步：右键点击断点，选择“编辑断点”

第三步：在“条件”一栏中输入断点的条件

在满足条件的情况下，程序会自动停下执行。