移动端跨设备同步运行测试

Question

如果你是一个网络开发针对多设备网络，则可能需要测试你的站点和网络应用程序在若干不同的设备和配置。 同步测试可以帮助在这里和的有效方法是自动执行相同的相互作用跨越数量的设备和浏览器在同一时间。

同步测试可以帮助解决两个特别耗费时间的问题：

• 保持你的所有设备在同步的网址，你想要测试。 手动装载他们在每一个装置是使昨天，需要更长的时间并使得容易错过了回归。
• 同步相互作用。 能够装载一页是伟大的视觉测试，但是对于互动测试你的理想，也希望能够同步卷动，点击和其他行为。

值得庆幸的是如果你拥有访问的一些目标的设备，有一些工具旨在改善流离你的台式机到移动设备。
在本文中，我们将看 Ghostlab、远程预览、Adobe Edge Inspect CC (Mac, Windows) 和 Git。

这是我的桌子。 它使用的是我的书桌。 它现在只是一个移动式博物馆。

工具

GhostLab(Mac)

GhostLab Mac 通过 Vanamco

Ghostlab 是一个商业 Mac 应用程序 $49 设计的同步测试站和网络应用程序。
与最低安装它可以同时同步：

• Clicks
• Navigation
• Scrolls
• Form input (e.g login forms, sign-up)

这使得测试你的网站的终端到终端用户的经验，在多个设备非常简单。 一旦你开了你的页面浏览器在设备上，任何更改航行(包括刷新)导致的任何其他连接的设备，以刷新。 Ghostlab 支持在看当地的目录，所以这个刷新也发生在你节省的编辑当地的文件，保持同步总是！

我找到设立Ghostlab个痛苦的过程。 开始下载，安装和运行的 审判 (或完整的版本，如果你是在购买情绪). 然后你将要连接你的
Mac和设备你想要测试相同的无线网络，以便他们发现的。

一旦 Ghostlab 运行，你可以点击 +，添加一个URL用于测试或简单地将它从你的浏览器的地址栏。 或者，拖地方文件夹你想要测试到主窗口和一个新的网站项目将创建。 对于这一条，我在测试一个现场版的 http://html5rocks.com。

选择一个网址或地方上的目录机

然后你可以启动一个新的 Ghostlab 服务器通过点击 > 玩按钮旁边的名称网站。 这将启动一个新的服务器，可以在一个IP地址特有的网络 http://192.168.21.43:8080

Ghostlab地服务器代理的内容从我们的网址

在这里，我已经连接上一个承上启下的4和指铬对安卓来的IP地址 Ghostlab 给了我。 这就是我必须做的。 Ghostlab不需要安装一个专门的客户每装置等其他一些解决方案，它意味着你可以开始测试甚至更快。

任何设备连接到 Ghostlab URL 将被列入名单的连接客户的侧栏的右边主 Ghostlab 窗口。
双击的设备名称显示更多详细信息，例如屏幕上的大小、操作系统等。 你现在应该能够试验导航和同步。 耶。

Ghostlab 还能够显示一些统计数据连接的设备，如UA串，视的宽度和高度，设备度方面比越多。
在任何时候，你可以手动改变的基本网址你都检查过点击设置齿轮下来一个条目。 这打开了一个结构窗口看起来像下：

配置文件来看，HTTP headers、字符集和更多。

我现在可以选择我的其他连接设备、点击不同的链接周围HTML5Rocks和导航同步，双方在我的桌面铬(在那里我进入了在相同的Ghostlab URL)，以及跨越我所有的设备。

什么更好的是，Ghostlab 有一个选项，允许你代理所有链接通过网络而不是一击 http://192.168.21.43:8080/www.html5rocks.com 导航 www.html5rocks.com/en/performance，这会破坏自动交刷新设备遭受其他的解决方案，它可以翻译这个链接到 http://192.168.21.43/www.htm5rocks.com/en/performance 所以，航行是完全无缝的跨越我所有的设备。

启用，检查 载的所有内容，通过 Ghostlab 下 内容载入 标签。

Ghostlab 可以改写的网址以使所有资源都载入通过的 Ghostlab 代理。 用于同步导航多页

看到它在行动：

同步测试一个机器、Windows 8 和 Firefox OS 与 Ghostlab

Ghostlab 能够装载任何数量的网站或 Windows 全支持的任何浏览器。 这不只是让你测试你站在不同的决议，但多代码的行为在不同的浏览器和平台。

同步卷动，点击次数和航海的所有测试设备

Ghostlab 允许配置的安装项目的工作空间你们预览，你可以指定你是否愿意更改目录可以看着新时检测。 这意味着改变引起的所有连接的客户得到刷新。 没有更多的手册，刷新!

