在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文件里面添加的默认配置内容：

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

保存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的设置，修改后的配置内容如下：

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

总结：

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