这不是一篇科普文,只是一篇浏览器调试配置的分享(主要对准对准vs code调试)
调试配置
使用vs code插件debugger-for-chrome、debugger-for-edge(EdgeHTML&Chromium)和Debugger for Firefox调试之前,会自动在工程下添加
.vscode
文件夹,里面的launch.json
就是配置调试参数的位置。
launch.json
很多的配置参数,具体看参考章节的nodejs-debugging和debugging-protocol。
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: launch chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"userDataDir": false,
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "chrome",
"request": "attach",
"name": "vuejs: attach chrome",
"webRoot": "${workspaceFolder}/src",
"port": 9222,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "edge",
"request": "launch",
"name": "vuejs: launch EdgeHTML",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"userDataDir": false,
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "edge",
"request": "attach",
"name": "vuejs: attach EdgeHTML",
"webRoot": "${workspaceFolder}/src",
"port": 2015,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "edge",
"request": "attach",
"version": "dev", // dev, beta, or canary
"name": "vuejs: attach Edge(Chromium)",
"webRoot": "${workspaceFolder}/src",
"port": 9223,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "edge",
"request": "launch",
"version": "dev",
"name": "vuejs: launch Edge(Chromium)",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"userDataDir": false,
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "vuejs: launch firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
},
{
"type": "firefox",
"request": "attach",
"reAttach": true,
"name": "vuejs: attach firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
]
}
launch模式
launch模式就是重新打开一个浏览器实例(不是tab)。
attach模式
attach模式,是附加到现在已经打开的浏览器调试端口上,所以需要你在已经打开的浏览器中访问
launch.json
中配置的网站地址。
chrome配置
- windows
-
mac
终端执行:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
-
Linux
终端执行:
google-chrome --remote-debugging-port=9222
Edge(Chromium)
-
windows
命令行:
msedge.exe --remote-debugging-port=2015
- mac和Liunx现在官方没说怎么调试…..
Microsoft Edge (EdgeHTML)
-
windows
命令行:
microsoftedge.exe --devtools-server-port=2015
竟然不能快捷方式配置,不科学。
个人建议
个人建议平时开发,把端口配置到快捷方式,使用attach模式可以共享使用已经安装的浏览器插件。
具体还有很多参数配置,可以参考官方文档。
参考
今天的文章前端小纠结–VS Code调试配置分享分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20565.html