• 0
  • 0
分享

  在PC上调试HTML页面时,经常用到firefox上的firebug和chrome上的DevTools,这两个工具帮助开发和测试在debug问题上提供了很大的便利。在当下移动互联网热的时代,无线端的HTML5的产品越来越多,面对纷繁复杂的浏览器环境(搜狗浏览器,chrome,手机自带,app等等),经常遇到一些诡异的问题,在定位问题时令开发和测试束手无策。那么在移动端,是否也有这样好用的工具呢?接下来为各位简要介绍两个好用的工具。

  在介绍之前,先简要说明一下,当前无线开发同学调试无线页面的过程。目前常用的方法是在chrome上设置移动UA,模拟移动设备。这种方式的好处是显而易见的,在PC浏览器上很方便进行现场调试,但有时遇到的一些兼容性的bug,在PC浏览器上是无法复现的。其中的一个原因是,手机厂商在自主研发过程中,会对android系统自带的浏览器进行二次开发,开发的结果存在差异。如:联想浏览器在地址栏里搜索关键词时,会保留换行符的功能;其他浏览器都会把换行符转换成空格。如果必须要在真实设备上进行调试,那如何操作呢?

  传统方式:

  1.可以在页面中加入一批alert语句,模拟断点功能。这种方式解决功能问题还可以,如果是兼容问题,就不灵了。

  2.使用fidder工具截包,修改包内容。

  调试利器一:Chrome DevTools

  1.Android手机允许USB调试。

  2.手机连接电脑,并允许调试。

  3.在PC chrome 浏览器地址栏中输入:chrome://inspect。

图1.jpg

  4.勾选 "Discover USB devices"。

  5.打开手机上chrome浏览器,并输入需要debug的网址,如:wap.sogou.com。

图2.jpg

  6.   在DevTools下的Devices可以看到移动端浏览器的链接。

图3.jpg

  7.点击 inspect,在PC上Chrome DevTools中即可看到手机端chrome的页面,PC端和手机端的操作是同步的。

图4.jpg

  8.debug case:修改"团购"为"美团"。

图5.jpg

  调试利器二:winre

  Weinre代表We b In spector Re mote,是一种远程调试工具。上一个工具,调试的局限性是,仅能在chrome中进行调试。而winre则适用于任何一个浏览器。

  配置过程如下(weinre介绍主页:http://people.apache.org/~pmuellr/weinre/docs/latest/):

  1. 下载weinre的bin文件,并解压到本地目录。

  2. 在PC上配置node环境,具体搭建方式请搜狗一下。

  3. 启动weinre服务:node weinre

图6.jpg

  4. 访问服务页面"http://10.129.152.246:8090",服务页面中有两项需要关注,调试窗口和要注入的js代码,见标红框。

图7.jpg

  5. 将Target Script的代码像引用正常js文件的一样,引入到被测试页面。如:

图8.jpg

  6. 在手机任意浏览器中访问被测试页面

  7. 在PC浏览器中,打开"debug client user interface"中的链接。在Elements中即可看到手机浏览器中的元素内容。

图9.jpg

  8. 调试case:将hello word 修改为 hello Sogou

图10.jpg

  9. 手机浏览器里:

图11.jpg


作者:搜狗测试 张健   

来源:51Testing软件测试网原创

  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          •   概述  在创业公司里,技术经理有时候也是需要去承当其他角色的责任的,比如说:  ·业务架构师  · 应用架构师  · Leader  · Owner  · 项目经理  为什么呢?因为好多互联网创业公司里,上面提到的角色是可能没有专职的,技术经理就是啥都要干的。而另外一种情况是,公司里承担这些角色的人做的不好或者由于并行的项目实在太多,这些角色无法同时处理好。  技术经理去做项目管理的事情,是很难避免的,所以你还是得掌握一些项目管理的知识的。  学习项目管理知识的重要性  除了知道技术经理懂一些项目管理的知识是工作需要之外,还得有一个认知:  项目管理...
            0 0 994
            分享
          • 1、引言小鱼:小屌丝,听说你最近作为你公司的面试官,开始进行面试了?小屌丝:那是~小鱼:这给你厉害的, 那我考考你小屌丝:鱼哥,别扯淡,有几个能经得住你的拷问??小鱼:这次就简单的聊几句小屌丝:那… 问吧…小鱼:咱俩聊一聊兼容性测试的关注点??小屌丝:就这啊, 我还以为多难呢。小鱼:对,就聊聊兼容性测试需要注意的点,看看你能说几个小屌丝:是否对浏览器兼容,是否对旧版本兼容,是否对系统兼容,是否对服务器兼容,是否对屏幕兼容,差不多就这些了。小鱼:就这些??小屌丝:已经不少了,一个兼容性测试点,难不成能有二三十个测试点?小鱼:对的,我大概捋一下,差不多还真二十多个,小屌丝:我屮艸芔茻,不会吧??小...
            1 2 12246
            分享
          •   当年我零基础转行到IT行业,薪酬翻倍,分享一些超有用的经验,希望对题主有所帮助。  首先,评估是否应该转行,最核心的点是要衡量「机会成本」,即评估转行后的职业前景、薪酬水平、岗位的契合度是否比当前行业的岗位好,毕竟转行意味着需要重新学习对应岗位的技能,花费很多时间和精力去积累相关经验,所以做好机会成本的评估很重要,这样可以避免转了之后后悔。  如何做好自我评估  做自我评估最核心的是这几个点:性格特质、兴趣爱好、天赋能力、过往经验。  就拿我当年的情况来说吧,我学的是会计专业,毕业后从事财务相关的工作。在做财务的三年间,总体印象是:财务起薪低,工作内容重复枯燥,行业也比较卷,看不到前景; ...
            0 0 365
            分享
          • selenium简介介绍  Selenium [1]  是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Google Chrome,Opera等。这个工具的主要功能包括:测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用户需求。支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本。功能框架底层使用JavaScript模拟真实用...
            1 1 1315
            分享
          •   提起外包公司,很多小伙伴都不是很看好,觉得外包公司没啥发展前途、受限很多、没有自主权......也因此认为在外包公司没办法让测试新手提高技能。  但这些担忧,真的都有道理吗?换句话说,这些担忧都是有根据的吗?今天,我们就来聊聊这个话题。  我的外包企业工作经历  在这个外包公司这个问题上,我认为主要还是取决于外包企业所服务的甲方公司究竟是谁。也就是说,外包和外包还是有区别的。根据这几年我在外包公司工作的经验来看,外包公司主要有这么两类:  人力外包企业  如果你所在的是人力外包公司,负责的是一家开放且重技术的甲方公司,就会让你觉得,你就是在甲方本公司工作。  不仅不会让你觉得没有前途、发展...
            0 0 1224
            分享
      • 51testing软件测试圈微信