H5抓包——Android 使用电脑浏览器 DevTools调试WebView

已于 2024-03-27 13:57:24 修改
阅读量2.1k 收藏 7
点赞数 8
CC 4.0 BY-SA版权
分类专栏： H5 文章标签： android 前端 vue.js html html5
于 2024-03-27 13:53:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly_xiamu/article/details/137075139

H5抓包——Android 使用电脑浏览器 DevTools调试WebView

一、使用步骤

1、电脑通过数据线连接手机，开启USB调试（打开手机开发者选项）

2、打开待调试的H5 App，进入H5界面

3、打开电脑浏览器，调试界面入口

如果用edge浏览器 访问：edge://inspect/#devices

在这里插入图片描述

如果用chrome浏览器，访问： chrome://inspect/#devices
在这里插入图片描述

4.获取设备界面
在这里插入图片描述

5.查看H5日志
示例1：H5实例
在这里插入图片描述

二、可能的问题

1.没有识别到手机设备
第一确认手机是否连接，
第二选择usb文件输入方式，
第三打开“开发者模式”（一般在 设置》我的手机》连续点击系统版本号五下，“开发者模式“会在设置界面出现），点开允许USB调试按钮

2.打开inspect时出现：devTools HTTP/1.1 404 Not Found

最低0.47元/天 解锁文章

