vscode调试js

最新推荐文章于 2025-05-25 15:50:52 发布

八戒取经路

最新推荐文章于 2025-05-25 15:50:52 发布

阅读量3.1w

点赞数 11

CC 4.0 BY-SA版权

分类专栏：工具使用

本文链接：https://blog.youkuaiyun.com/xfxfxfxfxf666/article/details/87434847

工具使用专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用VSCode配合Debugger for Chrome插件进行本地静态文件的JavaScript调试，包括配置步骤及注意事项，帮助开发者提高调试效率。

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

1.检查你使用的vscode的版本是否是比较新的，我使用的是最新版本，如果不是最新版本需要在help----->check for updates一下

1.安装Debugger for Chrome插件

3.在本地创建一个目录，用来存放项目的静态文件，我这里创建的是E:\demo（这里有一个坑，如果没有创建项目的目录没办法调试）

4.使用vscode打开这个目录，并创建静态文件，我这里随便创建两个，index.html index.js ,index.html文件中引入js文件

5.配置debug方式，点击小齿轮，能自动打开launch.json配置文件，说明你的调试插件安装成功

6.配置调试配置文件，默认配置文件为如下内容

需要在后面添加如下配置信息，根据自己的实际情况配置相应的路径，下面是我的项目配置

,
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

最终额配置结果：

7.经过如上配置完毕后，你会发现你的调试菜单里面多了一个“使用本机chrom调试”选项

8.开始打断点调试

选择使用本机Chrome调试选项，并点击左边的绿色小按钮，此时会自动打开浏览器和调试界面，此时你可以调试你的js了

总结：

如上的方式使用的是静态方式调试，没有使用http服务器，你可以看到，最后一步中打开的浏览器地址栏上的地址是真是的静态文件地址，另外，js调试能在一定程度上解决了程序员调试js的难题，当然js的调试途径不仅仅是vscode，使用chrom自带的浏览器，以及webstorm ide工具，需要学习的可以自己网上查资料学习。