前端小纠结--VS Code调试配置分享
栏目: JavaScript · 发布时间: 4年前
内容简介:这不是一篇科普文,只是一篇浏览器调试配置的分享(主要对准对准vs code调试)使用vs code插件debugger-for-chrome和很多的配置参数,具体看参考章节的
这不是一篇科普文,只是一篇浏览器调试配置的分享(主要对准对准vs code调试)
调试配置
使用vs code插件debugger-for-chrome和 debugger-for-edge(EdgeHTML&Chromium) 调试之前,会自动在工程下添加 .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", "name": "vuejs: 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调试配置分享》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端小纠结--WebSocket实战
- 前端小纠结--约定式提交和自动生成`changelog`
- 前端小纠结--集成gitflow和standard-version使用
- 前端小纠结--IE11下SVG元素默认focusable=true
- 悟懂 MapReduce,不纠结
- 为什么你还在纠结于语法糖?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
粒子群优化算法及其工程应用
刘波 / 2010-8 / 28.00元
《粒子群优化算法及其工程应用》的主要内容是:粒子群优化(PSO)算法是一种基于群体智能的新兴演化计算技术,广泛用于解决科学研究和工程实践中的优化问题。《粒子群优化算法及其工程应用》主要阐述粒子群优化算法的基本理论及其在机械故障诊断和机械工程测试中的应用成果。全书共5章,第1至3章介绍了PSO算法的原理和各种改进、变体PSO算法的原理,第4章介绍了PSO算法在机械工程领域的应用,第5章介绍了PSO算......一起来看看 《粒子群优化算法及其工程应用》 这本书的介绍吧!
随机密码生成器
多种字符组合密码
RGB CMYK 转换工具
RGB CMYK 互转工具