vscode怎么断点调试js项目

1. VSCode简介及安装

VSCode全称为Visual Studio Code，是微软公司推出的轻量级 Source Code Editor，既支持 Windows、MacOS、Linux 系统，可用于编辑多种编程语言，也支持多种插件扩展，主打轻巧快速、开源免费、内置调试等特点。在本文中，我们将会介绍VSCode的内置调试功能，使用VSCode的内置调试功能可以方便快捷地调试JavaScript代码。

首先需要从VSCode官网进行下载并安装，下载地址为https://code.visualstudio.com/，选择相应的操作系统版本进行下载安装。

2. 创建 JavaScript 项目

在使用VSCode进行调试之前，需要先创建一个JavaScript的项目，以便我们可以在其中编写测试代码进行调试。

我们可以在项目文件夹内创建一个index.html文件，在HTML的标签内引用JavaScript文件，并在JavaScript文件中编写测试代码。例如，以下代码创建了一个名为test的变量，并将其输出到控制台中。

var test = "Hello World!";

console.log(test);

3. 配置调试器

接下来，我们需要进行调试器的配置，以便我们可以使用VSCode的内置调试器对JavaScript代码进行调试。

首先，我们需要打开VSCode，在左侧的侧边栏中选择“调试”选项卡，点击“配置”按钮。此时VSCode会自动生成一个launch.json文件，并在编辑器中打开。

该文件的内容如下：

{

    "version": "0.2.0",
    "configurations": [
         {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

其中name为配置名称，program为要调试的JavaScript文件的路径，如果需要调试HTML文件中的JavaScript代码，我们需要将program改为HTML文件的路径。

3.1 配置breakpoints

在配置完成后，我们可以在JavaScript代码中设置断点进行调试。在VSCode中，我们可以通过单击代码行号的左侧来设置断点，添加断点后，该行会出现一个红色球，表示该断点已设置成功。

例如，在上面的例子中，我们可以在第一行代码的左侧单击鼠标右键，选择“添加断点”选项，然后在第一行代码的左侧会出现一个红色球，表示该断点已经成功设置。

3.2 配置launch.json

接下来，我们需要配置launch.json文件，以便VSCode可以启动调试。我们需要将launch.json文件中的“program”选项设置为要调试的文件的路径，并设置“stopOnEntry”选项为true，以便在程序开始运行时立即停止。

{

    "version": "0.2.0",
    "configurations": [
         {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/index.js",
            "stopOnEntry": true
        }
    ]
}

4. 开始调试项目

配置完成后，我们可以使用VSCode的内置调试器来调试JavaScript代码。

首先，我们需要通过F5键或者点击“调试”选项卡上的“启动调试”按钮来启动调试器。此时，VSCode会启动调试器，并停止在设置的第一个断点处。我们可以使用调试器的各种功能来继续调试代码，例如单步调试、断点调试、变量监视等功能，以找出代码中的错误。

5. 调试HTML文件中的JavaScript代码

如果需要调试HTML文件中的JavaScript代码，我们需要先在HTML文件中设置引用JavaScript文件的标签中添加一个属性data-attributes值为数据debugger，例如：

<script src="test.js" data-debugger="true"></script>

接下来，我们需要在launch.json文件中将“program”选项设置为HTML文件的路径，例如：

{

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

最后，我们需要启动调试器，通过F5键或者点击“调试”选项卡上的“启动调试”按钮来启动调试器，此时会启动Chrome，我们需要在Chrome的调试器中对JavaScript代码进行调试。

总结

本文详细介绍了如何在VSCode中使用内置调试器对JavaScript代码进行调试。我们首先介绍了VSCode的简介及安装方式，然后创建了一个JavaScript项目，配置了调试器，并详细介绍了如何在配置文件中设置breakpoints，以便我们可以在代码中设置断点进行调试。最后，我们介绍了如何调试HTML文件中的JavaScript代码。