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

移动端调试常遇到的问题

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

无法像调试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. writev/readv

    ```cpp#include <sys/uio.h>ssize_t readv(int fd, const struct iovec *iov, int iovcnt);ssize_t w ...

  2. PHPSTORM实用快捷键

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

  3. 使用CXF+spring创建一个web的接口项目

    一.web project整合spring 1.1.打开Myeclipse,建立web project(eclipse为dynamic web project),使用J2EE5.0. 1.2.加入Sr ...

  4. Sass运算

    加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算.加法运算是 Sass 中运算中的一种,在变量或属性中 ...

  5. Android系统中长按事件的实现机制解析

    在Android的触摸消息中,已经实现了三种监测,它们分别是 1)pre-pressed:对应的语义是用户轻触(tap)了屏幕 2)pressed:对应的语义是用户点击(press)了屏幕 3)lon ...

  6. [c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息

    上一篇已经把所有消息封装且都各自有方法处理了,这篇从使用第一步——关注开始,  关注之后进行消息记录,同时回复文本消息给用户,关注方法:DoSub,另外新用户扫描带参数的二维码关注方法:DoCodeN ...

  7. nginx_http核心模块(二)

    对一些常用的配置项做一些解释:详细请看官方文档:http://nginx.org/en/docs/http/ngx_http_core_module.html 1. alias Syntax: ali ...

  8. 3步学会用gulp

    1.安装gulp 安装gulp到全局:npm install -g gulp 安装gulp到某个项目:npm install --save gulp 注意:请先安装nodejs(自带npm) 2.创建 ...

  9. PHPExcel用法有感

    今日项目需求导出excel.我用最简单的header头方式导出了,但是需求部门退回了,说不满足他们的需求,需要我按照他们的模板来导出. 然后想到了PHPExcel,没用过,走了不少弯路. 1.去官网下 ...

  10. WF学习

    1.添加argument 类的argument必须先在表达式里面实例化 argument和variable 没有区别啊??????? http://msdn.microsoft.com/en-us/l ...