debuggap,移动端调试新方式

时间:2023-03-09 01:11:58
debuggap,移动端调试新方式

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

移动端调试常遇到的问题

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

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