vscode 配置文件使用chrome进行debug

最新推荐文章于 2025-06-24 15:23:26 发布

gu-wen

最新推荐文章于 2025-06-24 15:23:26 发布

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41717584/article/details/84032775

本文详细介绍如何在VSCode中设置并使用Debugger for Chrome扩展进行网页调试。通过三步操作，包括下载扩展、配置调试参数及运行调试，实现对本地运行的网页进行高效调试。适合前端开发者快速上手。

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

第一步：在vscode中下载扩展Debugger for Chrome

第二步：点击右侧调试按钮，然后添加配置选择chrome

第三步：在launch.json中添加如下代码

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {   
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/1/page/index.html"  
        }
    ]
}

这里解释一下file路径，最后的index.html,是你运行后浏览器打开的页面，1是你当前文件夹。

最后再从调试中选择launch index.html

大功告成

感谢您的阅读