VSCode断点调试JS操作HTML document对象

最新推荐文章于 2025-06-30 22:10:50 发布

原创最新推荐文章于 2025-06-30 22:10:50 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍如何在VSCode中安装Debugger for Chrome插件，并通过修改launch.json文件来调试HTML和JavaScript文件。具体步骤包括安装插件、配置调试环境及运行调试。

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

1. VSCode 上装插件：Debugger for Chrome

ctrl+shift+p 选择Extensions:install Extensions，选择Debugger for Chrome，installing，然后reload

2. 修改launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    
    "version": "0.2.0",
    "configurations": [{
            "name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开
            "type": "chrome",
            "request": "launch",
            "url": "${file}",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "nodeLauch", //单独调试js，即可以直接运行js
            "type": "node",
            "request": "launch",
            "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "preLaunchTask": "",
            "sourceMaps": false,
            "outDir": null
        }
    ]
}