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

现在使用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 调试项，点击开始调试就可以了