前端小纠结--VS Code调试配置分享
栏目: JavaScript · 发布时间: 5年前
内容简介:这不是一篇科普文,只是一篇浏览器调试配置的分享(主要对准对准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,不纠结
- 为什么你还在纠结于语法糖?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Building Websites with Joomla!
H Graf / Packt Publishing / 2006-01-20 / USD 44.99
This book is a fast paced tutorial to creating a website using Joomla!. If you've never used Joomla!, or even any web content management system before, then this book will walk you through each step i......一起来看看 《Building Websites with Joomla!》 这本书的介绍吧!