跨设备的移动端同步化测试

作者：billionnet 发布于:2013/12/20 15:47:41 点击量：

原文：http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

译者按：在突如其来的移动热潮下，web开发者似乎回到了早期兼容或hack各种浏览器的暗黑时代。唯yi不同的是，现在不是兼容浏览器而是兼容设备，这比起在同一台PC上兼容不同浏览器要痛苦得多，另外由于终端尺寸的差异，涉及的兼容性问题会显得非常复杂。因此，跨终端的同步化测试工具是急切需要的，这意味着工作效率的成倍提升！感谢Addy大神的文章，给出了这个领域的多个选择，希望对大家有所帮助，遇到问题可以微博交流（@碧青_Kwok）~后面，与往常一样，转载请注明出处: )

===========================译文分割线============================

简介

如果你是一个面向多设备的Web开发者，你可能会使用多个不同的设备及配置，来测试网站和web app。同步化测试在这可以帮上大忙，它可以同一时间自动地在多个设备和浏览器执行相同的交互操作。同步化测试可以帮助我们解决两个特别耗时的问题：

保持所有设备同步你想测试的URL。手动地在每个设备上加载URL太out了，不仅需要更长的时间，并且更容易错过回归。
同步交互。多设备同步地加载一个页面对于可视化测试已经非常棒了，但是对于交互测试，我们也非常希望设备之间能够同步滚动，点击等交互行为。

值得庆幸的是，除了直接访问目标设备，还有一些工具，它们旨在改善从桌面到移动设备的工作流。在这篇文章中，我们将着眼于Ghostlab，Remote Preview，Adobe Edge Inspect 和Grunt这些工具。

这是我的办公桌。好吧，它曾经是我的办公桌。现在它只是个移动博物馆。

工具

GhostLab (Mac)

（译者注：翻译时，官网已经有支持Windows 32位与64位的版本下载，其交互比Mac版的很好哦）

GhostLab for Mac by Vanamco

Ghostlab是一款为在多个设备上进行站点和Web App同步化测试，而设计的商业化Mac应用程序（49刀）。它只需很少的设置就可以让你实时同步：

点击
导航
滚动
表单填写（例如登录表单，注册）

这使得在多个设备上测试网站端对端的用户体验非常简单。一旦在设备上的浏览器打开网页，任何导航的更改（包括刷新）都会导致与之相连的其他设备可以立即刷新。Ghostlab支持监控本地目录，所以当你保存编辑本地文件时，页面也会自动刷新，一切都总是保持同步！搭建Ghostlab是一个轻松的过程。要开始使用，下载、安装和运行试用版（或完整版，如果你是糕富帅）。接着要将Mac和需要测试的设备连接到同一个Wifi下，这样它们才可以相互感知。一旦Ghostlab开始运行，你可以点击“+”添加用于测试的URL，或者干脆从您的浏览器地址栏中拖过来。亦或者，通过把一个想测试的本地文件夹拖到主窗口，来创建一个新的站点条目。在这篇文章中，我真实地测试了http://html5rocks.com，很有趣不是吗？

选择一个URL或本地目录

然后，通过点击网站名称旁边的“>”按钮（译者注：类似于播放按钮，实际为一个向右的封闭三角形）来启动新的Ghostlab服务器。这将启动一个新的服务器，可用于你的网络专用IP地址（如http://192.168.21.43:8080）。（译者注：ip地址在客户端的右下角处，更有二维码入口，非常方便）

Ghostlab服务器在本地进行网址内容的代理

在这里，我已经连接了的Nexus4，并在Android Chrome浏览器中使用Ghostlab给出的IP地址。这就是所有我所做的。Ghostlab不像其他一些解决方案，需要为每一个设备安装专用的客户端，这意味着你可以更快地开始测试。连接到Ghostlab URL的所有设备，将被添加到Ghostlab主窗口右边栏的“已连接客户端”列表中。双击设备名称会显示额外的详细信息，如屏幕大小，操作系统等。现在应该能够测试导航和同步的点击了，耶！ Ghostlab还能显示一些已连接设备的信息，如UA字符串，视口的宽度和高度，设备的像素密度，高宽比等。任何时候，都可以点击条目旁边的设置齿轮按钮，来手动更改需要检测的URL。这将打开一个类似下图的配置窗口：

配置监控文件，HTTP首部，字符集等。

现在我可以选择一个其他连接的设备，点一下HTML5ROCKS周边不同的链接，此时的导航在我的桌面版Chrome（在这里我输入相同的Ghostlab的URL），以及我所有的设备上，都是保持同步的。更棒的是，Ghostlab有一个选项，允许所有链接都通过该网络代理。这样，相比于通过点击http://192.168.21.43:8080/www.html5rocks.com导航到www.html5rocks.com/en/performance（举个栗子），Ghostlab可以只将此链接转换为http://192.168.21.43/www.htm5rocks.com/en/performance，从而解决了其他解决方案所遭受的跨设备自动新新问题，因此导航在所有设备之间是无缝的。想要开启这个功能，勾选”Content Loading” tab下的”Load all content through Ghostlab” 选项。

