一些牢骚
-
在桌面端调试目前已经很方便了,结构查看、CSS实时修改、网络请求、断点调试、性能检测、控制台…
-
但在移动端,额… 仿佛又回到了IE时代,最方便也只能到处 alert 来调试。
-
当然也可以安装虚拟机、Android、IOS真机远程调试等办法,但我不喜欢,我是个怕麻烦的人。
-
最后找到这一款应用 - DebugGap,还是基于 node-webkit 的,node.js爱好者表示\(^o^)/~。
介绍一下
- windows、mac、linux支持
- 凡是支持HTML5的都支持,不仅限手机内置浏览器,及应用或平台。
- 多设备调试
- 调试功能:
- Elements - css修改、结构查看
- Network - 网络请求查看
- Resources - cookie、本地存储查看
- Sources - 断点调试(据说目前仅支持android,未实测)
- Console - 控制台
第一步:
在需要调试的页面中引入 <script src="debuggap.js" type="text/javascript"></script>
。
第二步:
以下演示为 mac版,其他版本大同小异。
在电脑上运行 DebugGap.app
,接着输入 本机IP地址 和 自定义的端口。
第三步
访问页面,会发现页面上多了个蓝色按钮,点击后进入 config,配置地址为上述的地址。
最后
抬头望望电脑屏幕,你会发现已经配置完成了,那么就开始愉快的调试吧!
目前为止又找到更好的调试工具了,请各位看看browsersync
官网: debugGap
扩展: 移动端前端开发调试
时间: 2015年03月
博客: think2011
收藏, 太好了, 开发微信用用看.
非常优美
@think2011 我在页面也看到蓝色的LOGO,然后点击它。。。。 然后就没有然后了
@eastwoodwang 发生了什么事,跟原来代码的冲突了吗?
@eastwoodwang 我试了微信X5,UC等都可以呢,你的是什么平台和浏览器或者是webview
非常给力的东西
亲,这是你写的么?mac下面可以用safari,可以断点的
跟weinre相比呢?
@ijse 用过weinre,再用过DebugGap,你就会知道,哪个方便,哪个支持性好
DebugGap 单步调试视频 但是只支持chrome 或者 Android 4.4+,跟默认chrome调试一样
强人
在国产Android手机中,由于公司对Android进行了深度的定制,吧webview搞得五花八门,对于经过测试, 对国产小米,魅族,腾讯X5,百度T5,U3等,都支持很好,更不用说safari,webos,blackberry等官方支持的
在手机浏览器里页面看到蓝色的LOGO,然后点击它。。。。 没有反应
@zb188 在android默认的浏览器里面,是有点小问题,要拖到几下蓝色logo,才会有反应,不知道为什么。 但是你也可以通过其他方式来运行,比如直接在debuggap后面加远程调试服务器地址 <script src=“debuggap.js?192.168.1.4:11111” type=“text/javascript”></script>
我的控制台让更新版本到 3.0.0, 能否分享下最新的版本或者怎么改掉版本号,谢谢各位
mark
DebugGap出了IDE,世上最强,秒杀Sublime,webStrom等,还是免费 https://cnodejs.org/topic/56ceec3b89ec189c4d4be197