背景

去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。

没有计划的阅读，收效甚微。

新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。

这个“玩法”虽然常见且板正，但是有效，已经坚持阅读十一个月。

已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》、《你不知道的JavaScript（下卷）》、《数据结构与算法JavaScript描述》、《WebKit技术内幕》、《前端架构：从入门到微前端》、《秒懂算法：用常识解读数据结构与算法》、《JavaScript权威指南》、《JavaScript异步编程设计快速响应的网络应用》。

当前阅读周书籍：《编写可测试的JavaScript代码》。

移动调试

移动调试只是远程调试的一个分支。两个主要的浏览器是Android中的Chrome以及iOS中的Safari，两者都是基于WebKit。我们已经看到一些基于WebKit浏览器的远程调试示例，最新版本的Android和iOS都允许进行远程调试。如果确信所有的用户都运行最新版本的系统，那就没有问题！在进一步研究之前，让我们快速看一些原生方案。

Android

可以从Google Play商店在Android 上安装Chrome for Android Beta。该版本允许我们在桌面上使用标准的WebKit调试协议进行远程调试。Chrome for Android Beta安装之后，必须访问Settings→Developer Tools以启用远程调试。

与此同时，必须从Android站点下载并安装Android Software Developer Kit（SDK）到桌面上。我们只需要该软件包里的一个脚本：Android Debug Bridge（abd）。该软件包可以很容易地从SDK下载页面进行下载并安装。下载SDK之后，运行Android可执行文件，也就是Android SDK Manager。我们可以从该工具中选择安装包含adb工具的Android SDK Platform工具。只检查对应的框，然后点击Install。图7-18显示了我Mac电脑上的Android SDK Manager工具的界面。

安装界面列表中的所有东西都需要很长时间，如果只需要adb工具，取消所有其他复选框，然后点击Install即可。一旦安装完该工具，在主SDK目录中将会生成一个platform-tools目录。现在使用USB线将手机连接到电脑桌面。可以像如下示例这样运行adb工具：

在桌面Chrome浏览器上，访问https://localhost:9222，我们将看到一个URL列表，这些URL对应于手机Chrome浏览器每个选项卡的地址。点击想要调试的选项卡，可以使用桌面Chrome浏览器的Developer Tools进行调试并控制手机上的浏览器。

该方法最大的缺点是必须运行Android 4.0或更高版本，还必须安装Chrome测试版，并且手机还必须物理连接至电脑桌面。该方法只适用于这种场景。

iOS

iOS 6对移动Safari浏览器带来了一个新的远程网页审查特性（Web Inspector）。在设备上选择Settings→Safari→Advanced启用该特性。

现在，访问要在移动Safari里调试的网站（本例是Yahoo站点），将设备连接到运行桌面版Safari 6.0+的Mac电脑上，点击Develop菜单（必须启用才行）。

可以看到，我的iPhone现在可以进行远程Web审查了。可以选择任何打开的移动Safari页面，将其附加到调试器上，然后像往常一样进行调试，设置断点、JavaScript单步执行，并检查页面元素。

Adobe Edge Inspect

Adobe Edge Inspect（最初是Adobe Shadow）是一个跨移动操作系统的解决方案，其允许远程调试Android 、iOS以及Kindle Fire所有版本的WebKit移动浏览器。它由桌面Chrome扩展、桌面守护程序（类似于adb）以及设备上的应用程序构成。设备必须和电脑桌面在同一个本地网络，以便它们可以互相连接。Adobe Edge Inspect只能在Windows 7和Mac OS X上使用。

从Adobe Creative Cloud网站获取最新版本的Inspect守护程序。在页面上，也可以下载iOS、Androi、Kindle Fire版本的应用程序，以及Inspect Chrome扩展。

要启动Inspect应用程序，还必须登录到Creative Cloud网站——差劲的Adobe ！

在Chrome中，从Chrome Web Store安装Adobe Inspect，然后在浏览器上就可以看到Inspect扩展图标，点击它。

确保滑块设置为“on”。Adobe Inspect现在可以接受来自运行有Adobe Inspect应用程序的移动设备的连接了，可以从移动应用程序商店下载Adobe Inspect应用程序并运行它。尽管“discovery”功能是可用的，但我没有用成功。幸运的是，可以通过指定一个运行Adobe Inspect守护程序的桌面IP地址手动添加一个连接。

连接之后，我们会看到一个PIN码，必须将该PIN码填入到Chrome桌面浏览器。

从扩展图标，将PIN码输入到Chrome桌面浏览器。这样，该设备就可以进行调试了。

此时，在桌面浏览器上打开一个选项卡，并导航到想要调试的页面，该页面也会在移动设备上进行加载。事实上，一旦连接了，我们访问的任何URL都将镜像到移动设备上。点击Inspect扩展里的<>图标将启动调试器，其正在调试的内容就是移动设备上的URL地址里的内容。

现在就可以使用调试器，像调试本地页面一样进行调试了，选择元素、改变CSS，以及调试JavaScript。正在调试的位置就好像是在本地浏览器中运行的一样。

这种方式适用于所有版本的Android、iOS和Kindle Fire。唯一的要求就是，设备（或多个设备，因为也可以同时从一个Chrome桌面镜像调试多个设备）和电脑桌面必须在同一个本地网络，并且必须使用Chrome，而且必须使用Windows 7或Mac OS X。

如果一个网站是既支持移动又支持桌面的响应式网站，这种方式就显得笨拙了，所以最好设置Chrome桌面浏览器的User Agent以便匹配被镜像的任何设备。通过Developer Tools菜单可以完成上述操作，点击右下角的Settings滚轮并选择Overrides选项卡。

现在该网站在桌面浏览器上的阅读内容就和移动设备上正在查看的内容相匹配了，这将更易于调试。

这是一个整洁的工具，随着iOS 6以及Android原始调试工具的良好价值的出现，Adobe Inspect的使用是很有限的，所以如果可能的话，还是要坚持使用原生解决方案。

其他方面的移动调试选择

还有一些其他的移动调试可供选择，比如weinre （发音“winery”），它是PhoneGap的一部分，并且现在是一个名为Apache Cordova的Apache孵化器项目。Weinre表示WEb INspector Remote，和Adobe Inspect类似，但Inspect更加完美。随着iOS 6和Android原生调试的出现，它的实用性越来越小。

Jsconsole.com是另外一个选择：它需要通过书签将JavaScript注入代码注入到要调试的代码中。最终的结果是相似的，但该方法更笨拙且复杂。

总结

未来，获得健康的调试环境的最好选择，是采用我们这里讨论的原生选项之一，或者是Adobe Inspect。但是这个选择变化会很快，所以要时刻关注新的解决方案！

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。