vscode断点调试js项目-猿码集

1. 简介

Visual Studio Code（简称 VS Code）是一款流行的轻量级代码编辑器，能够轻松地调试 JavaScript 项目。本文将介绍 VS Code 内置的调试器，并详细介绍如何在 VS Code 中设置断点并调试您的 JavaScript 项目。

2. 安装 VS Code

首先，您需要下载并安装 Visual Studio Code 编辑器。您可以从 Visual Studio Code 官网下载适用于您的操作系统的 VS Code 版本。

3. 创建 JavaScript 项目

在开始设置断点之前，您需要拥有 JavaScript 项目。创建项目的最简单方法是使用“Hello, World!”应用程序。

在您的文件夹中创建一个 newFolder，并命名为“hello_world_app”。在 newFolder 中创建一个名为“index.html”的新文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <script>
      console.log("Hello, World!");
    </script>
  </body>
</html>

使用 VS Code 打开“hello_world_app”文件夹：

code hello_world_app

右键单击 index.html 文件，并选择“在默认浏览器中打开”。

现在打开浏览器控制台，您可以看到“Hello, World!”消息已在控制台中打印。这是我们将要调试的 JavaScript 代码。

4. 在 VS Code 中设置断点

现在我们来到了重点，如何在 VS Code 中设置断点。

从编辑器中打开 index.html 文件，并单击代码区域左侧的行号。这将在当前行添加一个红色圆圈标志，表示您已设置断点。在本例中，我们将在第 6 行设置断点：

5. 配置和启动调试器

接下来，我们将配置和启动 VS Code 调试器。单击 VS Code 左侧的调试按钮，然后单击“创建配置文件”的按钮：

VS Code 将打开调试器，并提示您选择需要在其中调试代码的环境。

选择“Chrome”：

现在在 VS Code 中打开 launch.json 文件。这是一个 JSON 格式的文件，其中包含用于配置调试器的设置。在文件中找到以下行，并更改为以下内容：

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

如果您是第一次使用 VS Code 进行调试，请确保在 launch.json 文件中设置了以上配置，然后按 F5 或单击绿色运行按钮来运行调试器。

6. 在浏览器中启用 VS Code 调试器

在浏览器中启用 VS Code 调试器，首先您需要在 Chrome 应用商店中安装“Debugger for Chrome”插件。安装完成后，单击“调试”按钮，然后单击运行按钮（绿色箭头）：

这将启动一个新的 Chrome 实例，并将 Chrome 实例连接到 VS Code 调试器。

7. 在 VS Code 中调试 JavaScript 代码

现在您已准备好在 VS Code 中调试 JavaScript 代码。单击 run 按钮或按 F5 键以打开应用程序，并开始 VS Code 调试器。在 Chrome 窗口中，您将看到一个新的 VS Code 调试工具栏。

单击“继续”按钮以继续执行 JavaScript 代码。当代码执行到您在第 6 步中设置的断点时，代码执行将暂停，并且 VS Code 将突出显示断点下一行的代码：

现在，您可以逐行执行代码或使用 VS Code 的其他调试工具，并在代码执行期间检查变量和输出。

7.1 使用条件断点

条件断点是一种特殊的断点类型，它使您能够在满足一定条件时暂停代码执行。

要设置条件断点，请单击需要设置条件断点的行号旁边的空白处，然后选择“条件断点”选项。在“Expression”字段中输入条件表达式，并单击“保存”按钮。

7.2 使用日志断点

日志断点是一种特殊的断点类型，它会将消息记录到控制台。

要设置日志断点，请单击需要设置日志断点的行号旁边的空白处，然后选择“日志断点”选项。在“Message”字段中输入要记录的消息，并单击“保存”按钮。

8. 结论

现在，您已经学会了在 VS Code 中设置 breakpoint 并进行调试。同时，我们还介绍了在调试过程中使用条件断点和日志断点的方法。希望这篇文章对您在 VS Code 中进行 JavaScript 项目调试有所帮助。

vscode断点调试js项目