如何在VSCode中调试JavaScript代码（补充）

最新推荐文章于 2025-08-02 11:44:31 发布

明月看潮生

最新推荐文章于 2025-08-02 11:44:31 发布

阅读量1.1k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： # 编程笔记：网页编程代码文章标签： vscode javascript ide 青少年编程少年工程师

本文链接：https://blog.csdn.net/qq_40071585/article/details/136927661

编程笔记：网页编程代码专栏收录该内容

42 篇文章

订阅专栏

本文详细指导如何在VSCode中配置并使用Edge浏览器进行JavaScript代码调试，包括安装扩展、创建launch.json、设置断点及注意事项。

如何在VSCode中调试JavaScript代码（补充）

如何在使用Edge浏览器的情况下，在VSCode中调试JavaScript代码。

在Visual Studio Code (VSCode) 中调试JavaScript代码，尤其是当你想要使用Edge浏览器时，你可以按照以下步骤进行：

安装调试扩展：
- 打开VSCode，点击左侧的扩展图标（或按Ctrl+Shift+X）。
- 搜索并安装“Debugger for Chrome”扩展，这个扩展也支持Edge浏览器。
创建调试配置文件：
- 在VSCode中，打开你的项目文件夹。
- 点击左侧的调试图标（或按Ctrl+Shift+D）打开调试视图。
- 点击“创建 launch.json 文件”按钮，选择“Edge”作为环境。
配置调试设置：
- 在生成的launch.json文件中，配置你的调试设置。例如，如果你想要调试一个本地服务器上的网页，你的配置可能如下所示：

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

在这个例子中，url字段应设置为你的网页所在的URL，webRoot字段指向你的项目根目录。
4. 在代码中设置断点：

在你想要调试的JavaScript代码行上点击左边的空白区域，或者在代码行上右键选择“Add Breakpoint”来设置断点。

启动调试会话：
- 确保你的网页在Edge浏览器中已经打开，并且VSCode的调试配置与你的网页URL相匹配。
- 在调试视图中，选择你刚刚创建的Edge调试配置（点击配置旁边的绿色箭头），然后点击上方的绿色播放按钮或按F5键启动调试会话。
开始调试：
- 当浏览器执行到设置了断点的代码行时，VSCode的调试器会自动暂停执行，你可以查看和修改变量的值、单步执行代码、查看调用堆栈等。
注意事项：
- 确保你的Edge浏览器是最新版本，以便获得最佳支持。
- 如果你的项目需要特定的启动命令或参数，你可能需要在launch.json中进行相应的配置。
  通过这些步骤，你可以在VSCode中使用Edge浏览器来调试JavaScript代码，享受轻量级但功能强大的代码编辑和调试体验。