如何用 Chrome for Android 做远程遥控 debugging

Chrome for Android有一个针对开发者很贴心的功能，就是远程遥控 debugging，在桌面电脑上为移动浏览器进行debug。首先你需要在电脑上安装Android SDK和Chrome桌面浏览器，并将移动设备设置为开发模式，通过USB线让Android手机与电脑连接，打开Android Debug Bridge (adb)，并在手机的Chrome里打开Settings - Under the hood - Developer tools 里的 Enable USB Web debugging（如上图）。

在电脑上打开端口转发：

adb forward tcp:9222 localabstract:chrome_devtools_remote

在桌面电脑的Chrome里打开localhost:9222：

然后就可以看到Android手机的Chrome打开的网页了，打开任何一个网页即可开始在桌面电脑上对手机上的网页进行debug：

继续观看官方的介绍视频：

http://v.youku.com/v_show/id_XMzUwMTA4MDI0.html

iOS设备观看地址，原始视频地址。

----------------------------------------------------------------------------------------------------------------------------------

远程调试Chrome浏览器在Android上

内容

• 远程调试概述
  • 设置您的设备
    • 直接连接通过USB
  • 连接您的设备
  • 调试你的应用程序
• Screencasting你的设备的屏幕
  • 与截屏互动
• 调试Android的WebViews
  • 用于调试配置WebViews
  • 打开DevTools WebView中
• 反向端口转发
  • 连接您的移动设备
  • 启用反向端口转发
  • 添加一个端口转发规则

注：有关我们用于远程调试的交互协议的信息，请参阅调试器协议文档和chrome.debugger。

远程调试

移动你的网页内容的工作经验非常不同于桌面上什么用户体验。谷歌Chrome DevTools允许您检查，调试和分析设备上的经验与全套工具，你已经习惯了，这意味着你可以使用Chrome DevTools在开发机器上的页面在移动设备上进行调试。

发生在USB调试只要您的移动设备连接到开发计算机上，您可以查看和修改HTML，脚本和样式，直到你得到一个bug的页面，其行为完全在所有设备上。

开始远程调试，您需要：

• Android手机或平板电脑浏览器为Android的谷歌播放32或更高版本。
• 使用USB电缆将设备插入。（Windows用户还需要安装相应的USB设备驱动程序。）
• Chrome浏览器32或更高版本安装在您的开发计算机。

当调试一个Web应用程序从开发机器服务，您也可以使用 反向端口转发允许移动设备从开发计算机访问一个网站通过USB。

1。设置您的设备

为了调试通过USB，你需要设置你的Andr​​oid设备的发展。

要启用USB调试：

• 在Android 4.2及更高版本，开发人员选项默认是隐藏的。使其可用，进入设置>关于手机和水龙头内部版本号七倍。是啊，只需轻按7倍，即使它似乎疯了。然后，返回到上一画面，以找出开发人员选项。
• 在Android 4.0和4.1，这是在设置>开发选项。

 

如果您正在开发在Windows上，则需要安装相应的USB驱动程序为您的设备。看到OEM的USB驱动程序在Android开发者网站。

2.1直接连接通过USB

DevTools现在支持原生USB调试连接的设备。您不再需要配置亚行或亚行的插件，看看Chrome浏览器的所有实例的Chrome浏览器供电的WebView上连接到系统的设备。此功能适用于所有操作系统的：在Windows，Mac，Linux和Chrome操作系统。

Windows用户？您需要安装 的设备驱动程序，以使Windows和您的设备之间的通信。

只需访问一下：检查和验证发现USB设备进行检查。

Chrome浏览器和设备之间的这种直接USB连接可能会中断一个``ADB连接，你可能会试图建立。如果你需要使用`ADB`二进制其他原因，取消选中“发现USB设备”复选框，拔出设备，并插回，通过`ADB设备`你建立连接之前。

