安卓手机、安卓模拟器中调试H5页面

原创已于 2025-08-12 10:23:57 修改 · 869 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #android #测试工具

于 2025-04-29 10:21:09 首次发布

安卓专栏收录该内容

1 篇文章

订阅专栏

文章目录

一、调试效果图
二、使用步骤

本文记录工作中使用Chrome DevTools连接安卓手机或安卓模拟器，对其中的页面调用进行类似F12的调试流程。这里只记录当时操作的关键点，相关原理理解较浅还在学习中，这里无法说明，也有很多缺漏，欢迎各种形式的纠错和补充。

一、调试效果图

在这里插入图片描述

二、使用步骤

1.环境准备（为调试模拟器准备）

这一步主要是为了调试模拟器。如果是手机用USB连接电脑，可以尝试先跳过这一步；

1.1.安装安卓调试环境

如果只是调试，安装这几个即可，很小一下就下载完毕。
在这里插入图片描述
SDK Tools 下载地址：https://www.androiddevtools.cn/
页面查找 SDK Tools，红框中随意；

1.2.设置环境变量

具体路径看个人
新建：
ANDROID_SDK_HOME
D:\xxxxxxx\android-sdk-windows
在 Path 新增：
%ANDROID_SDK_HOME%\platform-tools

2.连接设备

2.1.设备准备

手机设置开发模式、USB调试，USB连接电脑；
如果是模拟器，需要设置开发模式、USB调试、还要打开adb连接选项；

2.2.adb连接设备（为调试模拟器准备）

手机用USB连接电脑时会自动检测到，可跳过此步骤；
如果是模拟器会自动检测不到，需要主动连接，之前第一步环境准备也就是为了能够在这里使用adb主动连接模拟器；
执行：adb connect 127.0.0.1:7555
这里是MuMu模拟器，其他模拟器可能端口不一样，需要另外自行确认；

PS C:\Users\zhangsan> adb connect 127.0.0.1:7555
* daemon not running; starting now at tcp:5037
* daemon started successfully
connected to 127.0.0.1:7555

查看连接状态：adb devices

PS C:\Users\zhangsan> adb devices
List of devices attached
127.0.0.1:7555  device

mumu升级后端口可能发生变化，如下查找；
在这里插入图片描述

2.3.DevTools连接设备

在谷歌浏览器地址栏输入：chrome://inspect
当手机或模拟器操作涉及H5页面时（不管是浏览器直接访问页面，还是APP中调用了H5页面），会出现带有inspect的地址，点击需要调试地址下方的inspect即可进入DevTools调试界面；
在这里插入图片描述

2.DevTools调试

到这一步可以用鼠标点击调试窗口中的H5页面进行操作手机或模拟器中的页面，右边调试区域和F12一样操作即可；
在这里插入图片描述