测试网站在不同平台上的外观的最佳工具是什么,它们的优缺点是什么?

平面设计 网站设计 软件推荐 工具 网络安全
2022-02-21 10:48:42

测试网站在不同平台上的外观的最佳工具是什么,它们的优缺点是什么?

这包括了解我的布局/字体在各种浏览器和操作系统中的显示方式和功能,而不仅仅是布局如何适应不同的设备尺寸。

4个回答

测试网站在不同平台上的外观的最佳工具实际上是使用不同平台本身这意味着拥有所有设备并使用您的用户将使用的所有相关操作系统和浏览器。优点是每个选项都经过测试(如果正确完成)。缺点是购买所有设备可能相对昂贵,并且需要大量时间进行测试。

但是对每个设备/软件组合都这样做是相对不现实的。我鼓励您和您的公司尽可能多地这样做,尤其是打击主要用户的设备和软件。因此,这是我测试网站/网络应用程序的方式:

  • 对于一些测试(尤其是测试响应能力和页面加载/渲染),我使用 Chrome 的开发工具。这些都是很棒的工具,也是我最喜欢使用的工具。他们的开发工具对开发也有很大帮助,但那是题外话。

  • 在开发过程中,当网站的新“部分”完成时,我会定期在不同的浏览器和设备上测试网站。“一块”可以是一个完成的主题、一个新的动画集、一个新的交互元素等。这使得你实际上完成了这件作品,包括测试和在你说你完成之前的任何迭代。执行此操作时也要记住加载时间和性能。

  • 我喜欢与我的朋友和周围的其他人一起进行用户测试(基本上是让他们在您观看时使用您的网站/应用程序,然后向他们询问相关但有些笼统的问题),特别是如果他们是潜在用户。在原型设计/早期阶段以及后期阶段都可以这样做,以确保您不会将大量时间投入到无用的事情上。

  • 一旦一切都或多或少“完成”,我有时会使用验证服务和偶尔类似的工具来测试我的网站,但它不在我的“每次都必须完成”列表的顶部。

还有其他可以进行自动化测试的应用程序/工具可能很有用,但我个人还没有完成足够大的事情来需要它,并且您可以通过在不同的设备和平台本身上进行测试来获得更准确的结果,所以我没有曾经用过很多。

理想情况下,您的房间里会有一堆不同设备的测试人员。

您需要检查的一般事项:

  • 不同的浏览器
  • 不同的操作系统
  • 不同的设备
  • 不同的视口大小

这些可能会影响:

  • 布局
  • 排版
  • 功能性

在大多数情况下,您需要某种形式的要测试的实际软件。

这意味着您拥有物理设备,并安装了实际的浏览器软件。

这在很多情况下都很难做到。因此,我认为一个稳健但实用的设置可能是:

OSX 安装:

  • 最新的 Chrome、Safari、Firefox 浏览器。拇指驱动器单机版本的一个版本。
  • 用于虚拟测试 iOS 的 Xcode

Windows 安装:

  • 最新的 Chrome、Safari、Firefox 和 IE(叹气)浏览器。拇指驱动器单机版本的一个版本。(老版本的IE有点棘手……最好的办法是每个版本都运行一个虚拟机)
  • Android Studio 用于虚拟测试 Android 设备

如果您关心 Linux 用户,请安装 Linux(当然,我们都应该这样做。企业很少这样做。)

更进一步的是通过 VPN 工具为您提供对实际设备的“共享”访问的服务。但是,这些使用起来很痛苦……因为您实际上是在尝试通过网络延迟通过鼠标模拟触摸设备。但在某些情况下,它总比没有好。

就像 Zach 所说,理想情况下,您希望在特定设备/浏览器上进行测试并使用验证工具。但是,我发现使用browsershots.org也很有帮助。他们曾经有 IE 选项,但最近已将其从列表中删除。不幸的是,这只是显示您的界面的外观,并没有提供有关您网站的行为方式的任何功能。如果您只需要查看它的外观,那么它会很好地满足您的目的。希望有帮助!

谷歌浏览器

Windows 使用说明

  1. 按 F12
  2. 点击“切换设备模式”
  3. 选择您的设备并刷新页面

步骤 1 和 2

在此处输入图像描述

第 3 步

在此处输入图像描述

优点

  • 它运作良好

缺点

  • 有限的设备仿真选择?不确定这是否相关
  • 切换设备后被残忍强制刷新页面

安卓工作室

如果你真的想在混合中进行跨浏览器、跨平台、功能测试,那么我会推荐Android Studio

使用 Android Studio,您可以下载 Android-o-sphere 中可以想象的几乎任何设备的图像,并在虚拟环境中运行它们。启动虚拟环境后,您可以下载要测试的 Web 浏览器。

除了获得您想要测试的设备之外,这绝对是下一个最好的事情。

虚拟设备