Android上使用Chrome DevTools远程调试WebView
内容
远程调试概述
您的网页内容在移动的经验比什么用户体验桌面上的运作非常不同。谷歌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调试设备从开发机器。扩展提供了以下好处:
- 包括亚行,所以你不必安装完整的Android SDK。
- 提供了一个用户界面,可方便地ADB守护进程的启动和停止,并查看连接的设备。
2. 您的设备上启用USB调试
为了通过USB调试,你需要设置你的Android设备的发展。启用USB调试您的设备,然后系统检测到您的设备,指南中提到的。
要启用USB调试:
- 在大多数设备上运行Android 3.2或以上,你可以找到下的选项设置>应用程序>开发。
- 在Android 4.0和更高版本,它是在“设置”>“开发人员选项。
- 在Android 4.2和更高版本中,开发人员选项默认是隐藏的。为了使其可用,进入设置>关于手机和点击七次。返回到前一个画面,就可以找到开发人员选项。
如果你正在开发Windows,你需要安装相应的USB驱动程序,为您的设备。请参阅OEM的USB驱动程序在Android开发者网站.
欲了解更多信息,请参阅在Android开发者网站上的使用硬件真机调试.
3。通过USB连接您的设备
- 使用USB数据线将移动设备连接到开发机器。
- 在移动设备上,推出Chrome。打开设置>高级>开发工具和检查启用USB网络调试选项,如下所示:
将设备连接到您的开发机器时,你可能会看到警告USB调试设备请求允许从这台计算机上。
为了避免看到此警告您每次调试,检查总是允许从这台计算机,并单击“确定”。
4.使用ADB扩展进行调试
ADB扩展安装时,Chrome菜单旁边会出现一个灰色的Android菜单图标。
要开始调试:
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服务器,网络的限制,防止您的移动设备访问服务器,反向端口转发.
调试的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
类的静态方法。
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:
-
使用USB数据线将移动设备连接到开发机器。
将设备连接到您的开发机器时,你可能会看到警告USB调试设备请求允许从这台计算机上。
为了避免看到此警告您每次调试,检查总是允许从这台计算机,并单击“确定”。
- 在Chrome开发机器上,打开检查。
- 您应该看到您的应用程序和调试的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。将移动设备连接
- 通过USB将设备连接到您的开发机器。
- 停止目前,Chrome浏览器在移动设备上运行的所有实例。
- 打开Chrome浏览器的Android。
- 前往“设置“>“开发者工具”,然后打开在启用USB网络调试。
- 启动亚行开发机器上:
- 如果您使用的是ADB,点击“ADB”图标,并单击“开始“ADB。您应该看到的图标变成绿色,并显示一个数字,表示连接的设备数量。
- 如果你不使用扩展,打开一个终端,运行ADB设备。您应该看到的连接的android设备ID列表
2。启用反向端口转发
注:在Chrome 31和端口转发后,已不再是实验性的。它可以启用和配置,直接从设备“选项卡中的关于检查页面。
在Chrome开发机器上执行以下步骤:- 打开:标志,打开在启用开发工具实验,并重新启动Chrome浏览器。
- 打开检查。您应该看到您的移动设备和其打开的标签列表。
- 点击检查任何列出的站点旁边。
- 在DevTools打开的窗口中,打开设置面板。
- 在实验中,打开启用反向端口转发。
- 关闭在DevTools窗口,并返回信息:检查。
3。添加一个端口转发规则
- 再次单击“检查链接再次打开DevTools的,开放的设置。你应该看到一个新的端口转发“选项卡。
- 点击端口转发。
- 在设备端口“字段中,输入的Android设备听的端口号(默认为8080)。
4.在目标字段,增加你的应用在本地运行的端口号.
4.优点
在Chrome为Android,开放的localhost:<device-port-number>,<device-port-number>您输入的值在设备端口字段(默认是8080)。您应该看到您的开发机器所服务内容。
Chrome
29之前,没有充分发挥功能反向端口转发。如果您遇到反向端口转发的问题,确保你使用Chrome 29或更高版本。如果端口转发规则似乎没有效果,添加第二个,重复的端口转发规则有时可以解决的问题在早期版本的Chrome。
分享到:
相关推荐
Android 4.4 Kitkat Phone工作流程浅析(十二)__4.4小结与5.0概览 资源文件 文章链接: http://blog.csdn.net/yihongyuelan
http://blog.csdn.net/yihongyuelan/ Android 4.4 Kitkat Phone工作流程浅析(十一)__PSensor工作流程浅析 文中涉及相关图片资源
Android 4.4 Kitkat Phone工作流程浅析(十)__"通话显示"查询流程 http://blog.csdn.net/yihongyuelan/
App: Chrome Version: 81.0.4044.138 (404413800) armeabi-v7a Min: Android 4.4 (Kitkat, API 19) Max: Android 6.0 (Marshmallow, API 23) Target: Android 10 (Q, API 29) May 6, 2020
demo 主要功能是接收短信,支持android 4.4以上版本和android 4.4以下版本。在写代码时也在网上找了好多类似的代码,但是没有找到一个完整的适合新手学习的,都是一些只支持android4.4以下的android系统应用demo,...
目前公版上scrcpy需要android5.0, 4.4刚刚调通 测试至少部分手机上可用 有旧手机有需要的可以帮忙看下能不能用。csdn没分了 挣点分见谅 Scrcpy-GUI群里已经共享 穿鞋144cm
近期需要把 Android4.4 KitKat 的 HDMI 高清输出功能移植到 fs4412 开发平台,查阅了相关资料,经过一段时间的研究、调试,终于成功输出 1080P 的图像到电视,当然也支持720P 的输出了。
TI-BLE-Sensortag-Android ti ble android 4.4 kitkat源代码 开发人员版本,用于与TI CC2541 Sensortag进行控制/交互。 允许对选定的GATT UUID特性进行扫描,连接和读写(使用自定义键盘)。
文章《Android 4.4 Kitkat Phone工作流程浅析(三)__MO(去电)流程分析》资源下载 http://blog.csdn.net/yihongyuelan/article/details/21069061 主要包含: MTK Android 4.4 拨号时序图(多张) MTK Android 4.4 ...
Android 4.4 Kitkat Phone工作流程浅析(六)__InCallActivity显示更新流程 对应图片资源 http://blog.csdn.net/yihongyuelan/article/details/23917581
文章:《Android 4.4 Kitkat Phone工作流程浅析(七)__来电(MT)响铃流程》中涉及的时序图 http://blog.csdn.net/yihongyuelan/article/details/24640819
语言:English (United States) Android kitkat 4.4.4是用于基于Linux的android update os智能手机的移动操作系统。 ...//获取此// //单击下面给出的“网站”链接以下载android kitkat 4.4 4下载apk
近期需要把Android4.4 KitKat 的HDMI 高清输出功能移植到iTOP-4412 开发平台,查阅了相关资料,经过一段时间的研究、调试,终于成功输出1080P的图像到电视,当然也支持720P的输出了,这里笔者记录移植过程及注意事项...
在使用Debloater by Gatesjunior工具时,除了打开USB Debugging调试模式,与之被执行工作的Android设备最好至少运行着Android 4.4 Kitkat系统版本,否则需要Root权限。而你的电脑端,当然要安装好正确的Android USB...
文章《Android 4.4 Kitkat Phone工作流程浅析(五)__MT(来电)流程分析》中涉及的时序图 http://blog.csdn.net/yihongyuelan/article/details/21953045
基于最新的android4.4代码,详细分析Browser app,framework webkit/webview, extern/chromium_org的改变.
App: Chrome Version: 81.0.4044.138 (404413801) x86 Min: Android 4.4 (Kitkat, API 19) Max: Android 6.0 (Marshmallow, API 23) Target: Android 10 (Q, API 29) May 6, 2020 password:0
State-of-the-Art-Exploring-the-New-Android-KitKat-Runtime android security test
美国时间2013年10月31日,Google正式发布了全新版本的移动操作系统Android4.4KitKat。据google官方介绍,Android4.4降低了硬件的需求,提高了程序运行效率。距离4.4发布已经过去3个月了,不少朋友也已经体验到了4.4...