一 背景
目前主流的H5调试还都是通过手机插线链接电脑进行调试,以Android为例,通过USB链接电脑,然后通过chrome://inspect/#devices实现手机的远程调试。但是存在一些问题,主要体现在
1:便利性:设备需要安装ADB相关调试环境,需要一定的Android开发背景
2:可用性:Chrome调试经常需要翻墙更新,不然打开白屏
3:稳定性:USB链接容易断,稳定性差
4:不支持无线:通过USB的方式,需要连线,不能远程调试
这里我介绍下一些常用的无线调试技术方案 。
二 无线调试技术
1. vorlon(面向开发)
Vorlon是微软出品的一个开源的、可扩展的、平台无关的JavaScript远程调试工具。采用Node.js和socket.io技术。使用它,我们可以通过浏览器远程inspect、debug、test任何设备上的js代码。官网:链接,github:链接。
首先,我们需要通过npm安装Vorlon的服务端控制程序。
npm i -g vorlon
安装成功之后,通过一个简单的命令即可启动Vorlon服务。
vorlon
启动成功后,如果是在本机打开的服务,则在浏览器端打开 http://localhost:1337 即可看到Vorlon的控制面板。
这个时候,只需要待调试页面端引用下面的脚步,就可以实现调试,
效果如下:
2. Eruda(面向测试)
Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等。地址:链接,
主要面向测试同学进行日常测试问题反馈。
引用方式:
eruda.init();
三 volor的高级用法
1. 功能
1.1 console: 查看console日志, 执行js
1.2 modernizr: 查看当前支持的和不支持的一些api特性
1.3 DOM Explorer: dom树查看和修改
1.4 Object Explorer:展示当前的js对象树
1.5 Best Practices: web开发的一些建议
1.6 Network Monitor:网络监控
1.7 Resources Explorer: storage和cookie查看
1.8 Device Information:设备信息查看