使用Edge和ADB进行Android Webview远程调试的完整教程

前言

朋友小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。

对于更复杂的调试场景,开发者可以考虑使用专业工具如WebDebugx,它是一款跨平台移动端网页调试工具,提供类似Chrome DevTools的完整调试体验,支持iOS和Android设备远程调试网页和WebView内容,包括网络监控、性能分析和JavaScript控制台集成等功能。

安装及使用

这里以大多数公司常见的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

  1. 手机上打开要调试的应用,并进入到要调试的网页
  2. 点击要调试链接对应的"inspect"按钮

其他步骤与在电脑上调试网页步骤类似

注意要点

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

  • 硬件设置

    • Android设备应直接连到开发用电脑
    • Android设备和开发电脑都处于亮屏状态
    • 确保USB电缆能正常使用,在开发电脑看到Android设备上的文件
  • 软件设置

    • 开发电脑的系统是Windows,尝试为Android设备安装驱动程序
    • 某些Android设备需要特别设置
  • Android设备未显示"允许USB调试"对话框

    • 将Android 设备和开发电脑的显示设置,改为永不休眠状态
    • Android 的 USB 模式设置为 PTP
    • Android 设备上的"开发人员选项"屏幕中选择"撤销 USB 调试授权",将其重置为全新状态。
相关推荐
京东云开发者5 小时前
全球首个!京东全栈开源JoyAI-VL-Interaction,让大模型从“一问一答”走向“边看边说”
前端
京东云开发者5 小时前
正式上线!京东云AI智能渗透测试服务
前端
AprChell5 小时前
低代码设计器和低代码设计引擎架构综述
前端·vue.js·低代码
Hilaku5 小时前
Node.js 还能再战十年?给你一个不换引擎的理由
前端·javascript·程序员
颜进强5 小时前
AI性能参数-截断、延迟与流式输出
前端·后端·ai编程
spmcor5 小时前
React 架构师之路:Next.js 全栈革命(第八篇)
前端·react.js
英勇无比的消炎药5 小时前
TinyRobot 源码深度分析:OpenTiny 的 AI 对话组件库
前端·vue.js·github
假如让我当三天老蒯5 小时前
React基础、进阶(学习用)
前端·react.js·面试
风骏时光牛马5 小时前
HTML十大经典实战代码案例合集
前端
weedsfly5 小时前
前端必知必会:从 IIFE 到 ESM,模块化到底在解决什么?
前端·javascript