你可能想知道还有什么Ghostlab可以帮助。 虽然这肯定不是瑞士军刀，它还支持远程代码检验关于连接的装置。 通过主要接口，双击就任何设备名称应该带来了一个 调试 选项。

Ghostlab 使这可以通过捆绑 Weinre 远程网络检查员，它可以让你在调试脚本，并调整方式连接设备。 类似的 远程试 验可用于镀铬对安卓，你可以选择元，运行某些性能分析和调试脚本。

所有的一切，令我印象深刻，如何快速我能够使用 Ghostlab 日常测试设备。 如果你是一名自由职业者，可能找到成本的商业许可证的有点高(见下面的更多选项)。 然而，我很乐意推荐 Ghostlab。

Adobe Edge Inspect CC (Mac, Windows)

Adobe Creative 云订包 Edge Inspect

Adobe Edge Inspect 的一部分 Adobe Creative 云订包，但也可用作为一个免费的审判。 它允许为驱动多个监督事务办公室和机器设备的镀铬(通过边检查铬扩展)，因此，如果浏览到一个特定的URL所有连接的设备保持同步。

得到设立，第一次注册的一个 Adobe Creative云 帐户或登录现有的帐户，如果你已经有一个。 下一个，下载，安装 Edge Inspect 从 Adobe.com，Mac 和窗户，但不支持 Linux，注意 docs 于Edge Inspect是有用的，以保持。

一旦安装，你会想要得到的 Edge Inspect 扩展 用于镀铬以便可以同步浏览之间的连接设备。

Edge Inspect CC Chrome Extension

你还需要安装一个边检查客户的每个设备上你想要同步行动。 值得庆幸的是客户是可用于 iOS , 安卓 和 Kindle。

安装过程在我们后面,我们现在可以开始检查我们的网页。
你会需要确保所有设备都连到同一个网络对于这一工作。

启动Edge Inspect你的桌面上，Edge Inspect扩展在铬和随后的应用程序设备：

连接装置可达到的Edge Inspect扩展

我们现在可以浏览到这样一个网站 HTML5Rocks.com 在桌面上，我们移动设备将自动导航，以在同一页上。

驾驶航 URL 跨多个连接设备

在延长，你现在也看看你的设备列出与 <> 符号的下它作为在截图如下。 击这将启动一个实例 Weinre 让你检查和调试页。

连接设备的出现与 <> 符号下对他们来说，这可以用来启动 Weinre 调试器

Weinre 是 DOM 观众和控制台，缺乏功能，从铬从像 JavaScript 调试、分析、以及网络瀑布。 虽然这是最起码的开发工具，它有助于理智-检查 DOM 和 JavaScript 状态。

调试 Weinre

Edge Inspect 扩展还支持产生的截图连接的设备提供方便。 有用的布局测试或刚刚抓住你的网页与其他人分享。

截图产生与 Edge Inspect

对于开发商已经支付CC、Edge Inspect是一个很好的解决方案。 但它确实来有几点需要注意诸如每一装置需要一个专门的客户安装和一个小小的额外设置工作，你不可能找到一个替代的就像Ghostlab.

Remote Preview (Mac, Windows, Linux)

远程预览 是一个开放的工具，主HTML网页和内容可以显示在多个设备。

远程预览执行一个把电话的时间间隔每1100ms检查，如果一个网址配置文件已经改变。 如果它发现它具有剧本更新src属性的框架载入页面上的每个装置、装载网页进入。 如果没有检测到的改变，脚本将继续投票，直到一个改变。

同步 URL 测试 27+ 设备

这是伟大的链接设备连接在一起和容易地改变URL跨越所有的人。开始：

1. 下载 遥预览和移动的所有文件为它变成一个本地访问的服务器。 这可能是收存、发展服务器或者别的东西。
2. 加载了 index.html 从这上下载所有的目标设备。 这一页将被用来作为一个驱动程序，并将载入页面你想测试采用一个框架.
3. 编辑 url.txt 包括在下载和现在担任你的服务器 的网址，你希望的预览。 保存这一文件。
4. 远程预览会注意到 url.txt 文件已经改变，将刷新所有连接的设备，以加载了您的网址。

虽然一个罗网络解决方案，远程预览是免费和工作。

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

Grunt 和 Yeoman 是命令行的工具，用于脚手架和建设项目上的前端。 如果你已经在使用这些工具和有活重新装置，这是易于更新的工作流程使跨设备测试其中的每一个改变你在你的编辑的原因重新加载的任何设备你已经打开了你的本地应用程序。

你可能会用来使用 grunt server，当从根目录的项目，它表的任何改变你的源文件，并自动刷新，浏览器窗口。 这是谢谢你的git -普-观察任务，我们运行为的一部分服务器。

