真机+Edge浏览器：Android原生APP嵌入的H5页面元素定位

最新推荐文章于 2025-06-28 16:38:29 发布
原创 最新推荐文章于 2025-06-28 16:38:29 发布 · 897 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #html5 #html

本文详细指导如何在配置好adb环境并连接真机后，通过Edge浏览器远程调试H5页面，包括设备连接步骤、Chrome浏览器问题绕过及最终的元素定位操作。

前提条件：
1、已配置adb环境

adb链接真机

C:\Users\shenyf>adb devices
List of devices attached
P7CDU18929008778        device

打开Edge浏览器

地址：chrome://inspect/#devices
在这里插入图片描述

在真机打开要调试的App的H5页面

注意：只有H5页面才会显示在这里
在这里插入图片描述

点击inspect进入调试页面

在这里就可以进行元素定位了
在这里插入图片描述
注意：用chrome浏览器在这里打开报错，所以本人选择了Edge浏览器
在这里插入图片描述

在这里插入图片描述

H5抓包——Android 使用电脑浏览器 DevTools调试WebView
麦小洛
03-27 2505
1、电脑通过数据线连接手机，开启USB调试（打开手机开发者选项） 2、打开待调试的H5 App，进入H5界面 3、打开电脑浏览器，调试界面入口 如果用edge浏览器 访问：edge://inspect/#devices
MuMu模拟器+Edge浏览器：Android原生APP嵌入的H5页面元素定位
DDJ_TEST的博客
10-14 3572
前提条件： 1、已安装MuMu模拟器 2、已配置adb环境 adb链接MuMu模拟器 C:\Users\shenyf>adb connect 127.0.0.1:7555 connected to 127.0.0.1:7555 C:\Users\shenyf>adb devices List of devices attached 127.0.0.1:7555 device 打开Edge浏览器 地址：chrome://inspect/#devices 在模拟器打开要调试的App的H5页面
app 中有h5页面的时候，怎么去定位元素?
小鱼儿的博客
10-15 2590
测试app的时候，我们知道可以通过UI Automator Viewer进行元素定位 但是很多app中都会内嵌h5页面，这个时候定位就会变成下图这样： 第一步： 在手机中打开当前app的h5界面，使用usb连接电脑后， 第二步：在pc端浏览器中输入： chrome://inspect/#devices 注意：是需要翻墙的，翻墙成功后，才可以显示设备的 截图，如图就显示搜狗浏览器，的h...
webview调试微信内嵌的H5页面进行元素定位
DDJ_TEST的博客
10-15 1470
webview调试微信内嵌的H5页面进行元素定位 1、 首先adb链接真机或模拟器 2、电脑端在Edge浏览器打开：chrome://inspect/#devices，看自己链接的是真机还是模拟器 3、 登录微信，随便找个好友发送：http://debugx5.qq.com 4、点击发送的地址，进入X5调试页面 5、点击“信息”，勾选“打开TBS内核Inspector调试功能” 6、现在查看浏览器 7、点击“inspect”，接下来就可以进行元素定位了 ...
使用 edge 调试 Android app 中的 H5页面及抓包
前端技术
04-25 6897
前提：我使用华为荣耀 20i，其实Android手机的开发者设置都大同小异，注意设置！ 一. 配置 H5 页面抓包 1. 打开“开发人员选项”，找到“选择 USB 配置”； 2.选择“RNDIS（USB 以太网）”； 二. edge 浏览器调试配置 1. 打开 edge 浏览器，输入：edge://inspect/#devices 2. 仅在 app 进入 h5 页，才会出现 inspect 。稍等片刻，才会出现上图红框的监听。会有多个 inspect，目前不知有啥差异，..
如何用html构建ios应用,使用HTML5构建iOS原生APP
weixin_36327991的博客
06-22 495
转自http://ju.outofmemory.cn/entry/18807有时候我们在内嵌的webview中希望点击一个链接之后，触发iOS原生事件，而不是webview内页面跳转(因为webview的跳转很生硬，而ajax+js模拟则不如原生segue平滑)。有时候我们希望在页面内consloe.log(‘log something‘)的时候在控制台里看到输出，但手机里没有控制台，所以我们希望...
高德h5定位误差_#高德地图api移动端定位失败解决方案 #H5 原生Geollocation接口Chomre浏览器的坑...
weixin_39997173的博客
12-24 2075
侧重：本文探索了 http 协议下，pc + 移动端定位解决方案IOS版本： ios14原生Geolocation 接口:DocumentShow my locationfunction geoFindMe() {var output = document.getElementById("out");var msg = document.getElementById("msg");if (!nav...
H5应用抓包及调试技巧
你好呀
02-17 1560
由于图片和格式解析问题，可前往在现代移动互联网时代，H5 应用以其跨平台、轻量化、快速迭代的特性，成为移动开发的重要一环。然而，随着功能的复杂化和用户体验要求的提升，H5应用的调试也面临着诸多挑战，如设备多样性、网络环境复杂性以及性能瓶颈等。为了应对这些问题，开发者需要掌握不同的调试工具及场景使用才可应对不确定结果。本篇就带大家了解下具体的调试过程。
边缘预处理+云端决策：ESP32本地滤波与AI语义协同的6层架构设计
!...# 1. 边缘预处理与云端协同的架构演进 ## 架构演进的驱动力与范式转变 随着物联网终端规模的爆发式增长，传统“感知→传输→集中处理”的架构已难以满足低延迟、高能效和隐私保护的需求。边缘计算将数据预处理...
未来趋势：AI嵌入模型在原生应用中的发展方向
最新发布
AGI×大数据，开启智能时代的认知跃迁；解码AGI，赋能数据驱动的智能革命。
06-28 909
本文旨在探讨AI嵌入模型在原生应用(如移动App、桌面软件等)中的未来发展方向。我们将分析当前的技术瓶颈、可能的解决方案以及未来的创新方向。介绍AI嵌入模型的核心概念分析当前的技术挑战探讨未来的发展方向提供实际应用案例和代码示例讨论相关工具和资源AI嵌入模型：经过优化可以在终端设备上运行的轻量级AI模型原生应用：为特定平台(如iOS、Android)开发的应用，可以直接调用设备硬件资源边缘计算：在数据源附近进行数据处理和分析的计算模式AI嵌入模型。
基于H5安卓微信内嵌浏览器详情页返回列表页定位到原浏览位置解决方案(关键字:mui、双滚动条、sessionStorage)
wjw的博客
04-02 1814
使用框架:mui github地址:https://github.com/dcloudio/mui 需求:有一个列表页，可通过下拉刷新进行翻页，但由于苹果端和安卓端微信内嵌浏览器内核不同，导致相同返回按钮，不同处理过程。我希望在列表页点击详情页，点击返回按钮后还回到原来的浏览位置。苹果微信端是原生支持回到原来浏览位置，但安卓微信端会重新加载页面，所以安卓微信端需要进行特殊处理，达到跳转回原...
h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置
szl199107101035的博客
08-08 1万+
最近几天能研究了一下客户端的缓存以及cookie的用法。 客户端缓存我个人选用一种就是在头部添加cache-control：max-age=(时间)秒，首先是在html的meta标签中添加但是在浏览器中查看到没有起作用，通过检查发现这个页面由于不是静态页面是通过后台数据返回的动态页面所以在meta中添加不起作用。后面与后台沟通让他们加上在浏览器中可以看到如下图： 缓存添加成功。
vue H5列表页面 点击跳转看详情 返回列表页保持在当前位置
tendernessxy的博客
03-23 2279
vue H5列表页面 点击跳转看详情 返回列表页保持在当前位置
安卓手机app请求跟踪
weixin_42895461的博客
04-28 1712
Edge浏览器：edge://inspect/#devices，手机打开需要使用的APP，一段时间后会显示对应的应用信息，选择inspect成功后，会显示手机页面。2、谷歌浏览器：chrome://inspect/#devices （如果用chrome不行报404之类的错误就别纠结了，直接用edge）1、手机通过数据线连接电脑，手机设置-开发者选项-开启USB调试。3、操作后，右侧会展示请求的接口。
移动端列表，点击某条记录，进入详情页，返回时定位在刚才点击的位置
热门推荐
shunzizhan
07-17 1万+
@[列表返回|minirefresh|cookie|sessionStorage] 背景     前不久做一个类似电商的h5项目，产品经理有个业务需求：用户在商品列表，点击某一条商品的时候，进入到详情页，从详情页返回的时候，需要定位到刚才点击的位置。     其实，这个场景，基本就是
手机端 H5 浏览器同频调试 (chrome://inspect)
05-14 1533
点击PC端 inspect 打开同步调试窗口 (示例)
PC、H5页面从详情页跳回列表页保留滚动条位置
yuhong's blog
03-25 1055
文章目录一、先决条件一、两种情况二、代码情况一情况二1.设置keep-alive2.记录滚动条位置3.获取滚动条位置三、核心代码四、属性 一、先决条件 1.vue框架 2.使用keep-alive keep-alive的vue官网链接 一、两种情况 1.第一种情况：从列表跳转到详情，详情页只供查看，不需要编辑，因此跳转回去的时候不需要更新页面数据 2.第二种情况：从列表跳转到详情，详情页需要编辑，因此跳转回去的时候需要更新页面数据 二、代码 情况一 1.设置 keep-alive 2.从列表页跳
android内嵌H5页（webview）如何定位
weixin_34072159的博客
06-10 2561
　　现在大多数app都是由原生页面和内嵌H5（即webview）组成，app原生页面直接定位即可，那内嵌H5页面要如何定位呢。 　　相信大多数人用appium做自动化时都有遇到这个问题，小编总结了下工作中该问题的常用方法，总结如下： 　　一、切换至webview后再定位元素 　　　　（1）获取页面上下文 　　　　　　contexts = driver.contexts 　　　　（2）切换...
Android H5移动调试技巧——Chrome /Edge /QQ Inspect
LlanyW的专栏
05-31 4988
Android APP项目原生的Html5做，cordova框架技术。苦于调试不便。稍微了解一下浏览器调试插件。
64位Microsoft Edge浏览器：高效清爽的全新体验
1. "64位MicrosoftEdge浏览器"：这里的标题告诉我们，存在一个64位版本的Microsoft Edge浏览器。Microsoft Edge是由微软公司开发的新一代网络浏览器，它在2015年随Windows 10操作系统一起发布，并取代了旧版的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值