注意：如果您遇到问题，上面的技术，或者正在使用Chrome浏览器的旧版本，你可以尝试传统的工作流程进行连接，它使用 adb的二进制文件从Android SDK： Android上远程调试（传统工作流程）。

3。连接您的设备

1. 使用USB数据线将移动设备连接到开发机器。
2. 当您的设备连接到开发计算机上，您可能会看到在这台电脑上的设备请求权限USB调试警报。为了避免看到此警示每次调试时，检查总是允许从这台计算机，然后单击OK（确定）

现在，看到所有连接的设备，进入浏览器菜单>工具>检查设备：

您也可以直接导航到 约：检查。

此页面会显示每个连接的设备及其选项卡。您可以同时连接多个设备，以及多个版本的Chrome中每个设备上打开。在页面上显示较低，可调试WebViews出现在这里，也是如此。

查找你感兴趣的标签，然后单击检查链接，打开DevTools就可以了。您也可以重新载入页面，把它带到前面，或者将它关闭。最后，你可以通过一个文本输入框打开设备上的新链接。

故障排除

• 在您的设备，请确认你有开发人员选项可用，USB调试打开。如果它的工作和联系，它会设定您的设备上的通知。
• 请确认您使用的是Chrome浏览器为Android 32或更高版本。
• 如果USB调试已打开，但有关：检查没有显示您的设备检查发现USB设备进行检查。如果是这样，拔出设备，并尝试撤消所有USB授权的开发人员选项重试。
• 你可以试试Chrome浏览器金丝雀在桌面上为新的改进日常降落。

4。调试应用程序

例如，在检查页面中的元素您已经选择和元素的亮点在您的设备上的Chrome移动的实时性。事实上，你可以打开通过点击图标检查模式，然后点击您的设备屏幕上。

同样，在编辑脚本或从DevTools控制台执行命令影响被检查设备上的页面。您也可以也可以使用其他所有的面板，如时间轴和配置文件。

笔记

• 因为我们是通过USB连接，你可以保持一个真正的蜂窝网络上的设备，并查看实际的网络条件下的网络面板网络的瀑布。
• Chrome浏览器会阻止你的屏幕进入休眠状态，而远程调试。要知道，虽然有用，这使得您的设备安全性较低。
• 在移动设备上的硬件经常跑你的内容要慢得多，所以使用时间轴来分析如何优化渲染和CPU的最佳效果。
• 如果你在开发机器上运行Web服务器和网络限制防止您的移动设备访问服务器，请参阅反向端口转发。
• 您可能会注意到你有在远程调试访问DevTools的版本不同，你已经在开发机器上运行的版本。这是因为这些工具都与Chrome浏览器的Andr​​oid版在使用同步。

Screencasting你的设备的屏幕

Screencasting可以让你把你的设备的体验到你的机器。这可以让你保持，而不是来回切换设备和DevTools之间你的注意力在一个屏幕上。

点击截屏图标，工具栏上开辟了一个面板在电脑上显示你的设备的屏幕。当您浏览，点击，滚动，该截屏显示器将提供一个什么样的设备上的实时视图。

当你在screencasting您的设备，您可以控制​​移动浏览器的前进和后退按钮，重新载入，并直接更改URL。

与截屏互动

您可以通过多种方式与您的设备的截屏互动。

• 输入你的机器的键盘上的这些按键被发送到设备
• 点击可挖。点击将被发送到该设备作为适当的触摸事件。
• 滚动鼠标滚轮所，触控板，或用丢指针的内容。
• 检查元素通过选择放大镜或按Cmd的 + Shift键 + Ç
• 放大与模拟捏手势Cmd的 + 点击用两个手指 + 拖曳
• 调整的截屏是 ​​在更好地大小的内容窗格。
• 透明的截屏部分所涵盖的事情，比如多功能框和键盘。只有页面内容正在screencasted。

注：该截屏功能反复捕捉设备，让您实时取景上的截图，但是这确实有一个性能开销。禁止截屏，如果你正在测试的帧率敏感的情况。

调试Android的WebViews

