使用Adobe Edge Inspect在各种设备中轻松测试同一页面

有过移动网站开发经历的开发者都知道，在各种设备中测试同一页面是一项非常繁琐的工作。现在，我们可以使用Adobe Edge Inspect来简化这一工作。如果使用Edge Inspect，可以在各种设备的浏览器中同时浏览同一页面。另外，该软件中也提供了用于调试的工具，可以轻松调试页面上所存在的任何问题。Web网站所需支持的设备越多，使用Edge Inspect软件所能节省的时间及工作量也将越多。

本文介绍Adobe Edge Inspect的安装及使用方法。虽然Adobe Edge Inspect为Creative Cloud中的一个可以被免费使用的软件，但免费版中可以使用的功能也被受到了限制，可以同时连接的设备也仅限一台。如果要使用商业版Adobe Edge Inspect,需要注册为Creative Cloud成员，然后购买Adobe Edge Inspect产品。在商业版中，不对同时连接的设备数量进行限制。

安装

Adobe Edge Inspect的安装非常简单，分为以下三个步骤：

在PC机中安装Adobe Edge Inspect。
在Chrome浏览器中安装Adobe Edge Inspect CC扩展。
在各种设备中安装Adobe Edge Inspect客户端，可以安装的客户端包括 iOS客户端、Android客户端与Kindle客户端。

在Adobe Edge Inspect（以下简称Edge Inspect）安装完毕后，可以通过如下所示的步骤使用该软件。

在PC机中启动Edge Inspect软件。
在设备中启动Edge Inspect客户端（免费版中只支持1台设备同时连接）。
当设备与PC机中位于同一网络中时，各设备的Edge Inspect客户端中的“Connections”列表中显示PC机名。
点击该PC机名，显示passcode。
打开PC机中的Chrome浏览器，地址栏右边显示代表Edge Inspect扩展功能的图标。点击该图标，面板中显示同一网络中的设备名称。点击设备名，输入该设备的passcode，并勾选右边的复选框后，设备与PC机即建立连接，在PC机中浏览测试网页，该网页将同步显示在设备中。

Chrome浏览器中的Edge Inspect扩展菜单(连接成功)

一旦设备与PC机建立连接之后，PC机中不需要再输入passcode。

请注意：如果使用VPN网络，PC中可能不能识别设备。

浏览功能

在Edge Inspect中浏览页面是非常轻松的一件事情。在PC机的Chrome浏览器中打开某个页面后，所有与PC机建立连接的设备中均显示同一页面。另外，在设备中的Edge Inspect中只显示Chrome浏览器当前标签中的内容。如果在Chrome浏览器中切换标签，在设备中的Edge Inspect中显示的内容也将被同步切换。

另外，在Edge Inspect中可以执行全屏浏览功能。在Chrome浏览器中，默认关闭Edge Inspect的全屏浏览功能。如果要执行全屏浏览功能，需要点击Chrome浏览器中Edge Inspect面板中的“show full screen on devices”图标，点击该图标之后所有连接设备中的顶端部分被隐藏，再次点击该图标，顶端部分将被显示。

在Edge Inspect中不仅可以浏览某个Web网站，也可以浏览运行在本地localhost服务器中的某个网站。

当然，在Edge Inspect中不能浏览通过“file:///”协议打开的文件，因为该文件并不存在于设备中。另外，在浏览需要使用密码登陆的网站时，需要在各设备中进行登陆。

另外，当需要在设备中刷新页面时，可以点击右上角的图标。另外，在Chrome浏览器的Edge Inspect面板中点击刷新按钮后，可以在所有连接设备中同时刷新页面。执行刷新功能后缓存也将被同时清除，将向服务器端发出一个新的访问请求。

调试功能

虽然目前介绍的功能均非常有用，但我们要重点介绍的是调试功能。点击Chrome浏览器的Edge Inspect面板中的连接设备名旁的“< >”按钮，将打开调试窗口，开始执行远程调试功能。该功能内部使用weinre(web inspector remote)功能。习惯于使用Chrome开发者工具的开发者们将对该功能非常熟悉。

内部使用weinre的调试窗口

在调试窗口中，可以执行DOM的显示与编辑功能。将DOM编辑之后，在设备中将实时显示编辑后的内容。另外，可以在调试窗口中观察控制台窗口中输出的日志，这是一个在调试HTML／CSS／JavaScript时非常有用的功能。

该调试窗口也存在一些局限性。例如在Console标签面板中只显示设备中点击按钮等事件触发时事件处理函数中输出的信息。另外，在对HTML／CSS／JavaScript代码进行编辑时，不可以追加新行，即没有Chrome开发工具中“Edit As Text”及“Edit As HTML”选项。

屏幕快照功能

在Edge Inspect中提供屏幕快照功能。该快照功能不仅针对某个连接设备，而且可以同时在所有连接设备中执行快照功能。在需要对所有连接设备进行快照功能时，可以在Chrome浏览器的Edge Inspect面板中点击照相机图标。点击后各设备中的快照将被传送到PC机中。点击照相机旁的文件夹图标，可以打开放置了各快照的文件夹。可以通过鼠标右击Chrome浏览器的Edge Inspect扩展功能后点击“选项”菜单项的方法修改该文件夹场所。

如果只在某个设备中进行快照功能，可以点击设备的Edge Inspect软件界面右上角图标后点击“Screenshot”。

目前快照内容仅限定于当前viewport中。因此，在拍照前将屏幕滚动或缩放后，快照内容仅限定于当前viewport中的内容。

另外，执行快照功能时，同时保存一个文本文件，该文件中记载了拍照时的页面URL、页面大小、设备操作系统、设备种类、像素密度。该功能在测试发生问题后检查问题原因时将变得非常有用。