超实用，高效调试安卓App内嵌网页工具

前言

朋友小X在一家小公司从事安卓开发工作。

有一天老板想做一个功能。用户能通过前端网页，调用起原生安卓应用支持的功能，如人脸识别等。

前端开发主要使用Javascript进行开发，安卓应用使用Kotlin进行开发。

Javascript是动态语言，Kotlin是静态语言。

动态语言的优缺点

• 不用考虑声明变量类型，代码编写可以比较随意。
• 没有语法检查工具时，只有运行后才知道，代码有无语法问题。

静态语言的优缺点

• 要考虑声明变量类型。
• 在使用IDE时，可提前发现语法错误。

而小X的公司，没有为前端开发人员提供语法检查工具，只能靠前端开发自查自改。

负责前端网页的妹子是一位新手，写代码经常出现各种语法问题，且不知道如何在Android Webview上进行有效调试。

为了调试，前端妹子只会在有可能出问题的代码，添加alert函数，通过提示框的信息，来进行调试。

使用这种方式进行开发，开发效率非常低下，进度远远落后于计划。

但是老板催着功能赶紧上线，为了尽快上线，小X只能陪着加班，帮助前端妹子排查问题。

陪着妹子加班两天后，小X忍受不了天天要陪加班的状态。

他通过搜索，找到了工具和方法，可让前端在Android Webview高效调试代码。并把方法教给了前端妹子。

前端妹子知道如何用调试工具后，自己可以进行调试，大大提高开发效率，不用小X天天陪着加班了。

工具介绍

刚刚提到的工具，就是Edge + ADB。

ADB是什么？

• ADB 的全称是Android Debug Bridge,是一种功能多样的命令行工具。
• ADB 命令可用于执行各种设备操作（例如安装和调试应用），并提供对 Unix shell（可用来在设备上运行各种命令）的访问权限。

现在主流浏览器，包括微软的Edge，还有Android应用自带的Webview，使用的是谷歌出品的浏览器内核。

几年前，遇到类似的问题，只能通过用Chrome浏览器+ADB进行调试。

现在Edge浏览器成了主流，也有和Chrome一样功能，而且不用像Chrome，需下载额外的浏览器插件。

因此，我们的工具选择Edge + ADB。

安装及使用

这里以大多数公司常见的Windows系统为例，介绍如何安装及使用。

安装前准备

• 开发电脑
• 安卓手机（已启用开发人员模式）
• ADB工具安装包
• 质量较好的数据线

使用前准备

• 1. 安装Edge浏览器（比较新的电脑，只要预装了正版Windows，Edge是随机附带的）
• 2. 安装ADB（具体步骤可看参考资料一）
  • 2.1 下载ADB安装包
  • 2.2 解压缩到目标磁盘路径
  • 2.3 设置全局变量
  • 2.4 在命令行工具，输入以下命令

  ADB version

  • 2.4.1 能正常显示ADB版本号，则工具准备完毕
  • 2.4.2 不能正常显示，需要根据命令行工具的提示，和下面的【注意要点】，进行排查

使用

1. 将手机和电脑，通过数据线连接起来。
2. 电脑识别出手机后，将手机USB调试模式，设为打开状态
3. 打开Edge浏览器
4. 浏览器地址栏输入

edge://inspect

5. 手机上打开要调试的应用，并进入到要调试的网页
6. 点击要调试链接对应的“inspect”按钮，如下图
   
7. 其他步骤与在电脑上调试网页步骤类似

注意要点

有些人在做前期准备时，会遇到各种问题，解决方法汇总如下

• 硬件设置
  • Android设备应直接连到开发用电脑
  • Android设备和开发电脑都处于亮屏状态
  • 确保USB电缆能正常使用，在开发电脑看到Android设备上的文件
• 软件设置
  • 开发电脑的系统是Windows，尝试为Android设备安装驱动程序
  • 某些Android设备需要特别设置
• Android设备未显示“允许USB调试”对话框
  • 将Android 设备和开发电脑的显示设置，改为永不休眠状态
  • Android 的 USB 模式设置为 PTP
  • Android 设备上的“开发人员选项”屏幕中选择“撤销 USB 调试授权”，将其重置为全新状态。

参考资料

Win10 配置安装ADB教程总结20200514 - 笨蛋师傅的文章 - 知乎

远程调试 Android 设备

更多文章

更多文章和有用工具看这里