如何在不同的浏览器中测试WordPress网站

您是否要在其他浏览器中测试WordPress网站？在更改WordPress主题或实施新设计时，跨浏览器测试非常重要，因为它可以帮助您确保您的网站在所有不同的浏览器，屏幕尺寸，操作系统和移动设备上都看起来不错。在本文中，我们将向您展示如何在不同的浏览器中轻松测试WordPress网站。

什么是跨浏览器测试？

跨浏览器测试是跨多个浏览器，操作系统，屏幕尺寸和移动设备测试网站的过程，以确保您的网站在所有不同的Web浏览器上都能正常运行。

为什么要在不同的浏览器中测试WordPress网站？

谷歌浏览器是全球最受欢迎的网络浏览器，在台式机和移动设备上的市场份额分别为65％和57％。但是，其他浏览器（如Firefox，Microsoft Edge，Safari和Opera）仍被全球数亿用户广泛使用。

由于浏览器，操作系统和设备种类繁多，跨浏览器测试已成为构建网站的重要组成部分。跨浏览器测试可帮助您跨不同的浏览器，设备和平台为所有用户提供一致的Web体验。

尽管所有流行的浏览器在呈现网页时的行为几乎相同，但是它们都使用不同的代码，这意味着它们可能会不时对网站元素进行不同的处理。

作为网站所有者，这意味着您的网站在各种浏览器中看起来可能有所不同。由于这些不是所有人都可以看到的常见WordPress错误，因此您可能要花几个月的时间才知道这个问题，直到有人举报。

这就是为什么在多个平台和屏幕大小不同的浏览器上测试WordPress网站被视为最佳实践的原因，因此您可以确保您的网站为所有用户提供相同的用户体验。

现在，大多数人没有访问各种各样的设备来测试网站。即使您设法从朋友那里借用了多个设备，手动来回切换也需要大量工作。幸运的是，存在跨浏览器测试工具，这些工具只需单击即可帮助自动化该过程。

但是，在我们共享WordPress最佳跨浏览器测试工具的列表之前，重要的是要知道哪种浏览器在用户中很流行，因此您可以据此进行关注。

如何找到您的网站访问者使用哪些浏览器？

考虑到可用操作系统，浏览器和浏览器版本组合的数量，对于小型企业所有者而言，跨浏览器测试可能是一项繁琐的任务。

但是，如果您知道网站访问者使用的流行浏览器，操作系统和设备，那么您可以自己简化此过程。根据您的特定统计数据，您可能只能测试少数几种流行组合。

您可以使用Google Analytics（分析）来找出哪些浏览器，操作系统和设备在用户中最受欢迎。

只需登录您的Google Analytics（分析）帐户，然后转到“ 受众群体”»“技术”报告。在这里，您可以找到有关网站访问者使用的浏览器，操作系统，屏幕尺寸的信息。

获得此列表后，您可以专注于排名靠前的组合，而避免其余的组合。

如果您只是开博客或没有Google Analytics（分析），那么我们建议您立即安装MonsterInsights以正确设置Google Analytics（分析）。安装后，您可以选择等待几周来收集数据，也可以继续在所有浏览器上测试您的网站。

WordPress最佳跨浏览器测试工具

跨浏览器测试工具使您可以轻松地跨多个浏览器，操作系统和设备测试WordPress网站。只需单击几下，您便可以跨不同的浏览器自动测试您的网站。

以下是WordPress网站的顶级跨浏览器测试工具列表：

1.浏览器快照

Browsershots是一个开放源代码工具，可让您使用不同操作系统上的多个浏览器来测试您的网站。关于这个工具最好的部分是它是免费的。不利的一面是它不包括Microsoft Edge或Internet Explorer。它还不包括移动设备支持。

要使用Browsershots，只需输入您的网站URL，然后选择要测试的浏览器。在Linux，Windows和Mac OS的三列中列出了浏览器。

提交请求后，您将需要等待一段时间才能运行测试并生成屏幕截图。完成后，您将可以在同一页面上查看屏幕截图。现在，您可以继续并单击屏幕快照以将其展开。

注意：BrowserShots会截取网站的屏幕快照，这意味着它不是实时测试的。在测试过程中，您可能看不到您的网站是否按预期工作。为此，您需要在实际的浏览器中运行实时测试的工具。

2. CrossBrowserTesting

CrossBrowserTesting是一款易于使用且功能强大的跨浏览器测试工具，具有实时测试和屏幕截图功能。这是我们在Awesome Motive中使用的工具，用于测试WPBeginner等网站以及我们的高级WordPress插件。

这是一项付费服务​​，但他们提供100分钟的免费试用帐户以测试产品。

创建试用帐户后，转到“实时测试”标签，您可以在其中选择操作系统和浏览器。它将在实际显示在屏幕上的实际浏览器中加载您的网站URL。

如果您想一次快速获得多个屏幕抓图，请单击“屏幕截图”标签，然后运行新的屏幕截图测试。CrossBrowserTesting工具将自动在运行Chrome，Firefox，Safari，Microsoft Edge网络浏览器的Mac，Windows，iPad和Nexus 6P手机上获取屏幕截图。

它还在每个屏幕截图下方提到了布局差异，您可以单击这些差异以将布局与基本布局进行比较。您还可以并排比较不同的布局，或将所有屏幕截图下载到计算机上。

免费帐户在可以运行的浏览器和操作系统组合方面有所限制。但是，它涵盖了顶级移动和桌面平台上最流行的浏览器。

定价：每月29美元起，按年计费。

3. BrowserStack

BrowserStack是针对移动应用程序和网站的付费跨浏览器和跨平台测试工具。他们还提供了一个有限的免费试用帐户，使您有30分钟的访问时间来测试其平台。

它具有实时测试和屏幕截图功能。您可以选择要测试的平台，然后选择浏览器。BrowserStack将使用实际的浏览器窗口加载虚拟模拟器。您只需输入要测试的URL即可开始测试。

结果非常准确，速度也令人满意。但是，您仍然必须通过打开每个浏览器来手动执行测试。

定价：每年29美元/月起。

如何分析跨浏览器测试屏幕截图？

既然您已经了解了在不同浏览器中测试WordPress网站的最简单方法，那么下一部分将分析您的结果，看看是否有需要修复的问题。

如果您正在运行带有高质量代码的响应式WordPress主题，则大多数屏幕截图看起来都差不多。

但是，在某些情况下，从一个浏览器到另一个浏览器，网站元素可能看起来略有不同。如果这种差异很小，并且不会影响用户体验，美观或功能，则可以忽略它。

另一方面，如果差异太明显，影响用户体验，看起来不愉快或阻止用户按预期使用您的网站，则需要引起您的注意。

在大多数跨浏览器测试中，您将发现主题存在CSS问题。可以使用Inspect Tool来解决此问题，以找出需要更新的CSS规则。之后，您可以添加自定义CSS来解决这些问题。