我需要最好的响应式网站测试工具
I need the best responsive website test tool
我正在寻找最好的应用程序、在线工具或任何现有的工具来全面测试我正在使用的响应式网站的兼容性。我需要检查屏幕尺寸、浏览器、设备。
有没有一个平台可以统一所有测试的工具？
查看浏览器堆栈。您需要查看 this page 以检查移动部分。
首先，很难说一个特定的工具是解决所有问题的最佳工具，因为响应式网站有很多方面，例如
1。断点
断点是站点内容根据浏览器宽度和屏幕分辨率进行调整以向用户提供最佳观看体验的点。这是测试响应式网站时最容易被忽视的方面之一，会导致页面出现大量渲染问题。测试断点的边界以查看页面何时自行调整很重要。
2。图片大小优化
这是我们尝试根据观看尺寸来缩放图像的概念。有多种技术可以从代码中做到这一点。我们需要进行重点测试，以查看图像在不同页面上是否正确呈现。
3。页面加载时间
由于多种因素，响应式网站往往在客户端有很多Javascript、CSS、HTML。这通常会对页面加载时间产生相当大的影响。 Google 最近进行的一项研究发现，如果页面加载时间超过 3 秒，53% 的用户会离开您的网站。在这种情况下，在我们将页面发布给客户之前对页面进行性能测试变得非常重要
我发表了一篇关于完全相同主题的文章。所以希望下面的细节可以帮助到你。
测试响应式网站的不同方法和工具
浏览器工具 – 这是使用最广泛的策略之一，用于获取有关网页的不同类型的信息。
例如 – 让我们以 Chrome 浏览器为例。如果您在 Mac 上按“Command+Option+C”或在 Windows PC 上按“Control+Shift+C”，它将打开一个包含各种选项卡的浏览器控制台。测试人员更广泛使用的 3 个选项卡是：
Elements – 此选项卡显示页面的所有客户端 JavaScript、CSS 和 HTML 元素。测试人员甚至可以改变页面的 CSS 并查看不同的变化对页面有何影响。
Console – 此选项卡显示页面中出现的所有警告和错误。双击它们会打开 window，显示有关发生错误的文件和行号的信息
性能 – 此选项卡提供选项来记录通过不同页面的不同流量并显示页面加载时间、屏幕截图和与用户交互期间访问的每个页面相关的其他相关性能信息
Chrome 扩展
Chrome 网上商店提供了各种免费插件，可用于测试响应式网站的不同方面。一些流行的插件是：
响应式网页设计测试仪
视口调整器
Mobile/Responsive 网页设计测试员
响应式查看器
响应式设计测试员
响应者
分辨率测试
Window 缩放器
图片大小信息
响应检查员
用户代理切换器
Y慢
简单图像缩放器
检查屏幕断点的工具
除了上面提到的一些工具之外，还有一些特定的工具可用于检查网页不同断点的边界：
- Matt Kersley 的工具 – http://mattkersley.com/responsive/
- ScreenFly – http://quirktools.com/screenfly/
- 回复者 – https://www.responsinator.com/
- 响应式px- http://responsivepx.com/
- 有响应 – http://www.isresponsive.com/
进行跨浏览器测试的工具
由于浏览器、OS 版本、设备和屏幕尺寸的组合如此之多，有时更容易同时在多种外形规格上测试网页以节省时间。有一些工具可以为您提供此功能：
- Adobe Edge 检查 – https://www.adobe.com/products/edge-inspect.html
- 浏览器堆栈 – https://www.browserstack.com/
- 跨浏览器测试 – https://crossbrowsertesting.com/
- 幽灵实验室 – https://www.vanamco.com/ghostlab/
我正在寻找最好的应用程序、在线工具或任何现有的工具来全面测试我正在使用的响应式网站的兼容性。我需要检查屏幕尺寸、浏览器、设备。
有没有一个平台可以统一所有测试的工具？
查看浏览器堆栈。您需要查看 this page 以检查移动部分。
首先，很难说一个特定的工具是解决所有问题的最佳工具，因为响应式网站有很多方面，例如
1。断点
断点是站点内容根据浏览器宽度和屏幕分辨率进行调整以向用户提供最佳观看体验的点。这是测试响应式网站时最容易被忽视的方面之一，会导致页面出现大量渲染问题。测试断点的边界以查看页面何时自行调整很重要。
2。图片大小优化
这是我们尝试根据观看尺寸来缩放图像的概念。有多种技术可以从代码中做到这一点。我们需要进行重点测试，以查看图像在不同页面上是否正确呈现。
3。页面加载时间
由于多种因素，响应式网站往往在客户端有很多Javascript、CSS、HTML。这通常会对页面加载时间产生相当大的影响。 Google 最近进行的一项研究发现，如果页面加载时间超过 3 秒，53% 的用户会离开您的网站。在这种情况下，在我们将页面发布给客户之前对页面进行性能测试变得非常重要
我发表了一篇关于完全相同主题的文章。所以希望下面的细节可以帮助到你。
测试响应式网站的不同方法和工具
浏览器工具 – 这是使用最广泛的策略之一，用于获取有关网页的不同类型的信息。
例如 – 让我们以 Chrome 浏览器为例。如果您在 Mac 上按“Command+Option+C”或在 Windows PC 上按“Control+Shift+C”，它将打开一个包含各种选项卡的浏览器控制台。测试人员更广泛使用的 3 个选项卡是：
Elements – 此选项卡显示页面的所有客户端 JavaScript、CSS 和 HTML 元素。测试人员甚至可以改变页面的 CSS 并查看不同的变化对页面有何影响。
Console – 此选项卡显示页面中出现的所有警告和错误。双击它们会打开 window，显示有关发生错误的文件和行号的信息
性能 – 此选项卡提供选项来记录通过不同页面的不同流量并显示页面加载时间、屏幕截图和与用户交互期间访问的每个页面相关的其他相关性能信息
Chrome 扩展 Chrome 网上商店提供了各种免费插件，可用于测试响应式网站的不同方面。一些流行的插件是：
响应式网页设计测试仪
视口调整器
Mobile/Responsive 网页设计测试员
响应式查看器
响应式设计测试员
响应者
分辨率测试
Window 缩放器
图片大小信息
响应检查员
用户代理切换器
Y慢
简单图像缩放器
检查屏幕断点的工具 除了上面提到的一些工具之外，还有一些特定的工具可用于检查网页不同断点的边界：
- Matt Kersley 的工具 – http://mattkersley.com/responsive/
- ScreenFly – http://quirktools.com/screenfly/
- 回复者 – https://www.responsinator.com/
- 响应式px- http://responsivepx.com/
- 有响应 – http://www.isresponsive.com/
进行跨浏览器测试的工具
由于浏览器、OS 版本、设备和屏幕尺寸的组合如此之多，有时更容易同时在多种外形规格上测试网页以节省时间。有一些工具可以为您提供此功能：
- Adobe Edge 检查 – https://www.adobe.com/products/edge-inspect.html
- 浏览器堆栈 – https://www.browserstack.com/
- 跨浏览器测试 – https://crossbrowsertesting.com/
- 幽灵实验室 – https://www.vanamco.com/ghostlab/