Ghostlab可以rewrite URL，因此所有资源都通可以通过Ghostlab代理。这对于同步导航多个页面非常有用。

看下实际效果：

在Android, Windows 8 and Firefox OS 手机上使用Ghostlab进行同步化测试

Ghostlab能够在任何支持的浏览器加载任何数目的网站。这不仅可以测试网站在不同的分辨率的表现，还可以测试代码在不同浏览器和平台上的行为。耶！

在所有测试设备同步滚动，点击和导航

Ghostlab允许你配置项目工作区的设置，可以指定是否对目录内容的修改进行监视，并在检测到新新时进行刷新。这意味着任何改变将导致所有连接的客户端进行刷新，无需再手动刷新！

你可能想知道Ghostlab还有什么能力。虽然它不像瑞士军刀般全能，但也支持在连接的设备上进行远程代码检查。通过主界面，在任何设备上名双击会弹出一个“调试”选项，将启动一个版本的Chrome DevTools让你捣腾。

Ghostlab通过捆绑Weinre远程Web检查器，让你可以调试连接设备上的脚本和调整样式。类似与Chrome for Android的远程调试体验，你可以选择元素，运行一些性能分析和调试脚本。

总之，我留下的印象是我可以快速地使用Ghostlab进行日常的跨设备测试。如果你是一个自由职业者，你可能会发现商业执照的成本有点高（请参阅下面的很多选项）。不过，我还是很乐意为您推荐Ghostlab。

Adobe Edge Inspect CC (Mac, Windows)

Adobe’s Creative Cloud 包括 Edge Inspect

Adobe Edge Inspect是 Adobe Creative Cloud包的一部分，但也可免费试用。它可以让你驱动多个iOS和Android设备的Chrome（通过Adobe Edge Inspect的Chrome扩展），如果浏览到特定的URL，所有连接的设备将保持同步。

若要使用，首先注册一个Adobe Creative Cloud帐户，或登录到现有帐户(如果你已经注册过)。接下来，从Adobe.com下载并安装Edge Inspect（目前仅适用于Mac和Windows，但没有Linux – 抱歉！）。Edge Inspect的文档是非常有帮助的，可以常备在手。

安装后，安装Edge Inspect的Chrome扩展，这样就可以在连接的设备之间同步浏览。

Edge Inspect CC Chrome 扩展

同时需要给每个需要链接的设备安装Edge Inspect客户端，幸好现在有支持 iOS, Android 和Kindle的客户端。

安装客户端的同时，我们可以开始准备监测页面了。你得保证所有设备都连接在同一网络下，这样才能正常工作。

启动桌面上的Edge Inspect、Chrome中的Edge Inspect插件，以及移动设备的Edge Inspec应用（如下图）：

向Edge Inspect扩展连接一个设备

现在可以在台式机上导航到HTML5Rocks.com网站，我们的移动设备将自动会导航到相同的页面。

跨多个连接设备的URL的导航

在扩展中，可以看到列出的设备旁边的<>符号，如截图所示。点击它将启动Weinre的实例，从而可以让你检查和调试网页。

出现在连接设备旁的<>符号是用来启动Weinre调试器的

Weinre是一个DOM查看器和控制台，但缺乏Chrome DevTools的一些功能，如JavaScript调试，分析和网络瀑布图。虽然这是最基础的开发工具，但对于检查DOM和JavaScript的状态它是非常有用的。

使用Weinre调试

Edge Inspect扩展也支持从连接设备生成截图。这对布局相关的测试很有帮助，也可以把截图分享给其他人。

Edge Inspect生成的截图

对于已经付费的Adobe CC用户，Edge Inspect是一个很好的解决方案。然而它需要几个注意事项，如每个设备需要安装专用的客户端，因此可能要比Ghostlab多一些额外的设置工作。

Remote Preview (Mac, Windows, Linux)

Remote Preview是一个托管HTML页面和内容，并可以显示在多个设备上的开源工具。

Remote preview会每隔1100毫秒发起一个XHR请求，去检查配置文件中的URL有没有发生变化。如果检测到变化，脚本会新新每个设备中iframe的src属性，把页面加载进来。如果没有检测到变化，脚本会保持轮询直到检测到变化。

跨27+个设备同步测试URL

把所有设备连接在一起，并且轻松地跨设备修改URL，这非常棒。上手步骤：

下载Remote Preview，并把所有文件移到本地可访问的服务器中。服务器可以是Dropbox，一个开发服务器，或者其他。
在所有目标设备上加载刚才下载的“index.html”文件。这个页面会把你想测试的页面作为iframe加载进来。
修改“url.txt”（包括下载包里的和服务器上的），将需要测试的URL写入文件，并保存。
Remote Preview会感知到url.txt发生了变化，然后会自动刷新所有设备的页面，来加载你的URL。

