我需要最好的响应式网站测试工具

时间:2015-03-24 22:45:16

标签: testing responsive-design web-frontend

我正在寻找最好的应用程序,在线工具或任何存在的东西来完全测试我正在处理的响应式网站的兼容性。我需要检查屏幕尺寸,浏览器和设备。

是否有一个工具可以在一个平台上统一所有测试?我真的需要它。

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

首先,很难说一个特定的工具是解决您所有问题的最佳工具,因为响应型网站有很多方面,例如

1。断点

断点是站点内容根据浏览器宽度和屏幕分辨率进行调整以向用户提供最佳观看体验的点。这是测试响应式网站最被忽略的方面之一,从而导致页面中出现很多渲染问题。测试断点的边界以查看页面何时进行调整很重要。

2。图像尺寸优化

这是我们尝试根据观看尺寸缩放图像的概念。有多种技术可以从代码中执行此操作。我们需要进行重点测试,以查看图像是否可以正确显示在不同页面上。

3。页面加载时间

由于多种因素,响应式网站的客户端往往具有很多Javascript,CSS,HTML。这通常对页面加载时间有很大影响。谷歌最近进行的一项研究发现,如果页面加载时间超过3秒,则53%的用户会离开您的网站。在这种情况下,在将页面发布给客户之前,对页面进行性能测试就变得至关重要。

我已经发表了一篇关于同一主题的文章。因此,希望以下详细信息可以对您有所帮助。

测试响应式网站的不同方法和工具

浏览器工具 –这是用于获取有关网页的不同类型信息的最广泛使用的策略之一。

例如-以Chrome浏览器为例。如果您在Mac上按“ Command + Option + C”或在Windows PC上按“ Control + Shift + C”,它将打开一个包含各种选项卡的浏览器控制台。测试人员更广泛使用的3个标签是:

元素 –此选项卡显示页面的所有客户端JavaScript,CSS和HTML元素。测试人员甚至可以更改页面的CSS,并查看不同的更改如何影响页面。

控制台 –此选项卡显示页面中存在的所有警告和错误。双击它们,将打开一个窗口,显示有关发生错误的文件和行号的信息

Performance (性能) –此选项卡提供选项,以记录通过不同页面的不同流,并显示与用户交互期间访问的每个页面相关的页面加载时间,屏幕截图和其他相关性能信息

Chrome扩展程序 Chrome网上应用店提供了许多免费插件,可用于测试自适应网站的各个方面。一些受欢迎的插件是:

  • 响应式Web设计测试器

  • 视口缩放器

  • 移动/响应式Web设计测试器

  • 响应式查看器

  • 响应式设计测试仪

  • 响应者

  • 分辨率测试

  • Window Resizer

  • 图像尺寸信息

  • 响应式检查器

  • 用户代理切换器

  • YSlow

  • 简单图像缩放器

检查屏幕断点的工具 除了上述某些工具外,还有一些特定的工具可用于检查网页不同断点的边界:

进行跨浏览器测试的工具

由于浏览器,操作系统版本,设备和屏幕尺寸的组合如此之多,有时更容易同时测试多种尺寸的网页以节省时间。有一些工具可以为您提供此功能:

-Raj

Testim

答案 1 :(得分:-1)

查看浏览器堆栈。您需要查看this page以查看移动部分。