debuggap,移动端调试新方式
最近发现了一个移动端调试的新技能,这里简单描述一下基本情况。
移动端调试常遇到的问题
手机访问只能看到页面的展现,除此之外看不到任何其他信息
无法像调试PC页面那么方便的查看js、dom、network、cookie、storage等信息
js调试只能通过alert来提示了,当然经验丰富的开发者,会制作一个简单的调试信息展示页面,相当于控制台的功能。
debuggap简介
run easily and debug powerfully
无需安装,就可以在windows、linux和mac上运行
跨平台支持(android、iOS、webOS、BlackBerry、windows phone等)
支持所有的HTML5框架(phonegap)和浏览器
支持快速的在节点上审查元素
可以同时debug多个设备
对于android设备支持单步调试
如何使用?
以windows为例
- 去官网下载debuggap软件(http://www.debuggap.com/)
- 解压压缩包,然后双击执行debuggap.exe文件
- 自动获取本机ip地址,自定义端口号11111,可以就行修改然后点击config,开始监听终端
- 在需要调试的项目中加入一段script标签,如:<script src="http://style.mc2113.com/dist/lib/js/util/debuggap.js”></script>
- 访问测试页面,会发现有一个蓝点,可以配置连接之前设置的服务器
- 经过上面的操作,就可以进行远程调试了
小技巧
进过尝试,发现客户端无法抓取页面进行调试,客户端会提示版本太低,必须是3.0.0以上才可以。遗憾的是本人并没有找到3.0.0以上的版本,就尝试把2.X版本的版本号改为3.0.0,结果真的可以用了。猜测没有进行特性检测,只是教研了version的值,所以各位可以修改一下版本进行使用。当然,如果谁有3.0.0以上版本,也麻烦告诉我一下,涨涨姿势,提前感谢。
上面给出的是网络上的一个资源,更多的版本可以尝试在github上找一下。
下面推荐更多移动调试的方式:
http://yujiangshui.com/multidevice-frontend-debug/