Android上使用Chrome DevTools 远程调试WebView

 

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

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

分类： Android Android版本变动及重要特性 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类的静态方法。

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

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

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

打开在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。