如何在VSCode中进行JavaScript调试

    在JavaScript开发中，调试是一个关键的过程，它帮助我们理解和修复代码中的问题。Visual Studio Code（VSCode）以其丰富的扩展和内置调试工具，为JavaScript开发者提供了强大的支持。本文将详细介绍如何在VSCode中进行JavaScript调试。

1. 配置VSCode

3.1 打开或创建

launch.json

1. 在VSCode中打开您的项目。
2. 转到“运行和调试”侧边栏（或使用快捷键Ctrl+Shift+D）。
3. 点击“创建 launch.json 文件”链接（如果尚未存在）。VSCode将提示您选择一个环境，对于前端项目，您可以选择“Chrome”作为调试类型。

3.2 编辑

launch.json

    根据您的项目需求，编辑

launch.json

文件以包含适当的调试配置。以下是一个基本的配置示例，用于调试在

localhost

上运行的前端应用：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "针对 localhost 启动 Chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

注意：

webRoot

应该指向您的项目源代码目录，这是VSCode用来解析Chrome中加载的脚本文件与本地源代码之间映射关系的目录。

2. 设置断点

• 在您的源代码文件中，找到您想要调试的代码行。
• 在行号旁边的空白区域点击，设置一个红色的断点。

3. 启动调试会话

    在vscode中打开终端然后点击终端中的

+

号旁边的下拉箭头，在下拉中点击

Javascript Debug Terminal

就可以启动一个

debug

终端。

    在debug终端执行

yarn dev

，在浏览器中打开对应的页面，比如：http://localhost:5173 。此时代码将会停留在我们打的断点函数调用处。左侧可以看到相关的调试信息。

    点击右上角的调试工具可以进行继续、逐过程、单步调试、 单步调成、重启、停止等调试操作。

    鼠标悬浮到变量上，可以方便快捷的查看变量内容。

新时代农民工 （QQ：277718357） 点击关注下方↓ 微信公众号：程序进阶之路，了解更多技术知识。