在VS Code中启动Edge浏览器调试Vue项目 - 深蓝医生
source link: https://www.cnblogs.com/bluedoctor/p/17967808
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在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的配置，用一张图片来总结，如下图。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK