在VSCode中进行JavaScript调试的详细流程

引言

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

1. 配置VSCode

1.1 打开或创建launch.json

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

1.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 。此时代码将会停留在我们打的断点函数调用处。左侧可以看到相关的调试信息。

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

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

到此这篇关于在VSCode中进行JavaScript调试的详细流程的文章就介绍到这了,更多相关VSCode中进行JavaScript调试内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！