超实用，高效调试安卓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工具安装包
- 质量较好的数据线
使用前准备
-
- 安装Edge浏览器（比较新的电脑，只要预装了正版Windows，Edge是随机附带的）
-
- 安装ADB（具体步骤可看参考资料一）
- 2.1 下载ADB安装包
- 2.2 解压缩到目标磁盘路径
- 2.3 设置全局变量
- 2.4 在命令行工具，输入以下命令
ADB version
- 2.4.1 能正常显示ADB版本号，则工具准备完毕
- 2.4.2 不能正常显示，需要根据命令行工具的提示，和下面的【注意要点】，进行排查
使用
- 将手机和电脑，通过数据线连接起来。
- 电脑识别出手机后，将手机USB调试模式，设为打开状态
- 打开Edge浏览器
- 浏览器地址栏输入
edge://inspect
- 手机上打开要调试的应用，并进入到要调试的网页
- 点击要调试链接对应的“inspect”按钮，如下图
- 其他步骤与在电脑上调试网页步骤类似
注意要点
有些人在做前期准备时，会遇到各种问题，解决方法汇总如下
- 硬件设置
- Android设备应直接连到开发用电脑
- Android设备和开发电脑都处于亮屏状态
- 确保USB电缆能正常使用，在开发电脑看到Android设备上的文件
- 软件设置
- 开发电脑的系统是Windows，尝试为Android设备安装驱动程序
- 某些Android设备需要特别设置
- Android设备未显示“允许USB调试”对话框
- 将Android 设备和开发电脑的显示设置，改为永不休眠状态
- Android 的 USB 模式设置为 PTP
- Android 设备上的“开发人员选项”屏幕中选择“撤销 USB 调试授权”，将其重置为全新状态。
参考资料
Win10 配置安装ADB教程总结20200514 - 笨蛋师傅的文章 - 知乎
远程调试 Android 设备
更多文章
更多文章和有用工具看这里
超实用，高效调试安卓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工具安装包
- 质量较好的数据线
使用前准备
-
- 安装Edge浏览器（比较新的电脑，只要预装了正版Windows，Edge是随机附带的）
-
- 安装ADB（具体步骤可看参考资料一）
- 2.1 下载ADB安装包
- 2.2 解压缩到目标磁盘路径
- 2.3 设置全局变量
- 2.4 在命令行工具，输入以下命令
ADB version
- 2.4.1 能正常显示ADB版本号，则工具准备完毕
- 2.4.2 不能正常显示，需要根据命令行工具的提示，和下面的【注意要点】，进行排查
使用
- 将手机和电脑，通过数据线连接起来。
- 电脑识别出手机后，将手机USB调试模式，设为打开状态
- 打开Edge浏览器
- 浏览器地址栏输入
edge://inspect
- 手机上打开要调试的应用，并进入到要调试的网页
- 点击要调试链接对应的“inspect”按钮，如下图
- 其他步骤与在电脑上调试网页步骤类似
注意要点
有些人在做前期准备时，会遇到各种问题，解决方法汇总如下
- 硬件设置
- Android设备应直接连到开发用电脑
- Android设备和开发电脑都处于亮屏状态
- 确保USB电缆能正常使用，在开发电脑看到Android设备上的文件
- 软件设置
- 开发电脑的系统是Windows，尝试为Android设备安装驱动程序
- 某些Android设备需要特别设置
- Android设备未显示“允许USB调试”对话框
- 将Android 设备和开发电脑的显示设置，改为永不休眠状态
- Android 的 USB 模式设置为 PTP
- Android 设备上的“开发人员选项”屏幕中选择“撤销 USB 调试授权”，将其重置为全新状态。
参考资料
Win10 配置安装ADB教程总结20200514 - 笨蛋师傅的文章 - 知乎
远程调试 Android 设备
更多文章
更多文章和有用工具看这里