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

移动端调试常遇到的问题

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

无法像调试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. Python学习日志(六)

    字符串的方法及注释 字符串转义字符含义 字符串格式化符号含义 eg:'a'的ASCii码是97 格式化操作符辅助指令 format()字符串格式化方法 字符串的格式化是指统一字符串格式 format( ...

  2. XAMPP的MYSQL无法启动

    昨天用各种方式试验MYSQL的数据库备份与恢复操作,恢复过程中,MYSQL就无法启动了. 提示如下: 22:59:43 [mysql] Attempting to start MySQL app... ...

  3. SEO_Alexa排名

    1.Alexa排名是评价某一网站访问量的一个指标,对SEO优化没有任何作用,这个数据是可以做假的,考虑Alexa排名纯粹是在浪费时间. 2.Alexa排名是针对已经在浏览器中安装了Alexa Tool ...

  4. HRBUST 1987 逃课的孩子

    Sol:HASH + 二分  字符串处理,很基础的操作. 题意很明确就是找重复的次数统计下,范围比较大1≤n≤10000,1≤m≤10000. #include <cstdio> #inc ...

  5. android后台截屏实现(2)--screencap源码修改

    首先找到screencap类在Android源码中的位置,/442/frameworks/base/cmds/screencap/screencap.cpp 源码如下: /* * Copyright ...

  6. fetch策略

    @OneToMany(mappedBy="image",cascade=CascadeType.ALL,fetch=FetchType.EAGER) @Fetch(value=Fe ...

  7. 升级Android ADT 和SDK

    因为眼下从事android开发工作,所以升级了下Android SDK和eclipse ADT插件 一.更新ADT 1.Eclipse中打开Help->Install New Software. ...

  8. 挂载(mount)深入理解

    首先引用一句 wiki 上的定义来开篇: Mounting takes place before a computer can use any kind of storage device (such ...

  9. WEB服务健康状态检测

    #!/bin/sh #date:2015-12-07 #filename:check_web.sh #作者:lixingli #Email:1162572407@qq.com #version:v1. ...

  10. django: template using & debug

    模板的作用方法有如下三种: blog/views.py: from django.template import loader, Context, Template from django.http ...