Android 4.4 KitKat 使用Chrome DevTools 远程调试WebView

转载：http://blog.csdn.net/t12x3456/article/details/14225235

分类：AndroidAndroid版本变动及重要特性WebView

目录(?)[+]

Android上使用Chrome DevTools远程调试WebView

内容

• 远程调试概述
• 远程调试与ADB的Chrome扩展
  • 1.安装ADB扩展
  • 2.您的设备上启用USB调试
  • 3.通过USB连接您的设备
  • 4.使用扩展的ADT开始调试
  • 5.调试应用程序
  • 笔记
• 调试的Andr​​oid WebViews
  • 配置调试WebViews
  • 打开在DevTools WebView中
• 反向进行端口转发（实验）
  • 1.将移动设备连接
  • 2.启用反向端口转发
  • 3.添加一个端口转发规则
  • 4.优点

注：交互协议，我们使用我们的远程调试的详细信息，请参阅 调试器协议文件和 chrome.debugger的。

远程调试概述

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

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

当调试一个Web服务的应用程序从开发机器，你可以使用反向允许移动设备访问网站从开发计算机USB端口转发。反向端口转发需要的Chrome 29或更高版本的开发机上，铬28或更高版本的移动设备上。

远程调试与ADB的Chrome扩展

要开始调试，您需要：

• 一个Android手机或平板电脑与Chrome For Android28或更高版本，或者从GooglePlay上直接安装。
• 一条USB数据线.（Windows用户还需要安装相应的USB驱动）。
• 在您的开发机器安装了Chrome28或更高的版本
• 在开发机器上安装了ADB 基于Chrome扩展。
• 注：如果你已经在使用传统的远程调试工作流程，或者使用的是较早版本的Chrome， 可以继续看Android在Android上的远程调试。
  

1.安装ADB扩展

亚行Chrome扩展简化了设置远程调试的过程中。亚行扩展包括Android调试桥（ADB），它可以让你通过USB调试设备从开发机器。扩展提供了以下好处：

• 包括亚行，所以你不必安装完整的Andr​​oid SDK。
• 提供了一个用户界面，可方便地ADB守护进程的启动和停止，并查看连接的设备。

2. 您的设备上启用USB调试

为了通过USB调试，你需要设置你的Andr​​oid设备的发展。启用USB调试您的设备，然后系统检测到您的设备，指南中提到的。

要启用USB调试：

• 在大多数设备上运行Android 3.2或以上，你可以找到下的选项设置>应用程序>开发。
• 在Android 4.0和更高版本，它是在“设置”>“开发人员选项。
• 在Android 4.2和更高版本中，开发人员选项默认是隐藏的。为了使其可用，进入设置>关于手机和点击七次。返回到前一个画面，就可以找到开发人员选项。

如果你正在开发Windows，你需要安装相应的USB驱动程序，为您的设备。请参阅OEM的USB驱动程序在Android开发者网站.

欲了解更多信息，请参阅在Android开发者网站上的使用硬件真机调试.

3。通过USB连接您的设备

1. 使用USB数据线将移动设备连接到开发机器。
2. 在移动设备上，推出Chrome。打开设置>高级>开发工具和检查启用USB网络调试选项，如下所示：

将设备连接到您的开发机器时，你可能会看到警告USB调试设备请求允许从这台计算机上。

为了避免看到此警告您每次调试，检查总是允许从这台计算机，并单击“确定”。

4.使用ADB扩展进行调试

ADB扩展安装时，Chrome菜单旁边会出现一个灰色的Andr​​oid菜单图标。

要开始调试：

1.点击Android的图标，然后单击ADB开始。

一旦ADB已经开始，菜单图标变成绿色，并显示当前连接的设备的数量，如果有的话。
2.点击 查看检验目标 打开 ：检查 页面，显示每个连接的设备及其选项卡。 3.查找您要调试，并点击“ 检查 链接的URL旁边的移动设备“选项卡。

如果你没有看到任何连接的设备：

• 检查您的设备连接到USB。
• 确保您的设备发出ADB设备命令列为可用。如果没有，检查是否有您的设备上启用USB调试。
• 确保在Chrome为Android设置启用USB调试。

5.调试你的应用程序

例如，检查您所选择的页面中的元素和元素在Chrome移动设备实时亮点:

同样，编辑脚本或执行命令从DevTools控制台会影响您的设备上的页面被检查。您也可以使用所有其他面板，如 TimeLine和Profiles。

注意:

• 您可能会注意到，远程调试的过程中，你有机会获得DevTools的版本不同的版本，你已经在开发机器上运行.这是因为这些工具在Android设备上使用的Chrome版本同步。
• 因为我们通过USB连接，你可以保持一个真正网络上的设备，并在实际的网络条件下，查看网络在网络面板中的瀑布流状态
• 硬件往往运行在移动设备上的内容慢得多，所以使用TimeLine分析如何优化渲染和CPU的最佳效果.
• 如果你在开发机器上运行Web服务器，网络的限制，防止您的移动设备访问服务器，反向端口转发.

调试的Andr​​oid WebViews

启动的Andr​​oid 4.4（KitKat），您可以使用的DevTools调试原生的Andr​​oid应用程序的Andr​​oid WebViews里面的内容。调试WebViews要求：

