网页兼容性测试(工具使用IETESTER、Firefox、360安全浏览器)

网页兼容性测试主要是针对不同的浏览器进行的测试。由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题。对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常显示,因此要对编写出来的网页进行兼容性测试

  1. 点击【IETester】图标打开一个窗口,这个窗口跟浏览器类似。创建的浏览器页面默认展示的是IETester Home主页

     
  2. 在窗口的正上方,有一排写着“5、6、7、8、9”的黄色小方框,每个数字小方框对应的是不同的IE版本,鼠标移动上去就会有提示信息,提示这是IE几的环境

     
  3. 如点击IE6窗口就创建了一个IE6的浏览器标签,创建完成后就可以在输入框中输入要测试的网址,查看网址的显示是否正常。

     
  4. 虽然只是一款兼容性的测试工具,但是工具也包含了对IE浏览器属性的修改,在窗口顶部下方的导航tag下方选择【选项】点击,然后点击【Internet熟悉】就可以进行设置

     
  5. 在测试时缓存是一个很大的敌人,因为可能在未清除缓存的情况下,访问的不是最新的数据,这对测试结果造成了不确定性,所以在输入网之前要将缓存禁用了,禁用办法就是点击导航tag下方的【开发人员工具】找到【禁用缓存】点击它会高亮,这样就没有缓存的困扰了。

     
  6. 在浏览器的右侧底部【配色方案】点击下拉可以选择自己喜欢的浏览器颜色。


    二、接着是360浏览器,如果显示有差异,可以在页面上,右键单击--单击"查看源代码",可以了解代码运行的情况,如果觉得看得代码不够直观,可以使用Firefox 浏览器中Firebug工具


  1. 三、打 开Firefox 浏览器查看网页显示效果,同时我们也可以查看各个界面加载的代码是什么.单击,上方的"工具"--web开发者--Firebug--打开 Firebug.如果没有这个工具,去百度搜索下载这个组件,然后在Firefox 浏览器中工具--附加组件中添加

  2.  
  3. 打开Firebug后,在浏览器的下方,网站运行的代码.

     
  4. 鼠标经过相应代码上方时,该代码运行显示的效果上面显示是灰色,因此我们可以轻松地去确定显示有差异的效果的代码是什么,Firebug支持临时修改运行的代码,临时改变显示效果,我们根据效果再去修改文件的源代码.

     
  5. 其它浏览器的测试,我们可以参考CNZZ的统计数据与百度流量研究院的国内主流浏览器市场份额排行榜,去考虑选择哪些主流浏览器进行测试进而减少工作量.如下方2013年CNZZ的统计数据与百度流量研究院的统计数据

     

posted on 2016-01-18 08:45  张鱼  阅读(857)  评论(0编辑  收藏  举报

导航