最新消息:欢迎光临!

Android上使用Chrome DevTools 远程调试WebView

css3/html5 findever 2191浏览 0评论

内容

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

注意:连接的时候要先连接google的一个服务,所以需要翻墙。。,否则会一直在转圈,连接不上

远程调试概述

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

          调试Chrome浏览器为Android使用Chrome开发人员工具

发生在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调试设备从开发机器。扩展提供了以下好处:

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

     Chrome Web Store logo

     

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

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

要启用USB调试:

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

             在开发人员选项USB调试设置

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

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

3。通过USB连接您的设备

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

                             在Chrome为Android启用USB Web调试

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

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

4.使用ADB扩展进行调试

ADB扩展安装时,Chrome菜单旁边会出现一个灰色的Android菜单图标。

要开始调试:

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

                        亚行扩展菜单

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

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

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

5.调试你的应用程序

    检查一个远程页面使用Chrome开发人员工具
例如,检查您所选择的页面中的元素和元素在Chrome移动设备实时亮点:
                  检查远程设备上的元素

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

注意:

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

调试的Android WebViews

启动的Android 4.4(KitKat),您可以使用的DevTools调试原生的Android应用程序的Android WebViews里面的内容。调试WebViews要求:

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

配置调试WebViews

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

[java] view plaincopy

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

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

[java] view plaincopy

  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. 为了避免看到此警告您每次调试,检查总是允许从这台计算机,并单击“确定”

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

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

      

反向进行端口转发(实验)

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

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

要使用此功能,您需要:

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

1。将移动设备连接

  1. 通过USB将设备连接到您的开发机器。
  2. 停止目前,Chrome浏览器在移动设备上运行的所有实例。
  3. 打开Chrome浏览器的Android。
  4. 前往“ 设置“ >“开发者工具”,然后打开在启用USB网络调试
  5. 启动亚行开发机器上:

    • 如果您使用的是ADB,点击“ADB”图标,并单击“ 开始“ADB。您应该看到的图标变成绿色,并显示一个数字,表示连接的设备数量。
    • 如果你不使用扩展,打开一个终端,运行ADB设备。您应该看到的连接的android设备ID列表

2。启用反向端口转发

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

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

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

           信息:标志

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

          实验开发工具的设置面板中

so,目前的调试方案总结如下:

220140520111330

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

转载请注明:Findever » Android上使用Chrome DevTools 远程调试WebView

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址