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

移动端调试常遇到的问题

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

无法像调试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. 【转】Windows下使用VS2008编译OpenCV 2.1 添加Intel TBB和Python支持

    Windows下使用VS2008编译OpenCV2.1 添加Intel TBB和Python支持 步骤: 1.仔细阅读OpenCV官网上的InstallGuide:http://opencv.will ...

  2. Spring的StringUtils工具类

    本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址:<Spring的StringUtils工具类> org.springframework.util.StringU ...

  3. WINDOWS BITLOCK

    BitLocker是什么? Windows BitLocker驱动器加密通过加密Windows操作系统卷上存储的所有数据可以更好地保护计算机中的数据.BitLocker使用TPM帮助保护Windows ...

  4. zepto笔记

    $.contains: 判断节点是否存在的很好方式[另一个提供类似功能的函数是has] $.grep: 过滤数组 $.type: 获取变量类型 $.closest: 返回最先匹配到的祖先元素 $.ma ...

  5. (转)利用ant在Mac 下自动化打包签名Android程序

    1.创建一个android项目 参数说明:-k /--package 为命名空间(包名)-a /--name 工程名-p /--path 项目 -t 为目标平台的版本编号 命令:./android c ...

  6. HDOJ1251-统计难题(trie树入门)

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  7. Foreach语法

    先看例子: Random rand = new Random(47); float f[] = new float[10]; for(int i = 0; i < 10; i++){ f[i] ...

  8. Java基础知识强化44:StringBuffer类之把数组拼接成指定格式的字符串的案例

    1. 先看案例代码如下: package cn.itcast_07; /* * 把数组拼接成一个字符串 */ public class StringBufferTest2 { public stati ...

  9. 2、第2节课html教程客户端控件/css第一课/20150917

    1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...

  10. OD: Windows Security Techniques & GS Bypassing via C++ Virtual Function

    Windows 安全机制 漏洞的万源之本在于冯诺依曼设计的计算机模型没有将代码和数据进行区分——病毒.加壳脱壳.shellcode.跨站脚本攻击.SQL注入等都是因为计算机把数据和代码混淆这一天然缺陷 ...