Adobe Shadow(移动网页设计与开发) v2.0官方中文版

Adobe Shadow是为网页设计人员打造的一款移动网页设计软件，通过此款软件用户可以运行你设计的软件和游戏应用，可以更高效的检测代码问题，从而大大他提高工作效率。很好的解决了由于移动设备(Android)屏幕的尺寸和规格不一样造成的麻烦，是网页设计人员的必备软件。

Adobe Shadow特点

首先，Shadow 可以让你看到你的应用在N多个设备上运行的情况。你选择设备，然后通过WIFI和你的PC同步，打开网页，打开Shadow，然后这些设备就会跟随你的操作。你就可以发现有哪些地方是不对的。

其次，当你发现问题的时候，例如这个表单在 Droid X 上看起来很奇怪，你可以单独为这个设备查看并且修改代码。

shadow安装教程

对我而言，Adobe Shadow 其中一个印象最为深刻的部分在于如何快速轻松地进行安装。安装过程只需三个步骤：

1、在您的计算机上安装 Shadow

2、安装 Chrome Extension

3、在您的 iOS 和/或 Android 设备上安装 Shadow 应用程序

在安装完上述所有程序后，请按照下列步骤开始操作：

1、确保您的计算机上已经打开了 Shadow 应用程序。

2、在打算开展测试的任意设备上打开 Shadow。

3、假设所有设备均与您的桌面位于同一网络上，应该会看到您的计算机列于每台设备的“连接”设置下。

4、当您单击该连接时，将会得到一个密码。

5、在计算机上的 Chrome 下，您将发现 Shadow 扩展上现在会显示一个加号图标(通常此扩展位于地址栏右侧)。单击该图标，然后在该设备列表旁边键入密码。

您应当按照桌面上显示的指示在设备上查看 Shadow。

Shadow使用教程

通过 Shadow 进行浏览使用

Shadow 测试页面甚至比安装过程更加简便。只需使用 Chrome 浏览器进行浏览，所有已经连接的设备均将随之进行浏览。这样，您就能同时测试各种设备上所有页面的外观和行为。此外，Shadow 还可避免设备进入休眠状态，因此您不再需要在测试页面时解锁设备。并仅不限于在单一选项卡内进行浏览，Shadow 可随您切换选项卡在当前选项卡内显示内容。

当然，浏览实时网页非常有用，但大多数时候您会实施本地开发。值得庆幸的是，Shadow 完全支持在本地主机上进行浏览，因而您可以在开发应用程序的同时进行测试。毫无疑问，Shadow 无法加载通过file:///浏览的文件，因为您的设备上并不存在该文件。正如您所料，当您浏览受密码保护的页面时，将需要分别在各台设备上进行身份验证。在特定设备上刷新页面需要使用通用的 “Pull to Refresh” 手势。或者，您也可以单击 Chrome Extension 上的刷新图标，以便同时刷新连接的所有设备。

通过 Shadow 进行调试迄今

Shadow 包含的许多功能都非常有用，但 Shadow 的最佳特色在于其调试功能。当您在 Chrome 中单击 Adobe Shadow 图标时，将会在各设备旁边看到 "<>" 图标。单击此图标将会打开调试面板(隐藏使用 weinre)，不过这对于使用 Chrome 或 Safari 的开发人员工具的人们而言将会非常熟悉。

进入调试面板后，您可以查看和编辑 DOM，以及查看反映在特定调试设备上的这些变化。您甚至可以查看控制台日志。您可能知道，这些功能对于调试 HTML、CSS 和 JavaScript 问题相当有效。

在撰写这篇文章时，我确实遇到了一些调试限制(我想说的是此类产品预览版本中可以预见的问题)。在我的测试中，Timeline 似乎并没有提供任何数据，即使在刷新时也是一样。Network 选项卡仅适用于 XHR。此外，在页面完全加载后控制台将会显示记录项目(例如，按钮单击事件)，可能已经记录至页面加载控制台的任何事件将不会显示。正如您所料，您将需要在设备上实际触发此事件(也就是说，您必须在设备而不是计算机上单击该按钮)以便查看发送至控制台的信息。虽然我可以编辑 HTML、CSS 和 JavaScript，但无法确定如何添加新行(按 Enter 键或任意组合键加上 Enter 键往往只会记录我的编辑项目)，与 Chrome 开发人员工具一样，此处并未提供 Edit As Text 或 Edit As HTML 选项。最后，调试功能使用 adobe.com 上的 weinre 服务器，当此服务停机维护时，调试功能也将无法使用。

尽管存在上述限制，Ray Camden 仍指出，通过 Shadow 进行调试极其强大有效，我完全相信，未来版本将对该流程进行进一步的改进。