如何使用Ghostlab执行同步测试

如果您一直在关注该帖子，则可以看到“同步测试”将同时在多个浏览器和设备上测试针对移动设备优化的网站，从而改善了您的开发工作流程。

在上一篇文章中，我们向您展示了如何使用Browser Sync执行同步测试 。

浏览器内的交互（例如刷新，单击和填写表格） 实时反映在浏览器和连接的设备上 。

让我们来看看。

因此，在本文中，我们将向您展示使用名为Ghostlab的应用程序进行同步测试的替代方法。

一些人可能更喜欢使用命令行，而有些人可能更喜欢使用带有图形界面的应用程序，因为这对他们来说更直观。

但是我们知道每个人都有自己的工作风格。

入门

它还提供了具有所有功能的试用版，因此您可以在决定购买之前对其进行探索。

Ghostlab单个许可证的价格为49美元，可在两台计算机中使用。

按照操作系统步骤安装它，然后启动它。

它可用于Windows和OSX。 在此处获取 。

我们准备使用Ghostlab。

项目配置

有两个选项：我们可以将项目目录拖放到应用程序的窗口中，或者可以像这样复制和粘贴项目的URL地址。

我们要做的第一件事是将我们的项目添加到Ghostlab。

Ghostlab如**册所有添加的项目

我们还可以拖放项目列表以切换其位置。

单击图标以将其展开以显示在选项卡阵列中的配置选项。

将鼠标光标移到项目图标上，它将变成一个齿轮图标。

此外，我们可以配置每个项目。

在这些标签中，我们可以打开或关闭Ghostlab服务器，选择用于查看项目的浏览器，更改项目标题或URL，等等。

开启服务器

为此，您只需单击项目列表的箭头图标。

如上所述，Ghostlab配备了一个内置服务器，该服务器可同时用于静态站点 （仅HTML和CSS）以及使用PHP，Ruby等构建的动态站点 。所有配置都设置好之后，我们就可以移动打开服务器电源。

您不必复制粘贴URL。

单击火箭图标以在默认浏览器中启动项目，或单击火箭下方的浏览器图标以选择其他浏览器。

服务器打开时，您将在窗口应用程序的左下方看到通知，其中显示服务器URL和端口 。

如果您在另一个项目中打开服务器，则它将为较旧的项目关闭，而为新打开的项目打开。

注意：服务器一次仅适用于一个项目。

连接设备

当我们在任何浏览器中启动项目时，Ghostlab都会在右侧栏中注册它。

点击< > ，然后将弹出代码检查器 （看起来与Chrome相似）。

我们可以使用Ghostlab内置代码检查器在这些连接的浏览器/设备上调试项目。

当我们浏览DOM树时，浏览器中的各个元素将突出显示。

用户交互（例如滚动，单击和填写表单）也将同时反映出来。

进行更改后，它将自动刷新所有连接的浏览器。

最终，您还可以执行“同步测试” ，类似于Browser Sync。

最终思想

我确定它在Windows中看起来还不错。

我对Ghostlab的唯一抱怨是，UI在OS X中似乎有点不合适。

两者都很好地发挥了功能。

我们已经向您展示了如何使用命令行工具Browser Sync和带有图形界面的应用程序来执行“同步测试”。

最后，由您决定哪一个最适合您的工作流程和预算。

翻译自: https://www.hongkiat.com/blog/sychronised-testing-with-ghostlab/