最近发现了一个移动端调试的新技能,这里简单描述一下基本情况。

移动端调试常遇到的问题

手机访问只能看到页面的展现,除此之外看不到任何其他信息

无法像调试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为例

  1. 去官网下载debuggap软件(http://www.debuggap.com/
  2. 解压压缩包,然后双击执行debuggap.exe文件
  3. 自动获取本机ip地址,自定义端口号11111,可以就行修改然后点击config,开始监听终端
  4. 在需要调试的项目中加入一段script标签,如:<script src="http://style.mc2113.com/dist/lib/js/util/debuggap.js”></script>
  5. 访问测试页面,会发现有一个蓝点,可以配置连接之前设置的服务器
  6. 经过上面的操作,就可以进行远程调试了

小技巧

进过尝试,发现客户端无法抓取页面进行调试,客户端会提示版本太低,必须是3.0.0以上才可以。遗憾的是本人并没有找到3.0.0以上的版本,就尝试把2.X版本的版本号改为3.0.0,结果真的可以用了。猜测没有进行特性检测,只是教研了version的值,所以各位可以修改一下版本进行使用。当然,如果谁有3.0.0以上版本,也麻烦告诉我一下,涨涨姿势,提前感谢。

上面给出的是网络上的一个资源,更多的版本可以尝试在github上找一下。

下面推荐更多移动调试的方式:

http://yujiangshui.com/multidevice-frontend-debug/

https://github.com/jieyou/remote_inspect_web_on_real_device?utm_campaign=email_admin&utm_source=trigger-email&utm_medium=email

debuggap,移动端调试新方式的更多相关文章

  1. 移动端调试利器 JSConsole 介绍

    先看这篇文章 Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议. 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天 ...

  2. Eruda 一个被人遗忘的移动端调试神器

    引言 ​ 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler.Charles.chrome devtools.Firebug ...

  3. IM开发基础知识补课(七):主流移动端账号登录方式的原理及设计思路

    1.引言 在即时通讯网经常能看到各种高大上的高并发.分布式.高性能架构设计方面的文章,平时大家参加的众多开发者大会,主题也都是各种高大上的话题——什么5G啦.AI人工智能啦.什么阿里双11分分钟多少万 ...

  4. Linux内核调试的方式以及工具集锦【转】

    转自:https://blog.csdn.net/gatieme/article/details/68948080 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  5. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  6. Linux内核调试的方式以及工具集锦

    原文:https://blog.csdn.net/gatieme/article/details/68948080 CSDN GitHubLinux内核调试的方式以及工具集锦 LDD-LinuxDev ...

  7. 通过xib加载UITableViewCell的新方式

    我们以前通常会这样做 - (UITableViewCell  *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPa ...

  8. Visual Studio 2012 应用软件开发新方式

    微软正式发布Visual Studio 2012 应用软件开发新方式 2012-09-13 09:54 51CTO.com 我要评论(0) 字号:T | T “现在,开发者将有更好的机会开发与云服务连 ...

  9. cas sso单点登录系列3_cas-server端配置认证方式实践(数据源+自定义java类认证)

    转:http://blog.csdn.net/ae6623/article/details/8851801 本篇将讲解cas-server端的认证方式 1.最简单的认证,用户名和密码一致就登录成功 2 ...

随机推荐

  1. PHPSTORM实用快捷键

    alt + F7 find usages 功能,可以很方便的找到函数在哪里调用了 Ctrl + E 可查看最近打开文件或项目 项目名右键选择"Local History | Show His ...

  2. Android的Recovery中font_10x10.h字库文件制作

    任务是要汉化Android中的Recovery,就了解了bootable/recovery/minui/font_10x18.h这个英文字库的来历,最终汉化的时候并没有自己汉字字库,用的github上 ...

  3. [Angular 2] @Input Custom public property naming

    TodoList.ts: @Component({ selector: 'todo-list', directives: [TodoItemRenderer], template: ` <ul& ...

  4. UIView层次管理bringSubviewToFront,sendSubviewToBack

    将一个UIView显示在最前面只需要调用其父视图的 bringSubviewToFront()方法. 将一个UIView层推送到背后只需要调用其父视图的 sendSubviewToBack()方法. ...

  5. java设计模式---原型模式

    原型模式(Prototype):用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式结构图 通俗来说:原型模式就是深拷贝和浅拷贝的实现. 浅拷贝 只实现了值拷贝,对于引用对象还是 ...

  6. USB挂起与唤醒.

    USB可见设备状态分为连接(Attached),上电(Powered),默认(Default),地址(Address),配置(Configured)和挂起(Suspended)6个状态.所谓可见,即U ...

  7. Hibernate项目里配置环境时,jar包配置不当会对测试结果产生影响。

    问题情况: 如下图所示,该图中,显示了一堆错误的jar包.这是导致了Junit4测试通过了,数据库却没反应的原因. 原因: 之所以出现这种情况,eclipse其实已经告诉了我们原因.如下图所示,这些j ...

  8. Messager( 消息窗口) 组件

    一. 加载方式消息窗口提供了不同的消息框风格,包含 alert(警告框).confirm(确认框).prompt(提示框).progress(进度框)等.所有消息框都是异步的,用户可以在交互消息之后使 ...

  9. Oracle物理结构与逻辑结构

    有一张图能非常清晰的表示出Oracle物理结构与逻辑结构的区别:如下图:   对上图的解释:每个数据库都必须由一个或多个表空间组成.(一对多关系)每个表空间都必须由一个或多个数据文件(data fil ...

  10. php+js 瀑布流源码

    官方网站:更多源码 新浪微博:QQ公众号 QQ:各种源码 602902342 大牛技术群: 452207697 下载地址:http://pan.baidu.com/s/1bnNipI3 密码: h93 ...