虽然Remote Preview是一个低保真的解决方案，但它是免费并且可用的。

Grunt + Live-Reload (Mac, Windows, Linux)

Grunt（和Yeoman）是面向前端的脚手架和构建项目的命令行工具。如果你已经在用这些工具，并且安装了live-reload，那么升级你的工作流将会非常简单，跨设备测试不再是问题，任何编辑器的改动都会触发所有设备重新加载页面。

你可能已经使用grunt server命令了。在根目录运行你的项目起，它便一直监控着所有源文件，一旦发现有改动将会自动刷新浏览器窗口。这得归功于我们运行服务器中的grunt-contrib-watch任务。如果你恰好使用过Yeoman 作为项目脚手架，它会创建一个Gruntfile，里面包含所有你在桌面上使用live-reload需要的内容。为了支持跨设备，你只需要改动一项属性——hostname（台式机上），它在connect的配置里。如果你注意到hostname被设置为localhost，只需要改为0.0.0.0。然后像往常一样执行grunt server，一个新的窗口将会打开，里面展示着你的页面。URL可能是长得这样的http://localhost:9000（9000是端口号）。开启一个新的tab或终端，用ipconfig | grep inet命令找出系统IP，比如192.168.32.20。后面一步，打开移动设备上的浏览器，比如Chrome，然后输入IP以及端口号，例如 192.168.32.20。搞定！Live-reload现在可以让你在台式机上对源文件的修改，同步在桌面和移动浏览器中刷新展示，帅！

台式机的源文件修改会触发桌面和移动浏览器的实时刷新

跨设备实时刷新实战。任何编辑修改会实时展现出来，对于响应式设计测试很有帮助。

Yeoman还有一个移动项目生成器可用，使得设置这个工作流程变成一件轻而易举的事。

Emmet LiveStyle

Emmet LiveStyle是一个浏览器、编辑器插件，它可以支持CSS的实时编辑展现。目前仅支持Chrome，Safari和Sublime Text，支持双向的编辑（编辑器到留浏览器，反之亦然）。 Emmet LiveStyle不会在你修改文件时强制浏览器完全刷新，取而代之的是使CSS的编辑横跨DevTools远程调试协议。这意味着无论在桌面版Chrome还是Android版Chrome，都可以看见编辑内容的变化。（译者注：作者的意思是，不用实时刷新页面就可以看到源文件修改的效果，其实原理与inspector相同） LiveStyle有一种“多视图模式”，是为测试跨窗口及设备的响应式设计提供的。在多视图模式下，编辑器内的任何修改都会同步到所有的窗口中，开发者工具内的修改也是如此。 为了实时编辑CSS，需要安装LiveStyle 包

启动Sublime Text，并打开项目中的一个CSS文件
开启Chrome，并打开你想编辑CSS的那个页面
打开开发者工具，以及LiveStyle面板，勾选“Enable LiveStyle”选项。注意：在编辑过程中要保持开启开发者工具，这样实时的编辑才可以生效。
这一切都开启后，一个样式列表将会出现在左侧，你的编辑器文件出现在右侧。选择编辑器中的文件与浏览器关联起来。又搞定啦，切克闹！

现在，当你编辑，创建，打开或关闭文件，编辑器的文件列表将会自动新新。

Sublime 中对CSS的修改会立即在不同浏览器窗口和模拟器中展现

总结

跨设备测试目前依旧是一块新的领域，不断发展变化着，并不是出现新的工具。很庆幸现在已经有了一些免费或商用的工具，提供了跨多个设备进行测试的能力。尽管如此，还是有很多可以改进的地方，我们鼓励你去思考如何进一步提高跨设备测试的工具。任何减少安装时间，提高跨设备的工作流程都是一个双赢的结果。

使用问题

也许我在用这些工具测试过程中，遇到很大的问题是设备会定期进入休眠状态。这并不是一个致命弱点，但经过一段时间会招人烦。如果可能的话，可以将设备不休眠作为一种解决方法，但是请记住，这会耗尽你的电池，除非总是插上电源。我个人并未在Ghostlab的使用中遇到大问题。49美元的价格有些人可能觉得有点高，但是请记住，如果你经常使用它，可以或多或少为自己支付一下。其中有关安装的很好的事情是不必担心安装和管理每个目标设备的客户端。同一个URL在任何地方都是有效的。至于Adobe Edge Inspect，我觉得每个设备都要安装和使用特定的客户端有点繁琐。我还发现它并没有始终如一地刷新所有连接起来的客户端，这意味着我不得不在Chrome扩展中自己做一些实现。它还需要订阅Creative Cloud，仅限于加载在客户端的网站，而不是你的设备中浏览器加载的网站。这会限制你无法做一些精确的测试。 Remote Preview的功能只如其名，但却非常轻量。这意味着任何超出跨设备刷新网站的能力，你都需要一个更先进的工具来满足。比如它无法同步滚动或点击。