在VS Code中启动Edge浏览器调试Vue项目

最近维护一个Vue 2.x的老项目，网上的资料介绍在VS中调试前端代码都是使用Chrome浏览器，但我没有装Chrome浏览器，想在VS Code中直接调试Vue代码，百度了很多资料，尝试了好几种方案，终于找到简单可行的方法。

根据微软官方的资料，如果想在VS Code中使用Edge浏览器进行调试，可以安装Microsoft Edge Tools for VS Code 插件，安装后可以打开一个跟VS Code集成的Edge浏览器，详细内容请参考官方链接：

在 Visual Studio Code 中调试 Microsoft Edge - Microsoft Edge Development | Microsoft Learn

DevTools 扩展的 launch.json 文件 - Microsoft Edge Development | Microsoft Learn

但是在VS Code中集成Edge进行调试对于电脑屏幕比较小的情况很不方便，而且还有一个问题就是这个集成的Edge浏览器打开我的Vue网站样式有问题，最后只好放弃该方案。

下面是安装Microsoft Edge Tools 后在launch.json文件里面添加的默认配置内容：

"configurations": [
        {
            "type": "vscode-edge-devtools.debug",
            "request": "attach",
            "name": "Attach to Microsoft Edge and open the Edge DevTools",
            "url": "http://localhost:9528",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "vscode-edge-devtools.debug",
            "request": "launch",
            "name": "Launch Microsoft Edge and open the Edge DevTools",
            "url": "http://localhost:9528",
            "webRoot": "${workspaceFolder}"
        }
    ]

安装该工具后，再添加两个使用VS Code直接打开独立的Edge浏览器的配置：

{
            "name": "Attach to Edge",
            "port": 9222,
            "request": "attach",
            "type": "msedge",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "msedge",
            "url": "http://localhost:9528",
          
        },

        {
            "name": "chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9528/",
            "webRoot": "${workspaceRoot}"
        },

保存launch.json文件，之后在VS Code的调试活动面板运行和调试下拉框里面选择 Lanuch Edge，点击按钮进行调试就可以打开一个Edge窗口。

注意启动调试之前，还需要修改Vue的调试工具支持 devtool: 'source-map'，注意不同的Vue CLI版本devtool 设置所在的文件不同，详细内容请参考Vue官方文档：

在 VS Code 中调试 — Vue.js (vuejs.org)

按照上文内容介绍，的确可以打开Edge进行调试，但是无法正确命中断点，这是因为使用Vue CLI工程发布后的项目文件对JS进行了编译，浏览器里面运行的JS代码不是项目源码，所以需要映射要调试的代码路径，在launch.json里面增加 sourceMapPathOverrides 的设置，并且修改webRoot的设置，修改后的配置内容如下：

         {
            "name": "Launch Edge",
            "request": "launch",
            "type": "msedge",
            "url": "http://localhost:9528",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*" }  
        },

 sourceMapPathOverrides 的设置还可以指定更多的源码映射路径，比如下面的例子：

"configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8091/dist/#/",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://app/*": "${webRoot}/*"
            }
        }
    ]

总结：

上面的过程关键点就是lauch.json的配置，用一张图片来总结，如下图。