简介
如果您是以多设备为目标的 Web 开发者，则可能需要在多种不同的设备和配置下测试您的网站和 Web 应用。同步测试可以有所帮助，并且是同时在许多设备和浏览器中自动执行相同交互的有效方法。
同步测试有助于解决两个特别耗时的问题：
- 使您的所有设备与要测试的网址保持同步。因此，在每台设备上手动加载这些容器就要像昨天一样需要更长的时间，并且更容易错失回归问题。
- 同步互动。能够加载页面非常适合视觉测试，但对于互动测试，最好还能够同步滚动、点击和其他行为。
幸运的是，如果您可以访问某些目标设备，则可以使用多种工具来改进从桌面设备到移动设备的流程。在本文中，我们将介绍 Ghostlab、远程预览、Adobe Edge Inspect 和 Grunt。
工具
GhostLab（适用于 Mac）
Ghostlab 是一款商业 Mac 应用（价格为 49 美元），旨在在多个设备上针对网站和 Web 应用同步测试。只需进行最低程度的设置，您就可以同时同步：
- Clicks
- 导航
- 滚动次数
- 表单输入（例如登录表单、注册）
因此，您可以在多台设备上非常轻松地测试网站的端到端用户体验。通过设备上的浏览器打开网页后，对导航进行的任何更改（包括刷新）都会导致任何其他已连接的设备立即刷新。Ghostlab 支持监控本地目录，因此，当您将修改保存到本地文件时，也会进行此刷新，使所有内容始终保持同步！
我发现设置 Ghostlab 是一个轻松的过程。如需开始使用，请下载、安装并运行试用版（如果您有意购买，也可使用完整版）。然后，您需要将 Mac 和要测试的设备连接到同一 Wi-Fi 网络，以便可以检测到它们。
Ghostlab 运行后，您可以点击“+”添加用于测试的网址，也可以直接从浏览器的地址栏中拖动该网址。或者，将要测试的本地文件夹拖到主窗口中，这样即可创建新的网站条目。在本文中，我正在测试 http://html5rocks.com 的真实版本。Cheeky，嗯？; )
然后，您可以点击网站名称旁边的“播放”按钮，启动一个新的 Ghostlab 服务器。这将启动一个新的服务器，该服务器可通过网络特定的 IP 地址（例如 http://192.168.21.43:8080）使用。
我已经连接了 Nexus 4，将 Android 版 Chrome 指向了 Ghostlab 提供给我的 IP 地址。我只需要做这些就行了。Ghostlab 不像一些其他解决方案一样要求您为每台设备安装专用客户端，这意味着您可以更快地开始测试。
连接到 Ghostlab 网址的所有设备都会被添加到 Ghostlab 主窗口右侧边栏中的已连接客户端列表中。双击设备名称会显示其他详细信息，例如屏幕尺寸、操作系统等。现在，您应该能够测试导航和同步点击操作了！耶！
Ghostlab 还能够显示有关已连接设备的一些统计信息，例如 UA 字符串、视口宽度和高度、设备像素密度、宽高比等。您可以随时点击条目旁边的设置齿轮图标，手动更改正在检查的基准网址。随即将打开一个配置窗口，如下所示：
现在，我可以选择一台其他已连接的设备，点击 HTML5Rocks 周围的不同链接，导航就会同时在桌面版 Chrome（我输入同一 Ghostlab 网址）和所有设备上同步。
更棒的是，Ghostlab 具有一个选项，可让您代理通过网络的所有链接。例如，您无需点击 http://192.168.21.43:8080/www.html5rocks.com 即可转到 www.html5rocks.com/en/performance，这样就可以将链接 http://www.html5rocks.com/en/performance 完全替换为流畅的 http://www.html5rocks.com/en/performance，这样会破坏http://192.168.21.43/www.htm5rocks.com/en/performance
如需启用，请选中“内容加载”标签页下的“通过 Ghostlab 加载所有内容”。
查看实际运作方式：
Ghostlab 能够在任何受支持的浏览器中加载任意数量的网站或窗口。这不仅可以让您以不同的分辨率测试网站，还要确保您的代码在不同浏览器和平台上的行为方式。棒极了！
借助 Ghostlab，您可以为正在预览的项目工作区配置设置，并且可以指定是否要在检测到目录更改时查看和刷新目录。这意味着，更改会导致所有连接的客户端进行刷新。无需再手动刷新！
您或许想知道 Ghostlab 还能提供哪些帮助。虽然它肯定不是瑞士军刀，但也支持在已连接的设备上进行远程代码检查。在主界面中，双击任何设备名称都会调出一个“调试”选项，该选项将启动一个版本的 Chrome 开发者工具供您试用。
Ghostlab 通过捆绑的 Weinre 远程网络检查器实现这一点，该工具可让您在已连接的设备上调试脚本并调整样式。与 Android 版 Chrome 提供的远程调试体验类似，您可以选择元素，运行一些性能分析和调试脚本。
总的来说，使用 Ghostlab 在各种设备上进行日常测试的速度给我留下了深刻的印象。如果您是自由职业者，您可能会发现商业许可费用有点高（请参阅下文中的更多选项）。不过，我很乐意推荐 Ghostlab。
Adobe Edge Inspect CC（Mac、Windows）
Adobe Edge Inspect 是 Adobe Creative Cloud 订阅软件包的一部分，但也提供免费试用。它可让您使用 Chrome（通过 Edge Inspector Chrome 扩展程序）驱动多台 iOS 和 Android 设备，这样一来，如果您浏览到特定网址，所有已连接的设备都会保持同步。
若要进行设置，请先注册一个 Adobe Creative Cloud 账号，或登录一个现有账号（若有）。接下来，从 Adobe.com 下载并安装 Edge Inspect（目前支持 Mac 和 Windows，但不支持 Linux。抱歉！）。请注意，备妥边缘检查的docs会很有帮助。
安装后，您需要获取 Chrome 的 Edge 检查扩展程序，以便在已连接的设备之间同步浏览。
您还需要在要同步操作的每个设备上安装 Edge Inspect 客户端。幸运的是，这些客户端支持 iOS、Android 和 Kindle。
安装流程完成后，我们现在可以开始检查网页了。 您需要确保所有设备均已连接到同一网络才能使用此功能。
在桌面设备上启动 Edge Inspect，然后在 Chrome 中启动 Edge Inspect 扩展程序，然后在您的设备上启动该应用（见下文）：
现在，我们可以在桌面设备上导航到一个类似 HTML5Rocks.com 的网站，我们的移动设备也会自动进入同一页面。
在扩展程序中，您还会看到您的设备旁边列有 <> 符号，如以下屏幕截图所示。点击此选项会启动一个 Weinre 实例，供您检查和调试自己的网页。
Weinre 是一个 DOM 查看器和控制台，缺少 Chrome 开发者工具中的 JavaScript 调试、性能分析和网络瀑布流等功能。虽然它是开发者工具的最低要求，但对于 DOM 和 JavaScript 状态的健全性检查也很有用。
Edge Inspect 扩展程序还支持轻松从已连接的设备生成屏幕截图。这对于布局测试或只是获取网页的截图以便与他人分享非常有用。
对于已经在付费使用 CC 的开发者来说，Edge Inspect 是一个绝佳的解决方案。不过，它有一些注意事项，例如每台设备都需要安装专用客户端，并且执行一些额外的设置工作，使用 Ghostlab 等替代方案可能无法找到这些任务。
远程预览（Mac、Windows、Linux）
远程预览是一种开源工具，您可以在其中托管可在多台设备上显示的 HTML 网页和内容。
远程预览每隔 1100 毫秒执行一次 XHR 调用，以检查配置文件中的网址是否已更改。如果发现已加载的脚本，该脚本会更新已加载到各个设备的页面的 iframe 的 src 属性，并将页面加载到页面中。如果未检测到更改，脚本将继续轮询，直到发生更改。
这对于将多个设备串联在一起并轻松更改所有设备的网址非常有用。可以按以下步骤开始操作：
- 下载远程预览，并将其所有文件移动到本地可访问的服务器。它可以是 Dropbox、开发服务器等
- 在您的所有目标设备上加载此下载内容中的“index.html”。此页面将用作驱动程序，并使用 iframe 加载要测试的页面。
- 使用您要预览的网址修改“url.txt”（包含在下载内容中，现已在您的服务器上提供）。保存此文件。
- 远程预览会发现 url.txt 文件已更改，并刷新所有已连接的设备以加载您的网址。
虽然远程预览是低保真解决方案，但是免费的，可以运行。
Grunt + Live-Refresh（Mac、Windows、Linux）
Grunt（和 Yeoman）是用于在前端建立基架和构建项目的命令行工具。如果您已经在使用这些工具并设置了实时重载，则可以轻松地更新工作流以启用跨设备测试，这样，您在编辑器中做出的每项更改都会重新加载您打开本地应用的任何设备。
您可能已习惯使用 grunt server。从项目的根目录运行时，它会监控源文件的任何更改，并自动刷新浏览器窗口。这要归功于我们作为服务器的一部分运行的 grunt-contrib-watch 任务。
如果您碰巧使用 Yeoman 构建了项目，它会创建一个 Gruntfile，其中包含在桌面设备上运行实时重新加载所需的所有内容。若要使其跨设备正常运行，您只需更改一个属性，即（在桌面设备上）的 hostname。它应列在 connect 下。如果您发现 hostname 设置为 localhost，只需将其更改为 0.0.0.0 即可。接下来，运行 grunt server，系统会照常打开一个新窗口，其中显示网页的预览。网址可能类似于 http://localhost:9000（9000 是端口）。
启动新的标签页或终端，然后使用 ipconfig | grep inet 发现系统的内部 IP。其外观可能为 192.168.32.20。最后一步是在您要同步 Livereload 的设备上打开类似 Chrome 的浏览器，然后输入此 IP 地址，后跟之前的端口号，即 192.169.32.20:9000。
大功告成！实时重新加载现在应该会导致您对桌面设备中的源文件所做的任何修改，以触发桌面浏览器和移动设备上的浏览器进行重新加载。也很棒！
Yeoman 还提供了移动生成器，使设置此工作流变得轻而易举。
艾米特 LiveStyle
Emmet LiveStyle 是一个浏览器和编辑器插件，可为您的开发工作流引入实时 CSS 编辑功能。它目前可用于 Chrome、Safari 和 Sublime Text，并支持双向（从编辑器到浏览器，反之亦然）编辑。
Emmet LiveStyle 不会在您做出更改时强制刷新浏览器，而是会通过开发者工具远程调试协议推送 CSS 修改。这意味着，您可以在任何已关联的 Chrome 版本（无论是桌面版 Chrome 还是 Android 版 Chrome）中查看在桌面编辑器中所做的更改。
LiveStyle 具有“多视图模式”，非常适合跨窗口和设备测试和调整自适应设计。在多视图模式下，所有编辑器更新都会应用于所有窗口，开发者工具更新也会应用于同一页面。
安装 LiveStyle 软件包后，如需开始进行实时 CSS 编辑，请执行以下操作：
- 启动 Sublime Text 并在项目中打开 CSS 文件
- 启动 Chrome，然后转到包含您要修改的 CSS 的页面
- 打开开发者工具并前往 LiveStyle 面板。选中“启用 LiveStyle”选项。注意：在实时编辑会话期间，您需要让开发者工具保持打开状态，以便应用样式更新。
- 启用此功能后，左侧会显示样式表列表，右侧会显示编辑器文件列表。选择要与浏览器关联的编辑器文件。大功告成！吊杆麦克风。
现在，当您编辑、创建、打开或关闭文件时，编辑器文件列表会自动更新。
总结
跨设备测试仍然是一个发展迅速的新领域，正在开发许多新的竞争者。幸运的是，市面上有许多免费和商业工具，用于确保您能在众多设备组中进行兼容性和测试。
尽管如此，这方面仍有很大的改进空间，我们建议您考虑如何进一步改进用于跨设备测试的工具。任何能够缩短设置时间并改进跨设备工作流的措施都将是成功的。
问题
在使用这些工具进行测试的过程中，我遇到的最大问题可能就是设备经常进入休眠状态。这不会造成干扰，但用一段时间后就会很烦人。建议您尽可能将设备设置为不休眠来解决这个问题，但请注意，除非您始终接通电源，否则这样做可能会耗尽电池电量。
我个人在使用 GhostLab 时并未遇到任何重大问题。价格是 49 美元，有些人可能会觉得价格有点昂贵；但是请注意，如果您定期使用，其价格会上涨或略低。此设置最棒的一点是，您无需担心为每个目标设备安装和管理客户端。相同的网址随时随地都可使用。
借助 Adobe Edge Inspect，我发现必须在每台设备上安装和使用特定客户端有点麻烦。我还发现它并未持续刷新所有已连接的客户端，这意味着我必须通过 Chrome 扩展程序自行刷新。它还需要订阅 Creative Cloud，并且仅限于在客户端中加载网站，而不是在设备上的选定浏览器中加载。这可能会限制您准确测试的能力。
远程预览的功能与所宣传的一致，但非常轻量。这意味着，除了跨设备刷新网站之外，您还需要更高级的工具选项。例如，它不会同步点击或滚动。
建议
如果您正在寻找免费的跨平台解决方案来帮助您入门，建议您使用远程预览。对于在寻找付费解决方案的公司工作的人员，GhostLab 具有始终如一的出色经验，但仅适用于 Mac。对于 Windows 用户，Adobe Edge Inspect 是最佳选择，并且排除了一些奇怪之处，因此通常可以圆满完成任务。
Grunt 和 LiveStyle 也非常适合在开发过程中增强实时迭代。