目前为止找到最好的移动端调试工具-debugGap
发布于 4个月前 作者 think2011 2337 次浏览 来自 分享

一些牢骚

  • 在桌面端调试目前已经很方便了,结构查看、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
14 回复

收藏, 太好了, 开发微信用用看.

@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>
回到顶部