如果你碰巧有用的Yeoman ，以支架了你的项目，它将创建一个Gruntfile你的一切需要获得住-加载工作在桌面上。 让它运作的跨设备，你只需要改变的一个属性，是的 hostname (在你的桌面)。 它应当列在 connect，如果你注意到 hostname 被设定为 localhost 只是改变它为0.0.0.0。 下运行 grunt server 和往常一样，一个新的窗口应该打开来显示的预览的网页。 该网址将可能看起来像 http://localhost:9000。

火了的一个新的标签或终端和使用 ipconfig | grep inet 发现你的系统的内部知识产权。 它可能看起来像 192.168.32.20. 最后一个步骤是打开浏览器，如铬在设备上的你会喜欢的同步livereloads和类型在这个IP地址，随后通过的口号更早。 i。e 192.169.32.20:9000.

这就是它，现场重新装载，现在应该引起任何编辑你作为源文件桌面上触发器重新装在你的桌面浏览器 和 浏览器上你的移动设备。

保存编辑桌面上现在的触发一个活的，重新载入在你的桌面浏览器以及移动浏览器在设备有相同的 URL

截动设备-重新在行动。 每个编辑/保存给你一个实时对你的前页，伟大的响应，设计测试。

Yeoman 还有一个 移动式发电机 供其使设置这个工作流了一件轻而易举的事。

Emmet LiveStyle

Emmet LiveStyle 是一浏览器和编辑插件，带来了活CSS编辑的开发工作流程。 这是目前可用于镀铬、野生动物园和崇高文字和支持的双向(编辑的浏览器，反之亦然)编辑。

Emmet LiveStyle 并不强制一个完整的浏览器刷新当你做出改变，而是推动CSS编辑跨从遥调试协议。 这是什么意思是，你可以看到改变你的编辑桌面连接的任何版本的铬，不管是桌面上的铬或铬序。

LiveStyle 有什么它叫"多视模式"，这是理想的测试和调整响应设计跨windows和设备。 在多视模式，所有编辑更新应用于所有的窗户都从更新用于同一页上。

与 LiveStyle 包装，以开始活CSS编辑:

1. 开始了崇高的文本并开辟一个CSS文件中的一个项目
2. 开始铬和去页CSS你想编辑
3. 打开从去的 LiveStyle 小组。 检查 使 LiveStyle 选项。 注意：具箱将需要保持开放过你的生活的编辑会议的每个窗口，以便为风格的更新以应用。
4. 当这种已经启用，一个列表的样式表将显示在左边和你的编辑的文件的权利。 选择编文件有关的浏览器。

现在该列表的编辑文件将自动更新编辑, 创建，打开或关闭的文件。

更改CSS在崇高的被立即修补在不同的浏览器窗口和一个模拟器。

结论

截设备，测试仍然是一个新的和快速的移动空间有许多新的竞争者在发展。 值得庆幸的是，存在大量的免费和商业工具，用于确保兼容性和测试多数的设备设置。

这就是说，仍有很大的潜力用于改善在这一领域，我们愿鼓励你考虑如何的工具，用于测试设备可以进一步改进。 任何降低了设置时间和提高你的交叉设备的工作流程是一个双赢。

的问题

也许最大的问题，我遇到过测试这些工具设备的定期去睡觉。 这不是一个交易-断路器，但没有得到讨厌后一段时间。 在可能这是一个很好的想法设置你的设备不睡作为一种解决办法，但是，记住，这可能会耗尽你的电池除非你总是插上电源。

我没有亲自遇到任何重大问题与GhostLab. 49美元的一些可以找到价格有点陡峭；然而，牢记如果你通常使用它，它或多或少支付本身。 一个最好的事情，关于设置不必担心安装和管理客户每目标设备。 同一网址的工作无处不在。

与Adobe边检查，我发现具有以安装和使用的特定客户的每个设备上有一点点单调乏味。 我还发现它并没有持续刷新的所有客户连接起来，这意味着我不得不这样做自己从铬扩展。 它还要求订有创意的云，并仅限于装载网站的客户，而不是在选择浏览器上你的设备。 这可能会限制你能力准确地测试。

远程预览运作广告的，但是极其重量轻。 这意味着任何超过刷新的网站在设备，则需要一个更高级的加工工具的选择。 它不会例如，同步击或滚动。

建议

如果你是在寻找一个免费的跨平台的方案得到你开始，我建议使用远程预览。 对于那些工作在一个公司寻找一个支付的解决方案，GhostLab一贯优秀的在我的经验，但是只适用于Mac。 Windows用户，Adobe边检查是你最好的电话和减一些怪癖，并通常把工作做好。

git 和LiveStyle 也是优秀的增加你的生活迭代过发展。