200万优质内容无限畅学
PC浏览器Devtools调试安卓WebView网页
小龙在线
07-12 798
DevTools 是Chrome内置的 Web 开发工具。DevTools 是一组 Web 开发工具，显示在浏览器中呈现的网页旁边。DevTools 提供了一种用于检查和调试网页和 Web 应用的强大方法。甚至可以在 DevTools 环境中编辑源文件和创建网站项目。
Android H5页面性能分析策略
陆业聪
10-26 1001
本文详细介绍了在Android环境下，如何通过拦截资源加载请求、注入JavaScript代码、使用vConsole工具以及抓包分析等方法，对H5页面的性能进行分析和优化。这些方法可以帮助我们从多个角度理解和优化H5页面的性能，提高用户体验。
Android WebView调试利器之 Chrome DevTools
li_Struggle的专栏
08-06 1万+
前言Android开发时不时需要与H5交互这个时候如果没有能调试的工具效率简直是极低，我们项目就有一个活动页面需要与H5交互，当时还不知道有这么一个调试工具的时候只能用alert()(关键是这个问题他在本地运行是ok的在服务器才有问题这种问题最不好定位如果有这么一个工具那简直是So Easy)。当我觉得效率这么低的情况下，我在想是不是应该会有调试工具呢？（因为IOS有） 所以我就直接查google
android webview在chrome离线调试工具devtools.txt
07-13
由于chrome调试android webview出现空白页，或者404错误，因为没有，该工具用于调试android webview
Android WebView 调试终极指南：轻松掌握手机与电脑端调试技巧
最新发布
.
05-15 1011
本文详细介绍了在Android移动应用开发中调试WebView内容的步骤。首先，需要在手机上开启开发者选项并启用USB调试。接着，通过USB数据线将手机连接到电脑，并在电脑上使用Chrome浏览器访问chrome://inspect/#devices页面来识别和调试WebView。文章还提供了常见问题的解决方法，如设备不显示、页面不显示或inspect按钮不可点等问题。通过这些系统化的步骤，开发者可以高效地进行WebView的调试，确保应用的稳定性和性能。
h5开发抓包工具
elena_705的博客
12-10 1094
h5抓包
android webview调试工具_Android应用逻辑漏洞半自动化挖掘思路
weixin_39850699的博客
11-21 170
大清早起来就看到F-Secure LABS团队(以前叫MWR，就是那支用13个逻辑漏洞攻破Chrome浏览器的团队，是Pwn2Own专业户)发了一篇文章“Automating Pwn2Own with Jandroid” (https://labs.f-secure.com/blog/automating-pwn2own-with-jandroid/ )，讲述如何利用Jandroid实现...
安卓 webview调试工具
qq_38935512的博客
06-17 823
chrome://inspect/#devices
鸿蒙(HarmonyOS)实战开发篇——基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例
lc748258的博客
09-25 949
响应起点：手指点击抬手离开屏幕响应终点：肉眼看到屏幕变化的第一帧响应时延：两处时间差值3.问题定位流程3.1 通用前置流程3.1.1 查看操作录屏辅助定位处理三方应用问题时，可以优先查看操作录屏，查看操作场景，看能否发现一些有助于定位的信息，比如1、是否有转场动效，初始动效是否明显2、页面组件是否复杂3.1.2 Trace抓取trace抓取参考：【附录1：【Web组件的H5页面切换类点击操作】抓取trace】
HarmonyOS NEXT实战开发：Web组件的H5页面切换
2401_84917132的博客
08-28 1322
小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。这里讨论页面切换点击操作响应时延场景描述：Web页面内部点击按钮路由跳转新页面，此时APP发生了页面跳转（H5内部）场景特点：观察看到页面发生的转场切换，实际Web组件无变化，是H5页面跳转H5页面。页面变化第一帧：肉眼看到屏幕变化的第一帧（视频上数出来的）并记录时间，在trace上从起点拉相同的时间找到终点位置。
H5游戏性能测试工具 选择与实践总结
热门推荐
只爱艾薇儿
01-16 1万+
概要 本文会对本人在使用白鹭做h5游戏进行性能测试的过程送使用的工具做一些简单记录。 包括 内存，cpu,耗电，启动时间，网络监控，弱网络，流量几个方面介绍。 背景 玩吧提测有一个性能需要求列表。需要每项指标达到要求。 测试性能基于公司项目的游戏，使用游戏引擎是egret,在android端是使用的webview加载游戏链接来展示游戏的方式。 性能要求列表 项目 指
Android离线webview调试工具,开发H5混合应用必备
05-14
调试webview(类似Chrome://inspect的功能)国内404,大家都懂的,经过我各种折腾制作完成,不会出现空白页面,无需科学那啥,不限机型,Hybrid App等H5混合应用开发必备,
html、js页面抓包工具
05-14
通过抓包工具，可以查找到前端服务与后端的数据交互情况，便于开发人员进行问题定位。
对Android手机H5页面进行抓包
weixin_40954371的博客
10-18 2964
Android手机必须是7.0以下的版本，才能获取到数据，并且得安装证书 推荐使用模拟器
Android -- Html5混合开发之WebView调试必备神器DevTools
一只驴在敲代码
12-04 1817
1.前言 Android & Html5 混合开发本身并不难，难点在于Webview加载H5的异常定位。 本人最近在开发中遇到一个坑，Webview加载H5页面，当Webview调用H5的js方法将 图片的base64、宽度和高度 这几个参数传给H5后，H5需要根据宽高设置图片显示。 webView.loadUrl("javascript:setPNG('" + webViewId + "...
Android webview数据获取 webview抓取
spinchao的博客
03-10 8594
总结下 Android下 webview的数据获取、抓取。 先说总结的情况 方法一：给webview setWebViewClient，然后重写shouldInterceptRequest，获取请求参数，自己发起请求，返回WebResourceResponse。 方法二：WebViewClient 的onPageFinished 方法里面注入js，来获取html 如果是自己应用很简单，如果...
安卓WebView调试方式
qq_52308245的博客
10-28 1036
安卓webview开启调试功能
Android：远程调试WebView
提笔忘字的帝国
12-15 5739
APP中使用WebView展示网页的结果可能不太理想，那么我们想调试的话就没有在浏览器当中调试方便，不过谷歌浏览器给我们提供了能远程调试的方案。可能需要开代理才能访问！！！配置 WebView手机设置假设你点错了，拒绝了授权，那么就需要先撤销USB调试授权，然后在重连就会弹出授权的框了。
Android抓包指南②: DevTools+WebViewDebugHook调试第三方应用的WebView
软件架构农
05-24 1万+
DevTools 《Android抓包指南(一):Android7.0及以上Fiddler抓不到HTTP/HTTPS包怎么办？》 上一章，我们使用Fiddler对应用抓HTTP/HTTPS包，并且解决了Android7.0及以上的抓不到包的问题。 本章，我们借助DevTools，同样可以实现对第三方应用内嵌的WebView与服务端的HTTP/HTTPS通信进行抓包分析，还可以调试页面Javascr...
uniapp webview 打包后无法加载 https
03-15
<think>好的，用户的问题是关于UniApp中WebView打包后无法加载HTTPS的问题。首先，我需要回顾一下之前提供的引用内容，看看是否有相关的解决方案。引用[1]提到过本地文件加载的问题，用户尝试过使用file://和放置文件在hybrid/html目录下，但无效。这可能和HTTPS的安全策略有关，因为WebView在HTTPS下可能不允许加载不安全的资源。 接下来，引用[2]和[3]讨论的是性能优化和键盘遮挡的问题，可能和当前问题关联不大，但需要注意是否有跨域或缓存的问题。用户的问题可能涉及到SSL证书、混合内容加载或配置错误。需要检查几个方面：证书是否有效，WebView配置是否正确支持HTTPS，是否混合内容被阻止，以及路径是否正确。 可能的解决方案包括检查SSL证书的有效性，确保服务器配置正确，允许混合内容，配置Android和iOS的网络安全性设置，使用相对路径或动态URL，清理缓存，以及测试线上环境。此外，可能需要修改原生配置文件，比如Android的网络安全配置或iOS的ATS设置。需要分步骤指导用户逐一排查，确保每个可能的错误点都被覆盖。同时，要提醒用户注意打包后的路径变化和平台差异，提供具体的代码示例或配置片段，帮助用户正确实施解决方案。</think>针对UniApp中WebView打包后无法加载HTTPS的问题，以下是逐步解决方案： --- ### **步骤1：检查SSL证书有效性** 确保目标HTTPS网站的证书由权威机构颁发且未过期。可通过浏览器访问该链接验证证书状态： ```javascript // 在uni-app页面中测试链接 uni.request({ url: 'https://your-domain.com/api', success: (res) => console.log('证书有效'), fail: (err) => console.error('证书错误:', err.errMsg) }); ``` 若控制台报错`SSLHandshakeFailed`，需联系服务端更新证书[^2]。 --- ### **步骤2：配置Android网络安全性** 1. 在`manifest.json`中启用`android:networkSecurityConfig`： ```json "app-plus": { "android": { "networkSecurityConfig": "@xml/network_security_config" } } ``` 2. 创建文件`/src/main/res/xml/network_security_config.xml`： ```xml <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="true">your-domain.com</domain> </domain-config> </network-security-config> ``` 此配置允许混合内容加载（HTTP+HTTPS）。 --- ### **步骤3：处理iOSATS限制** 在`manifest.json`中配置iOS允许非严格传输安全： ```json "app-plus": { "ios": { "ATS": { "NSAllowsArbitraryLoads": true } } } ``` 注意：提交App Store时需在`Info.plist`中添加合理性说明[^3]。 --- ### **步骤4：验证WebView路径格式** 使用相对路径或动态URL加载： ```html <web-view :src="url"></web-view> ``` ```javascript export default { data() { return { // 使用线上地址 url: 'https://your-domain.com/h5-page' // 或本地路径（需配置安全策略） // url: '/hybrid/html/index.html' } } } ``` 确保打包后静态资源路径正确，可通过`hbuilderx控制台->发行->查看打包目录`确认文件位置[^1]。 --- ### **步骤5：处理缓存问题** 在URL后添加时间戳防止缓存： ```javascript this.url = `https://your-domain.com/h5-page?t=${Date.now()}`; ``` 同时建议阅读《Vue进阶（幺捌柒）浏览器缓存问题解决》[^2]。 --- ### **补充测试方案** 1. **模拟器测试**：开启Android模拟器的`-http-proxy`参数 2. **真机调试**：使用`adb logcat`查看WebView控制台日志 3. **Charles抓包**：分析HTTPS握手过程 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值