移动端 Web 测试调试工具详解

来源：http://www.51testing.com/

背景

　　虽然移动端Web有着天生的HTML5特性，但是硬件显示环境的差异、各浏览器实现标准的方式的差异让开发人员不得不花很多时间在测试与调试上。

　　从简单的JSConsole到跨平台的Weinre再到强大的Ghostlab，再加上各种官方的调试工具，开发测试人员通常需要根据不同的场景使用不同的策略。

　　本文从实际需求出发，通过对测试调试工具的基本原理的解释，对最具代表性的工具进行了分类，为大家的开发测试策略提供帮助。

　移动端测试调试工具的三种需求

　　代码同步：在编辑器中修改代码，在移动端自动更新并看到效果。

　　动作同步：在PC上点击按钮或跳转页面，各个移动测试设备执行相同的动作，测试人员可以直接看到效果。

　　调试功能：在移动端浏览器缺乏官方调试工具的情况下，通过JS模拟控制台、元素查看器、样式编辑器。

　实现原理

　　对移动端代码的检测与控制，主要由以下三个部分构成：

　　目标控制器 (Target)：通常是嵌入到页面中的JavaScript代码，读取页面的状态，发送到调试服务器，接收并执行调试服务器的指令。

　　调试服务器 (Server)：负责接收目标控制器传来的页面信息，通过调试客户端去展现给开发者，并将调试客户端发出的指令传递给目标控制器去执行。

　　调试客户端 (Client) : 负责提供UI去操作调试服务器，展示页面信息，驶入调试指令。

　目标控制器的几种实现方法：

　　向目标页面中加入一个指向调试服务器的Script标签，通过引入外部JS代码实现控制。这样做最简单且支持最广泛，缺点是需要改动代码。

　　使用iFrame包装目标页面

　　使用混合应用包装目标页面

　　通过调试服务器建立代理站点

　　（图中显示weinre调试器使用JS修改了Firefox中的console.log方法，将输出结果发往调试服务器，并最终在Chrome中的调试客户端中显示出来）

　　调试服务器可以分为两种：

　　开发机本地。可以是NodeJs、PHP的Server，或者桌面端浏览器的内置服务。

　　远程。使用工具厂商提供的调试服务器，无需在自己在本地开启。

　调试客户端分为以下几种：

　　1.调试服务器提供的网页

　　2.浏览器插件

　　3.桌面端应用

　　4.命令行

　　5.典型工具集合

　　6.下面是笔者经过考察实践后得到的常见测试调试工具的集合。

　　7.主要从以下角度进行分析：

　　8.调试服务器类型

　　9.调试客户端类型

　　10.目标页面控制方式

　　11.目标范围

　　12.功能特性

　推荐

　　Weinre无疑是最强大的JS模拟调试器，由于使用了Inspector的UI代码，使用起来很顺手，而且支持各种Web场景。商用的Ghostlab和Adobe Edge Inspect也使用Weinre作为其调试功能，可见其地位。

　　GhostLab现在推出了Windows版，调试与同步功能兼具，应用面广，是首推的综合解决方案。但是它的Server在桌面端，并且使用代理站点，在公司的网络环境下使用受限。

　　官方调试器拥有最强大的功能，与桌面端基本相同，可以在开发初期使用，配合LiveStyle和Emmet实现同步快速开发。

　总结

　　移动Web开发本身的复杂性决定了我们不能找到一种完美的测试调试解决方案，但我们可以根据基本原理对工具进行分类，记录整理之后，根据实际情况选取最优策略。