• 一个Android设备或模拟器，运行Android 4.4或更高版本，设备上已开始USB调试.
• Chrome 30或更高版本。增强的WebView调试UI可以在Chrome 31或更高版本中可用.
• 一个用来调试WebView的Android应用程序

配置调试WebViews

在Chrome的启用USB网络调试，设置不影响WebViews。要调试您的WebView的内容，您需要启用它在您的应用程序编程调用setWebContentsDebuggingEnabled的WebView类的静态方法。

[java] view plain copy

1. if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
2. WebView.setWebContentsDebuggingEnabled(true);
3. }

此设置适用于所有应用程序的WebViews。请注意，网络调试， 不 影响应用程序的清单中的状态调试的 标志.如果你想只启用Web调试时， debuggable是true ，在运行测试标志.
[java] view plain copy

1. if（Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT）{
2. （0=（getApplcationInfo（）.flag=ApplicationInfo.FLAG_DEBUGGABLE））{
3. WebView.setWebContentsDebuggingEnabled（true）;
4. }
5. }

打开在DevTools WebView中

调试WebView中的DevTools：

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

   将设备连接到您的开发机器时，你可能会看到警告USB调试设备请求允许从这台计算机上。

   为了避免看到此警告您每次调试，检查总是允许从这台计算机，并单击“确定”。

2. 在Chrome开发机器上，打开检查。
3. 您应该看到您的应用程序和调试的WebViews列表的名称。单击检查链接旁边的标签之一，检查的WebView的内容DevTools。

注：在Chrome 31后，约：检查页面提供了一个图形代表的WebView的大小和设备的屏幕上的相对位置。月31日，铬约前 ：检查页面提供的WebView的标题。设置标题上所有WebViews simpifies的过程中，选择正确的WebView。

反向进行端口转发（实验）

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

在Chrome中的一个新功能的Andr​​oid被称为“反向端口转发”使得这个简单的做​​。它的工作方式在移动设备上创建一个监听TCP端口映射到一个特定的开发机器上的TCP端口。转发端口的流量通过通过USB旅行，所以它不依赖于移动设备的网络配置。

要使用此功能，您需要：

• 在开发环境上的安装的Chrome为 29或更高版本
• 在开发系统上安装Android调试桥（ADB扩展或全的Andr​​oid SDK）
• Andr​​oid设备上安装的Chrome为28或更高版本

1。将移动设备连接

1. 通过USB将设备连接到您的开发机器。
2. 停止目前，Chrome浏览器在移动设备上运行的所有实例。
3. 打开Chrome浏览器的Andr​​oid。
4. 前往“设置“>“开发者工具”，然后打开在启用USB网络调试。
5. 启动亚行开发机器上：
   • 如果您使用的是ADB，点击“ADB”图标，并单击“开始“ADB。您应该看到的图标变成绿色，并显示一个数字，表示连接的设备数量。
   • 如果你不使用扩展，打开一个终端，运行ADB设备。您应该看到的连接的android设备ID列表

2。启用反向端口转发

注：在Chrome 31和端口转发后，已不再是实验性的。它可以启用和配置，直接从设备“选项卡中的关于检查页面。

在Chrome开发机器上执行以下步骤：

1. 打开：标志，打开在启用开发工具实验，并重新启动Chrome浏览器。

1. 打开检查。您应该看到您的移动设备和其打开的标签列表。
2. 点击检查任何列出的站点旁边。
3. 在DevTools打开的窗口中，打开设置面板。
4. 在实验中，打开启用反向端口转发。

1. 关闭在DevTools窗口，并返回信息：检查。

3。添加一个端口转发规则

1. 再次单击“检查链接再次打开DevTools的，开放的设置。你应该看到一个新的端口转发“选项卡。
2. 点击端口转发。
3. 在设备端口“字段中，输入的Andr​​oid设备听的端口号（默认为8080）。

4.在目标字段，增加你的应用在本地运行的端口号.

4.优点

在Chrome为Android，开放的localhost：<device-port-number>，<device-port-number>您输入的值在设备端口字段（默认是8080）。您应该看到您的开发机器所服务内容。

Chrome 29之前，没有充分发挥功能反向端口转发。 如果您遇到反向端口转发的问题，确保你使用Chrome 29或更高版本。如果端口转发规则似乎没有效果，添加第二个，重复的端口转发规则有时可以解决的问题在早期版本的Chrome。

更多相关文章

1. Android检查版本更新下载安装
2. Android笔记： Android版本号
3. android获得设备信息
4. android之蓝牙设备的使用01
5. Android版本下载以及切换
6. 【Unity3D】Unity3D与Android的交互通信（Android Studio3.0版本）
7. Android 升级SDK管理器版本到20，安装Android 4.0以及更高版本
8. 三位一体！Android Ice Cream Sandwich可能创造全新设备使用的里程
9. Android 5.1源代码与Nexus设备工厂镜像下载

随机推荐

1. 动态更改设置值?
2. jquery lazyload延迟加载技术的实现原理
3. 复选框上的反应仅适用一次。哪里不对？
4. jQuery UI对话框调整大小关闭按钮
5. 如何在jQuery中选择最后一个子元素?
6. 在引导程序弹出窗口中使用交互式元素
7. jQuery去掉导航分割线的最后一条竖线
8. jQuery $ajax 传中文数据到action乱码解
9. 使用php变量用ajax更新jqplot
10. JS检查浏览器是否支持CSS Snap Points