1. 首页
  2. Wordpress教程

如何在不同浏览器中测试WordPress网站(轻松实现跨浏览器测试)

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

Testing your WordPress site in different browsers

什么是跨浏览器测试?

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

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

谷歌浏览器是全球最受欢迎的网络浏览器,台式机占65%,移动设备占57%。 但是,Firefox,Microsoft Edge,Safari和Opera等其他浏览器仍然被全球数亿用户广泛使用。

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

虽然所有流行的浏览器在渲染网页时表现几乎相同 ,但它们都使用不同的代码,这意味着它们可能会不时地处理网站元素。

作为网站所有者,这意味着您的网站在浏览器中可能会有所不同。 由于这些不是每个人都可以看到的常见WordPress错误 ,因此在有人报告之前,您可能需要几个月才能知道该问题。

这就是为什么在多个平台和屏幕尺寸上跨不同浏览器测试WordPress网站的最佳做法,因此您可以确保您的网站为所有用户提供相同的用户体验。

现在大多数人都无法访问各种设备来测试网站。 即使您设法从朋友那里借用多个设备,手动来回切换也需要做很多工作。 幸运的是,有一些跨浏览器测试工具,只需单击一下即可帮助实现流程自动化。

但在我们分享WordPress最佳跨浏览器测试工具列表之前,了解哪些浏览器在您的用户中很受欢迎非常重要,因此您可以相应地指导您的工作。

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

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

但是,如果您了解网站访问者使用的流行浏览器,操作系统和设备,那么您可以使自己的流程变得更加容易。 根据您的具体统计数据,您可能只能测试少数常用组合。

您可以使用Google Analytics(分析)了解哪些浏览器,操作系统和设备在您的用户中很受欢迎。

只需登录您的Google Analytics帐户,然后转到受众»技术报告。在这里,您可以找到有关您的网站访问者使用的浏览器,操作系统,屏幕大小的信息。

Google Analytics technology overview

获得此列表后,您可以专注于顶级组合并避免其余部分。

如果您刚刚开始使用博客或没有Google Analytics,我们建议您立即安装MonsterInsights以正确设置Google Analytics。 安装完成后,您可以选择等待几周来收集数据,也可以继续在所有浏览器上测试您的网站。

适用于WordPress的最佳跨浏览器测试工具

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

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

1. Browsershots

Browsershots

Browsershots是一个开源工具,允许您使用不同操作系统上的多个浏览器测试您的网站。 关于这个工具最好的部分是它是免费的。 缺点是它不包括Microsoft Edge或Internet Explorer。 它也不包括移动设备支持。

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

提交请求后,您必须等待一段时间,因为它运行测试并生成屏幕截图。 完成后,您将能够在同一页面上看到屏幕截图。 您现在可以继续点击屏幕截图进行扩展。

注意:BrowserShots 截取网站的截图,这意味着它不是实时测试。 您可能无法在测试期间查看您的网站是否按预期工作。 为此,您需要在实际浏览器中运行实时测试的工具。

2. CrossBrowserTesting

CrossBrowserTesting

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

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

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

如果您想快速获得多个屏幕抓取,请单击“屏幕截图”选项卡并运行新的屏幕截图测试。 CrossBrowserTesting工具将自动获取运行Chrome,Firefox,Safari,Microsoft Edge Web浏览器的Mac,Windows,iPad和Nexus 6P手机上的屏幕截图。

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

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

定价:每月29美元起,每月收费。

3. BrowserStack

BrowserStack

BrowserStack是一款面向移动应用和网站的付费跨浏览器和跨平台测试工具。 他们还提供有限的免费试用帐户,让您有30分钟的时间来测试他们的平台。

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

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

定价:每年29美元/月开始计费。

如何分析跨浏览器测试截图?

既然您已经学会了在不同浏览器中测试WordPress网站的最简单方法,那么下一部分就是分析您的结果并查看是否存在需要修复的内容。

如果您运行的是响应式WordPress主题 ,其后面有高质量的代码,那么您的大多数屏幕截图看起来都差不多。

但是,在某些情况下,网站元素在浏览器与另一个浏览器之间可能略有不同。 如果这种差异很小并且不会影响用户体验,美学或功能,那么您可以忽略它。

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

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

如果您无法解决问题,那么您可以随时聘请WordPress开发人员来帮助您解决问题。

我们希望本文能帮助您学习如何在不同的浏览器中轻松测试WordPress网站。

原创文章,作者:懒咪WP,如若转载,请注明出处:https://www.lanmit.com/1805.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据