转载：http://www.seejs.com/archives/296
注意: 我们在远程调试中使用的交互协议信息，请参阅调试协议文档和chrome.debugger。
远程调试概述
网页内容在移动设备上的用户体验与桌面型的相比有很大的区别。Google Chrome DevTools 有一整套你已经熟悉的工具允许你用来 inspect, debug, 以及 analyze 在移动设备上的网页，这意味着你可以使用你的开发机器上的Chrome DevTools来调试一个移动设备上打开的页面。
只要你的移动设备通过 USB 连接到开发机器，你就可以开始调试，你可以查看甚至修改结构，脚本和样式，直到你得到一个在所有设备上都表现完美的没有 bug 的页面。 当你在你的开发机器上调试一个web应用的时候，你可以使用端口反向转发来允许移动设备通过 USB 从开发机器访问一个网站。端口反向转发要求开发机器安装Chrome 29或更高版本，并且要求移动设备安装Chrome 28或更高版本。
使用 Chrome 的 ADB 扩展进行远程调试
在开始调试之前，你需要做以下准备：
- 一台安装了Chrome 28或更新版本浏览器的 Android 手机或平板。
- 一条 USB 连接线（Windows用户还需要安装相应的USB设备驱动程序）.
- 在你的开发机器上已安装29或更新版本的Chrome。
- 在你的开发机器上已经安装Chrome的ADB扩展。
注意：如果你已经在使用旧版的远程调试流程，或者使用更早版本的Chrome，请参看Remote Debugging on Android (Legacy Workflow)。
1. 安装ADB扩展
ADB扩展简化了远程调试的设置过程。ADB扩展包含了 Android Debug Bridge (ADB)，它使得你可在开发机器上通过 USB 调试你的移动设备。这个扩展提供以下好处：
- 包含了ADB，因此你不需要再安装完整版的Android SDK。
- 为轻松的控制开始和停止ADB守护进程提供了一个UI，并且可以查看连接中的设备。
Chrome Web Store的安装进程不能在Windows 8中正常工作。如果你在安装过程中遇到任何问题，可以在github上ADB扩展的回复中查看如何下载和安装扩展的详细信息。
2. 启用你的移动设备上的USB调试功能
为了能通过 USB 进行调试，你需要设置你的Android设备为开发环境。根据向导提示，启用你的移动设备上的USB调试功能，然后系统将检测你的设备。 启用USB调试:
- 在大多数运行Android 3.2或更早版本的设备中，你可以找到以下选项“设置” > “应用” > “开发环境”。
- 在Android 4.0和更新版本中，它是“设置” > “开发者选项”。
- 在Android 4.2及以后，开发者选项默认被隐藏。前往“设置” > “关于手机”，根据提示点击版本号，直到开启“开发者选项”。返回上一屏查找“开发者选项”。
如果你是在Windows上做开发，你需要为你的移动设备安装相关的USB驱动。参考Android开发者网站上的OEM USB Drivers。 获取更多信息，请查看发布在Android开发者网站上的Setting up a Device for Development。
3. 通过USB链接你的移动设备
- 用USB连接线连接你的开发机器和移动是被。
- 在移动设备上，启动Chrome。打开“设置” > “高级” > “开发工具”，确认启动USB网页调试，如图所示：
当把你的设备连接到开发机器的时候，你有可能会在移动设备上看到一个为这台电脑请求USB调试权限的警告。
为了避免每次调试都看到这条警告，选择“总是允许来自这台电脑的请求”，点击确定。
4. 开始使用 ADB 扩展进行调试
当ADB扩展安装完成后，在Chrome菜单旁边将会出现一个灰色的Android菜单图标。 开始调试：
- 点击Android图标，然后点击“启动ADB”。
一旦ADB启动成功，菜单图标变为绿色并且如果有设备已经连接，还会列出当前已连接设备的数量。
- 点击“查看检测目标”打开about:inspect页面，这里会列出每一个已连接的设备以及它的选项卡。
- 查找你想要调试的设备选项卡，点击它的URL旁边的查看连接。
如果你没有看到任何已连接的设备：
- 检查你的设备已经连上了USB。
- 通过发送adb devices命令确认你的设备被列为可用。如果不是，检查你设备的USB调试模式是否启用。
- 确认在Android版的Chrome中已经启用USB调试功能。
5. 调试你的应用
例如，查看你所选中页面中的元素，在你的移动设备上的Chrome中这个元素对应的页面结构会立即高亮显示。
同样，在DevTools的控制台中编写脚本或者执行命令，都会影响你设备中检查的页面。你也可以使用所有其他面板，例如Timeline和Profiles。
注意
- 你可能会注意到在远程调试过程中你可访问与你的开发机器上的版本不同的DevTools。这是因为工具会同步Android设备上使用的Chrome版本。
- 因为我们通过USB链接电脑，所以你可以让你的设备处于一个真实的网络中，并且在Network面板中查看真实网络条件下的网络瀑布流。
- 移动设备上的硬件运行你的网页通常会比PC更慢，因此使用Timeline面板来分析如何优化渲染和CPU来达到最佳效果。
- 如果你在你的开发机器上运行一个web服务器，并且网络限制阻止你的移动设备想这台服务器发送请求，请参看reverse port forwarding。
端口反向转发（实验）
同样，你有一台web服务器运行在你的本地开发机器上，而你想通过你的移动设备访问这个网站。如果你的移动设备和开发机器处于同一个网络环境，这很简单。但这在某些情况可能很困难，比如在一个受限的企业网络中。 一个在Android版Chrome中被叫做“端口反向转发”的新特性，使得这个问题变得简单。它通过在你的移动设备上建立一个监听TCP端口映射到你的开发机器上的特定的TCP端口。经过转发端口的信息流通过USB传播，因此，它不依赖于移动设备的网络配置。 要使用这个特性，你需要做以下准备：
- 在你的开发机器上安装Chrome 29或更新版本。
- 在你的开发机器上安装Android Debug Bridge（Chrome ADB扩展或完整版的Android SDK）。
- 在你的移动设备上安装Android版的Chrome 28或更新版本。
次过程假定你已经拥有了像Remote debugging with the ADB Chrome extension中描述的远程调试配置。
1. 链接你的移动设备
- 通过USB连接你的设备和开发机器。
- 停止目前运行在移动端Chrome下的所有示例。
- 打开Android版Chrome。
- 前往“设置” > “开发者工具”，然后开启USB网页调试。
- 开启你的开发机器上的ADB：
- 如果你使用ADB扩展，点击ADB图标，然后点击Start ADB。你应该可以看到图标变绿了，并且显示已连接的设备总数。
- 如果你不使用扩展，打开一个终端并且执行adb devices命令。你应该可以看到已连接的设备的ID列表。
2. 启用端口反向转发
在你的开发机器上执行下面的步骤：
- 打开about:flags，开启Enable Developer Tools experiments，然后重启Chrome。
- 打开about:inspect。你应该可以看到你的设备和它打开的选项卡。
- 点击任何一个已列出站点旁边的Inspect。
- 在打开的DevTools窗口中，打开Settings面板。
- 在Experiments中，勾选Enable reverse port forwarding。
- 关闭DevTools窗口，回到about:inspect。
3. 添加一个端口转发规则
- 再次点击Inspect链接打开DevTools，然后再次打开Settings。你应该可以看到一个Port forwarding选项卡。
- 点击Port Forwarding。
- 在设备端口输入框中，输入Android设备需要监听的端口号（默认为8080）。
- 在目标输入框中，追加端口号到运行你的应用程序的localhost上。
4. 利益
在Android版Chrome中，打开localhost:<设备端口号>，<设备端口号>是你填入设备端口输入框的值（默认为8080）。你应该可以看到你开发机器上服务器中的内容。
Chrome 29之前，没有充分发挥端口反向转发的功能。如果你遇到端口反向转发的问题，请确认你正在使用Chrome 29或更新版本。如果端口转发规则看起来没有效果，添加第二个规则，复制端口转发规则有时候能够解决一些较早版本Chrome中的问题。