VS code与 chrome浏览器和 edge浏览器来进行代码调试，以及一套简单的调试配置文件

最新推荐文章于 2025-03-17 18:27:20 发布

西红柿又名小番茄

最新推荐文章于 2025-03-17 18:27:20 发布

阅读量1.5w

点赞数 3

分类专栏： vs code 文章标签： chrome edge

本文链接：https://blog.csdn.net/qq_39293316/article/details/105747126

版权

vs code 专栏收录该内容

2 篇文章

订阅专栏

现在使用VS code编辑器越来越多了，在我们写代码的过程中避免不了对项目的调试，或者对某一个功能的本地调试，之前都是直接在 chrome浏览器打断点来调试，不是很方便，无意中发现VS code编辑器自带有调试功能，不过具体使用还是需要一些准备的。

首先，我们要在VS code编辑器中下载插件 Debugger for Chrome和 Debugger for Microsoft Edge，分别是chrome浏览器和 edge浏览器相对应的调试插件，具体的下载方式如下：

打开VS code编辑器，点击红色圈起来的按钮，然后在出现的搜索框中分别输入 Debugger for Chrome和 Debugger for Microsoft Edge并点击安装，依次下载插件就完成了第一步。

第二步、点击VS code编辑器的调试按钮，会出现下面这个提示：

然后点击创建launch.json文件，会出现下面这个弹窗

选择下拉按钮，选择chrome，就会自动生成一个launch.json文件，其内容大概是这样的

这个是默认生成的 launch.json配置文件，我们真正使用的时候需要修改下这个文件，下面我提供一个简单的 launch.json配置文件模板

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:9090",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9000,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"  //#每次需要修改这里的文件地址
        },
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch edge against localhost",
            "url": "http://localhost:9090",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "edge",
            "request": "attach",
            "name": "Attach to edge",
            "port": 9000,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "edge",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"  //#每次需要修改这里的文件地址
        },
    ]
}

这样，VS code编辑器的 chrome浏览器和 edge浏览器调试插件和配置文件就都完成了。

使用时，我们只要点击VS code编辑器的调试按钮，然后在运行那里选择 Launch Chrome against localhost 调试项，点击开始调试就可以了