|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
NSStringNSArrayNSDictionary等这些工具在所有的框架里都会出现iOS大部分类都是继承自NSObject(我还没见过不是继承自NSObject的..)译者按：在突如其来的挪动高潮下，web开辟者仿佛回到了初期兼容或hack各类扫瞄器的暗黑时期。独一分歧的是，如今不是兼容扫瞄器而是兼容设备，这比起在统一台PC上兼容分歧扫瞄器要疾苦很多，别的因为终端尺寸的差别，触及的兼容性成绩会显得加倍庞大。因而，跨终真个同步化测试工具是孔殷必要的，这意味着事情效力的成倍提拔！感激Addy年夜神的文章，给出了这个范畴的多个选择，但愿对人人有所匡助。最初，与平常一样，转载请说明出处:)
===========================译文支解线============================
简介
假如你是一个面向多设备的Web开辟者，你大概会利用多个分歧的设备及设置，来测试网站和webapp。同步化测试在这能够帮上年夜忙，它能够统一工夫主动地在多个设备和扫瞄器实行不异的交互操纵。
同步化测试能够匡助我们办理两个出格耗时的成绩：
- 坚持一切设备同步你想测试的URL。手动地在每一个设备上加载URL太out了，不但必要更长的工夫，而且更简单错过回回。
- 同步交互。多设备同步地加载一个页面临于可视化测试已十分棒了，可是关于交互测试，我们也十分但愿设备之间可以同步转动，点击等交互举动。
值得光荣的是，除间接会见方针设备，另有一些工具，它们旨在改良从桌面到挪动设备的事情流。在这篇文章中，我们将着眼于Ghostlab，RemotePreview，AdobeEdgeInspect和Grunt这些工具。
<br>
这是我的办公桌。好吧，它已经是我的办公桌。如今它只是个挪动博物馆。
工具
GhostLab(Mac)
（译者注：翻译时，官网已有撑持Windows32位与64位的版本下载，其交互比Mac版的更好哦）
<br>
GhostLabforMacbyVanamco
Ghostlab是一款为在多个设备长进行站点和WebApp同步化测试，而计划的贸易化Mac使用程序（49刀）。它只需很少的设置就能够让你及时同步：
这使得在多个设备上测试网站端对真个用户体验十分复杂。一旦在设备上的扫瞄器翻开网页，任何导航的变动（包含革新）城市招致与之相连的其他设备能够当即革新。Ghostlab撑持监控当地目次，以是当你保留编纂当地文件时，页面也会主动革新，统统都老是坚持同步！
搭建Ghostlab是一个轻松的历程。要入手下手利用，下载、安装和运转试用版（或完全版，假如你是糕富帅）。接着要将Mac和必要测试的设备毗连到统一个Wifi下，如许它们才能够互相感知。
一旦Ghostlab入手下手运转，你能够点击“+”增加用于测试的URL，大概爽性从您的扫瞄器地点栏中拖过去。亦大概，经由过程把一个想测试的当地文件夹拖到主窗口，来创立一个新的站点条目。在这篇文章中，我实在地测试了http://html5rocks.com，很风趣不是吗？
<br>
选择一个URL或当地目次
然后，经由过程点击网站称号中间的“>”按钮（译者注：相似于播放按钮，实践为一个向右的关闭三角形）来启动新的Ghostlab服务器。这将启动一个新的服务器，可用于你的收集公用IP地点（如http://192.168.21.43:8080）。（译者注：ip地点在客户真个右下角处，更有二维码出口，十分便利）
<br>
Ghostlab服务器在当地举行网址内容的代办署理
在这里，我已毗连了的Nexus4，并在AndroidChrome扫瞄器中利用Ghostlab给出的IP地点。这就是一切我所做的。Ghostlab不像其他一些办理计划，必要为每个设备安装公用的客户端，这意味着你能够更快地入手下手测试。
毗连到GhostlabURL的一切设备，将被增加到Ghostlab主窗口右侧栏的“已毗连客户端”列表中。双击设备称号会显现分外的具体信息，如屏幕巨细，操纵体系等。如今应当可以测试导航和同步的点击了，耶！
Ghostlab还能显现一些已毗连设备的信息，如UA字符串，视口的宽度和高度，设备的像素密度，高宽比等。任什么时候候，都能够点击条目中间的设置齿轮按钮，来手动变动必要检测的URL。这将翻开一个相似下图的设置窗口：
<br>
设置监控文件，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，从而办理了其他办理计划所蒙受的跨设备主动更新成绩，因而导航在一切设备之间是无缝的。
想要开启这个功效，勾选”ContentLoading”tab下的”LoadallcontentthroughGhostlab”选项。
<br>
Ghostlab能够rewriteURL，因而一切资本都通能够经由过程Ghostlab代办署理。这关于同步导航多个页面十分有效。
看下实践效果：
<br>
在Android,Windows8andFirefoxOS手机上利用Ghostlab举行同步化测试
Ghostlab可以在任何撑持的扫瞄器加载任何数量的网站。这不但能够测试网站在分歧的分辩率的体现，还能够测试代码在分歧扫瞄器战争台上的举动。耶！
<br>
在一切测试设备同步转动，点击和导航
Ghostlab同意你设置项目事情区的设置，能够指定是不是对目次内容的修正举行监督，并在检测到更新时举行革新。这意味着任何改动将招致一切毗连的客户端举行革新，无需再手动革新！
你大概想晓得Ghostlab另有甚么才能。固然它不像瑞士军刀般万能，但也撑持在毗连的设备长进行远程代码反省。经由过程主界面，在任何设备上名双击会弹出一个“调试”选项，将启动一个版本的ChromeDevTools让你倒腾。
Ghostlab经由过程绑缚Weinre远程Web反省器，让你能够调试毗连设备上的剧本和调剂款式。相似与ChromeforAndroid的远程调试体验，你能够选择元素，运转一些功能剖析和调试剧本。
总之，我留下的印象是我能够疾速地利用Ghostlab举行一样平常的跨设备测试。假如你是一个自在职业者，你大概会发明贸易执照的本钱有点高（请参阅上面的更多选项）。不外，我仍是很愿意为您保举Ghostlab。
AdobeEdgeInspectCC(Mac,Windows)
<br>
Adobe’sCreativeCloud包含EdgeInspect
AdobeEdgeInspect是AdobeCreativeCloud包的一部分，但也可收费试用。它可让你驱动多个iOS和Android设备的Chrome（经由过程AdobeEdgeInspect的Chrome扩大），假如扫瞄到特定的URL，一切毗连的设备将坚持同步。
若要利用，起首注册一个AdobeCreativeCloud帐户，或登录到现有帐户(假如你已注册过)。接上去，从Adobe.com下载并安装EdgeInspect（今朝仅合用于Mac和Windows，但没有Linux–抱愧！）。EdgeInspect的文档长短常有匡助的，能够常备在手。
安装后，安装EdgeInspect的Chrome扩大，如许就能够在毗连的设备之间同步扫瞄。
<br>
EdgeInspectCCChrome扩大
同时必要给每一个必要链接的设备安装EdgeInspect客户端，幸亏如今有撑持iOS,Android和Kindle的客户端。
安装客户真个同时，我们能够入手下手筹办监测页面了。你得包管一切设备都毗连在统一收集下，如许才干一般事情。
启动桌面上的EdgeInspect、Chrome中的EdgeInspect插件，和挪动设备的EdgeInspec使用（以下图）：
<br>
向EdgeInspect扩大毗连一个设备
如今能够在台式机上导航到HTML5Rocks.com网站，我们的挪动设备将主动会导航到不异的页面。
<br>
跨多个毗连设备的URL的导航
在扩大中，能够看到列出的设备中间的标记，如截图所示。点击它将启动Weinre的实例，从而可让你反省和调试网页。
<br>
呈现在毗连设备旁的标记是用来启动Weinre调试器的
Weinre是一个DOM检察器和把持台，但缺少ChromeDevTools的一些功效，如JavaScript调试，剖析和收集瀑布图。固然这是最基本的开辟工具，但关于反省DOM和JavaScript的形态它长短常有效的。
<br>
利用Weinre调试
EdgeInspect扩大也撑持从毗连设备天生截图。这对结构相干的测试很有匡助，也能够把截图分享给其别人。
<br>
EdgeInspect天生的截图
关于已付费的AdobeCC用户，EdgeInspect是一个很好的办理计划。但是它必要几个注重事项，如每一个设备必要安装公用的客户端，因而大概要比Ghostlab多一些分外的设置事情。
RemotePreview(Mac,Windows,Linux)
RemotePreview是一个托管HTML页面和内容，并能够显现在多个设备上的开源工具。
Remotepreview会每隔1100毫秒倡议一个XHR哀求，往反省设置文件中的URL有无产生变更。假如检测到变更，剧本会更新每一个设备中iframe的src属性，把页面加载出去。假如没有检测到变更，剧本会坚持轮询直到检测到变更。
<br>
跨27+个设备同步测试URL
把一切设备毗连在一同，而且轻松地跨设备修正URL，这十分棒。上手步骤：
- 下载RemotePreview，并把一切文件移到当地可会见的服务器中。服务器能够是Dropbox，一个开辟服务器，大概其他。
- 在一切方针设备上加载方才下载的“index.html”文件。这个页面会把你想测试的页面作为iframe加载出去。
- 修正“url.txt”（包含下载包里的和服务器上的），将必要测试的URL写进文件，并保留。
- RemotePreview会感知到url.txt产生了变更，然后会主动革新一切设备的页面，来加载你的URL。
固然RemotePreview是一个低保真的办理计划，但它是收费而且可用的。
Grunt+Live-Reload(Mac,Windows,Linux)
Grunt（和Yeoman）是面向前真个脚手架和构建项目标命令行工具。假如你已在用这些工具，而且安装了live-reload，那末晋级你的事情流将会十分复杂，跨设备测试不再是成绩，任何编纂器的修改城市触发一切设备从头加载页面。
你大概已利用gruntserver命令了。在根目次运转你的项目起，它便一向监控着一切源文件，一旦发明有修改将会主动革新扫瞄器窗口。这得回功于我们运转服务器中的grunt-contrib-watch义务。
假如你刚好利用过Yeoman作为项目脚手架，它会创立一个Gruntfile，内里包括一切你在桌面上利用live-reload必要的内容。为了撑持跨设备，你只必要修改一项属性——hostname（台式机上），它在connect的设置里。假如你注重到hostname被设置为localhost，只必要改成0.0.0.0。然后像平常一样实行gruntserver，一个新的窗口将会翻开，内里展现着你的页面。URL多是长得如许的http://localhost:9000（9000是端标语）。
开启一个新的tab或终端，用ipconfig|grepinet命令找出体系IP，好比192.168.32.20。最初一步，翻开挪动设备上的扫瞄器，好比Chrome，然后输出IP和端标语，比方192.168.32.20。
弄定！Live-reload如今可让你在台式机上对源文件的修正，同步在桌面和挪动扫瞄器中革新展现，帅！
<br>
台式机的源文件修正会触发桌面和挪动扫瞄器的及时革新
<br>
跨设备及时革新实战。任何编纂修正会及时展示出来，关于呼应式计划测试很有匡助。
Yeoman另有一个挪动项陌生成器可用，使得设置这个事情流程酿成一件十拿九稳的事。
EmmetLiveStyle
EmmetLiveStyle是一个扫瞄器、编纂器插件，它能够撑持CSS的及时编纂展示。今朝仅撑持Chrome，Safari和SublimeText，撑持双向的编纂（编纂器到留扫瞄器，反之亦然）。
EmmetLiveStyle不会在你修正文件时强迫扫瞄器完整革新，取而代之的是使CSS的编纂高出DevTools远程调试协定。这意味着不管在桌面版Chrome仍是Android版Chrome，都能够瞥见编纂内容的变更。（译者注：作者的意义是，不必及时革新页面就能够看到源文件修正的效果，实在道理与inspector不异）
LiveStyle有一种“多视图形式”，是为测试跨窗口及设备的呼应式计划供应的。在多视图形式下，编纂器内的任何修正城市同步到一切的窗口中，开辟者工具内的修正也是云云。
为了及时编纂CSS，必要安装LiveStyle包
- 启动SublimeText，并翻开项目中的一个CSS文件
- 开启Chrome，并翻开你想编纂CSS的谁人页面
- 翻开开辟者工具，和LiveStyle面板，勾选“EnableLiveStyle”选项。注重：在编纂过程当中要坚持开启开辟者工具，如许及时的编纂才能够失效。
- 这统统都开启后，一个款式列表将会呈现在左边，你的编纂器文件呈现在右边。选择编纂器中的文件与扫瞄器联系关系起来。又弄定啦，切克闹！
如今，当你编纂，创立，翻开或封闭文件，编纂器的文件列表将会主动更新。
<br>
Sublime中对CSS的修正会当即在分歧扫瞄器窗口和摹拟器中展示
总结
跨设备测试今朝仍旧是一块新的范畴，不休开展变更着，并非呈现新的工具。很光荣如今已有了一些收费或商用的工具，供应了跨多个设备举行测试的才能。
只管云云，仍是有良多能够改善的中央，我们勉励你往思索怎样进一步进步跨设备测试的工具。任何削减安装工夫，进步跨设备的事情流程都是一个共赢的了局。
利用成绩
大概我在用这些工具测试过程当中，碰到最年夜的成绩是设备会按期进进休眠形态。这并非一个致命缺点，但经由一段工夫会招人烦。假如大概的话，能够将设备不休眠作为一种办理办法，可是请记着，这会耗尽你的电池，除非老是插上电源。
我团体并未在Ghostlab的利用中碰到年夜成绩。49美圆的代价有些人大概以为有点高，可是请记着，假如你常常利用它，能够或多或少为本人付出一下。个中有关安装的最好的事变是不用忧虑安装和办理每一个方针设备的客户端。统一个URL在任何中央都是无效的。
至于AdobeEdgeInspect，我以为每一个设备都要安装和利用特定的客户端有点烦琐。我还发明它并没有持之以恒地革新一切毗连起来的客户端，这意味着我不能不在Chrome扩大中本人做一些完成。它还必要定阅CreativeCloud，仅限于加载在客户真个网站，而不是你的设备中扫瞄器加载的网站。这会限定你没法做一些准确的测试。
一个人负责协调他们的工作并且如果有新增加的衣服或者要移除之前的衣服通知他俩(NSManagedObjectContext)NSManagedObject |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-18 11:37:12
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-2-3 19:58:05