vscode如何跟浏览器进行断点调试

最新推荐文章于 2025-05-30 23:25:52 发布

原创最新推荐文章于 2025-05-30 23:25:52 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode调试

工具专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在VSCode中设置并使用Debugger for Chrome插件进行网页调试的过程，包括安装软件、配置项目、生成launch.json文件及修改调试URL等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装

1.安装vscode软件

2.安装好vscode软件之后，打开项目，然后再安装Debugger for Chrome 插件用于Chrome调试

2.VScode项目配置

1.打开项目界面按F5出现界面选择Chrome

2.添加成功后点击调试，添加配置，自动生成launch.json

在launch.json中：

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

其中url地址为你当前在浏览器中调试的地址