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

Question

我正在寻找最好的应用程序、在线工具或任何现有的工具来全面测试我正在开发的响应式网站的兼容性。我需要检查屏幕尺寸、浏览器、设备。

有没有一种工具可以在一个平台上统一所有测试？

Answer 1

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

1.断点

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

2. 图像尺寸优化

这是我们尝试根据观看尺寸制作图像比例的概念。从代码中有多种技术可以做到这一点。我们需要进行重点测试，以查看图像在不同页面上是否正确呈现。

3.页面加载时间

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

我发表了一篇关于完全相同主题的文章。所以希望下面的细节可以帮助你。

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

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

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

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

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

性能- 此选项卡提供了记录不同页面的不同流量的选项，并显示与用户交互期间访问的每个页面相关的页面加载时间、屏幕截图和其他相关性能信息

Chrome 扩展 作为 Chrome 网上商店的一部分，有各种免费插件可用于测试响应式网站的不同方面。一些流行的插件是：

• 响应式网页设计测试员

• 视口调整器

• 移动/响应式网页设计测试员

• 响应式查看器

• 响应式设计测试仪

• 负责人

• 分辨率测试

• 窗口调整器

• 图像尺寸信息

• 响应式检查员

• 用户代理切换器

• 慢

• 简单的图像调整器

检查屏幕断点 的工具 除了上面提到的一些工具之外，还有一些特定的工具可用于检查网页不同断点的边界：

• Matt Kersley 的工具 - http://mattkersley.com/responsive/
• ScreenFly - http://quirktools.com/screenfly/
• 负责人 – https://www.responsinator.com/
• 响应式像素 - http://responsivepx.com/
• isResponsive – http://www.isresponsive.com/

进行跨浏览器测试的工具

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

• Adobe Edge Inspect – https://www.adobe.com/products/edge-inspect.html
• BrowserStack – https://www.browserstack.com/
• CrossBrowserTesting – https://crossbrowsertesting.com/
• 鬼实验室 - https://www.vanamco.com/ghostlab/

Answer 2

查看浏览器堆栈。您需要查看此页面以查看移动部分。