开始的Andr​​oid 4.4（奇巧），您可以使用DevTools到Android WebViews内原生的Andr​​oid应用程序的内容进行调试。调试WebViews要求：

• 在Android设备或模拟器运行Android 4.4或更高版本，如描述的USB调试启用 2。您的设备上启用USB调试。
• 铬30或更高版本。增强的WebView界面调试可以在Chrome 31或更高版本。
• 一个Android应用程序与web视图配置进行调试。

用于调试配置WebViews

在启用USB调试网页在浏览器设置不会影响WebViews。调试你的web视图的内容，你需要通过调用来启用它编程方式从您的应用程序中setWebContentsDebuggingEnabled，对一个静态方法的WebView类。

如果（Build.VERSION.SDK_INT> = Build.VERSION_CODES.KITKAT）{
    WebView.setWebContentsDebuggingEnabled（真）;
}

此设置适用于所有应用程序的WebViews的。请注意，网络调试不是受的状态调试的国旗在应用程序的清单。如果您要启用网络调试，只有当调试的是真实的，测试该标记在运行时。

如果（Build.VERSION.SDK_INT> = Build.VERSION_CODES.KITKAT）{
    如果（0！=（getApplcationInfo（）。旗＆= ApplicationInfo.FLAG_DEBUGGABLE））{
        WebView.setWebContentsDebuggingEnabled（真）;
    }
}

打开DevTools WebView中

调试在DevTools WebView中：

1. 使用USB数据线将移动设备连接到开发机器。

   当您的设备连接到开发计算机上，您可能会看到在这台电脑上的设备请求权限USB调试警报。

   为了避免看到此警示每次调试时，检查总是允许从这台计算机，然后单击OK（确定）。

2. 在Chrome浏览器在开发计算机上，打开一下：检查。
3. 您应该看到您的应用程序的名称和调试的WebViews列表。单击检查链接旁边的一个选项卡以检查web视图的内容DevTools。

注：在铬31及更高版本， 关于：检查页面提供了一个图形代表的WebView的大小和位置相对于设备的屏幕。在此之前的Chrome 31日， 约：检查网页只提供web视图的标题。设置一个标题在所有的WebViews的simpifies采摘正确的WebView的过程。

端口转发

通常你有你的本地开​​发机器上运行一个Web服务器，而你想从你的设备连接到该站点。如果移动设备和开发机是在同一网络上，这很简单。但是这可能是困难的在某些情况下，像一个受限制的企业网络上。

Chrome浏览器的Andr​​oid支持端口fowarding使这一工作流程非常简单的事情。它的工作原理是你映射到一个特定的TCP端口在开发机器上的移动设备上创建一个监听TCP端口。通过转发端口的流量行进通过USB，所以它不依赖于移动设备的网络配置。

此过程假定您已经配置远程调试和工作。

1。连接您的移动设备

1. 您的设备连接到您的开发机器通过USB。
2. 阻止Chrome浏览器的移动设备上当前正在运行的所有实例。
3. 打开Chrome浏览器为Android。

2。启用端口转发

执行在开发机器上的Chrome浏览器执行下列步骤：

1. 打开有关：检查。您应该看到您的移动设备，而其打开的标签页列表。
2. 单击端口转发在顶部的按钮。
3. 在设备端口字段中，输入的Andr​​oid设备应该监听（默认为8080）的端口号。
4. 在主机字段中，添加在您的Web应用程序在本地主机上运行的IP地址和端口号。
5. 请务必检查启用端口转发碰前完成。

3。利润

于有关：检查你现在应该看到一个绿色的圆圈，表示你的端口转发是succssful。现在，在您的本地网址进入开放标签字段，打去打开它在您的设备的浏览器。

您应该看到正在服务的开发机器上的内容。

除非另有说明，本网页的内容是根据授权知识共享署名3.0许可和代码样本下的许可使用Apache 2.0许可证。如需详细资讯，请参阅我们的网站政策。

最后更新2014年2月17日。