本文章转载于搜狗测试
在PC上调试HTML页面时,经常用到firefox上的firebug和chrome上的DevTools,这两个工具帮助开发和测试在debug问题上提供了很大的便利。在当下移动互联网热的时代,无线端的HTML5的产品越来越多,面对纷繁复杂的浏览器环境(搜狗浏览器,chrome,手机自带,app等等),经常遇到一些诡异的问题,在定位问题时令开发和测试束手无策。那么在移动端,是否也有这样好用的工具呢?接下来为各位简要介绍两个好用的工具。
在介绍之前,先简要说明一下,当前无线开发同学调试无线页面的过程。目前常用的方法是在chrome上设置移动UA,模拟移动设备。这种方式的好处是显而易见的,在PC浏览器上很方便进行现场调试,但有时遇到的一些兼容性的bug,在PC浏览器上是无法复现的。其中的一个原因是,手机厂商在自主研发过程中,会对android系统自带的浏览器进行二次开发,开发的结果存在差异。如:联想浏览器在地址栏里搜索关键词时,会保留换行符的功能;其他浏览器都会把换行符转换成空格。如果必须要在真实设备上进行调试,那如何操作呢?
传统方式:
可以在页面中加入一批alert语句,模拟断点功能。这种方式解决功能问题还可以,如果是兼容问题,就不灵了。
使用fidder工具截包,修改包内容。
调试利器一:ChromeDevTools
Android手机允许USB调试。
手机连接电脑,并允许调试。
在PC chrome 浏览器地址栏中输入:chrome://inspect。
勾选 “Discover USB devices”。
打开手机上chrome浏览器,并输入需要debug的网址,如:wap.sogou.com。
在DevTools下的Devices可以看到移动端浏览器的链接。
点击 inspect,在PC上Chrome DevTools中即可看到手机端chrome的页面,PC端和手机端的操作是同步的。
debug case:修改“团购”为“美团”。
调试利器二:winre
Weinre代表We b In spector Re mote,是一种远程调试工具。上一个工具,调试的局限性是,仅能在chrome中进行调试。而winre则适用于任何一个浏览器。
配置过程如下(weinre介绍主页:http://people.apache.org/~pmuellr/weinre/docs/latest/):
下载weinre的bin文件,并解压到本地目录。
在PC上配置node环境,具体搭建方式请搜狗一下。
启动weinre服务:node weinre
访问服务页面“http://10.129.152.246:8090”,服务页面中有两项需要关注,调试窗口和要注入的js代码,见标红框。
将Target Script的代码像引用正常js文件的一样,引入到被测试页面。如:
在手机任意浏览器中访问被测试页面
在PC浏览器中,打开“debug client user interface”中的链接。在Elements中即可看到手机浏览器中的元素内容。
调试case:将hello word 修改为 hello Sogou
手机浏览器里: