H5页面（APP内嵌）- 真机调试

最新推荐文章于 2024-08-06 09:51:20 发布

掺乎君

最新推荐文章于 2024-08-06 09:51:20 发布

阅读量857

点赞数

分类专栏： JavaScript 文章标签： web app

本文链接：https://blog.csdn.net/m0_46172871/article/details/109594719

版权

本文详细介绍了如何进行H5页面在APP内嵌环境下的真机调试，包括设置步骤和关键注意事项，帮助开发者解决移动设备上的显示和交互问题。

摘要由CSDN通过智能技术生成

第一步：

//CDN
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
//二选一
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>

//npm
npm i vconsole

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

掺乎君

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于移动端H5页面的调试方法

banxia561的博客

03-07

541

这个是常见功能了，只是为了给自己记录下～ safari (mac + iphone)系 safari设置-打开Safari偏好者设置，选中“高级”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置-打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，...

H5 内嵌app，添加调试工具

ii窝窝头的博客

06-16

367

在页面中加入此段代码，即可调用VConsole <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> <script type="text/javascript"> var vConsole = new VConsole(); </script>

参与评论您还未登录，请先登录后发表或查看评论

h5网页嵌套安卓苹果APP内遇到的各种适配问题与解决方案汇总 --持续更新

热门推荐

szl199107101035的博客

10-26

1万+

此处只是总结一下和后台调数据遇到的一个简单的问题。问题描述：从app跳转到h5页面的时候第一次访问页面接口调用了，但是数据返回的应该不正确（在pc上网页调试的时候是正常的，在移动端就不行）一开始以为是js的加载顺序问题，调整之后重新上传，发现问题没有解决。然后通过移动与接口联调发现，通过ajax传输给后台的一个重要参数token（这个值是app传输给后台，并获得数据的一个重要字段），第一次

使用 edge 调试 Android app 中的 H5页面及抓包

前端技术

04-25

5600

前提：我使用华为荣耀 20i，其实Android手机的开发者设置都大同小异，注意设置！一. 配置 H5 页面抓包 1. 打开“开发人员选项”，找到“选择 USB 配置”； 2.选择“RNDIS（USB 以太网）”；二. edge 浏览器调试配置 1. 打开 edge 浏览器，输入：edge://inspect/#devices 2. 仅在 app 进入 h5 页，才会出现 inspect 。稍等片刻，才会出现上图红框的监听。会有多个 inspect，目前不知有啥差异，..

安卓版本v7.0以上charles抓包（APP内嵌h5）

vikesgao

07-27

1654

前提你的安卓手机已经给你root了 1.安装ADB & openssl 制作证书，hash后，把4c62d62f复制出来替换原来的charles.pem，且修改证书名称4c62d62f.0 2.生成hash与手机的hash文件是否一致，如有相同文件需要修改为4c62d62f.1写入手机授权下图没有一样的文件名，把4c62d62f.0直接扔进去！！！之前扔过了忽略！！！查询手机证书文件：连接手机，adb shell，后面均以Linux命令为主命令：adb shell .

APP内嵌h5页面在android低版本出现白屏问题(vue项目)

大鱼吃小鱼7的博客

10-29

7918

前段时间在处理一个vue项目时, 在vivo和华为的android5.0系统出现白屏,没有任何报错信息, 之后特地买了两台真机进行测试, 经过分段调试 , 一步步排查, 最后发现是这段代码出错: 到底什么问题? 对比一下这段代码很明显, 参数默认值的问题! 也就是ES6语法不兼容! 但实际上不完全是, 在这个项目中,有不少类似箭头函数这种语法, 通通都是支持的.实际上项目中是有babel进行...

widows 系统下调试 ios webview里的H5页面

weixin_40650646的博客

07-15

2388

widows 系统下调试 ios webview里的H5页面,您知道不？如果有这需求，看这篇就够了。

chrome调试h5移动端(含android,ios)

hahahhahahahha123456的博客

11-10

3849

chrome调试h5移动端 chrome调试(window+android) 需要条件：1.安卓开发人员需要对你页面调试得webview添加setWebContentsDebuggingEnabled得静态方法。 2.windows电脑可以爬~梯子或者安装chrome-inspect离线开发者工具包梯~子工具：https://cp.greennode.info chrome-i...

基于H5+js+ajax+java的个人空间的实现

07-08

个人空间的开发，包括前台和后台两部分，前台采用H5+JavaScript+ajax编写,后台使用Java编写（没有使用框架），代码比较简洁，界面因为时间限制没有美化太多，不过用来练手js+ajax和后台的交互

H5app手机端控制台打印vConsole

08-09

H5app手机端控制台打印vConsole H5app手机端控制台打印vConsole 用于开发H5app打印。显示在手机端控制台

获取APP端中H5代码的方法

桂靖的博客

05-31

1万+

（谷歌浏览器操作）此操作需要翻墙 1、把手机连接上电脑2、在浏览器中输入代码：Chrome://inspect3、操作手机，点击你要获取代码的H5页面4、这时，谷歌浏览器页面会刷新出来你操作的那个页面名字5、点击inspect，就会弹出H5页面的代码...

Android 内嵌 webView 与H5交互的问题和总结

qq_27409421的博客

12-22

1216

先实现效果android 内嵌WebView 与H5 交互；先webView 的WebViewClient 中重写 shouldOverrideUrlLoading 方法通过拦截Url（拦截的协议需要跟H5协调方式：注：xxxx是定义的拦截标识），实现调用Android 原生拍照或者相册，然后把获取的图片转成Base64 传给H5 ，H5 在调用头像裁剪的方法上传到服务器；核

超好用的Google客户端H5网页抓包调试小工具

qq_32752773的博客

03-28

997

超好用的Google客户端H5网页抓包调试小工具

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

麦小洛

03-27

1384

1、电脑通过数据线连接手机，开启USB调试（打开手机开发者选项） 2、打开待调试的H5 App，进入H5界面 3、打开电脑浏览器，调试界面入口如果用edge浏览器访问：edge://inspect/#devices

APP内H5调试方法

xiaoxiannv666的博客

01-19

3436

Android 安卓机 +相应app的debugger包+ 一根数据线 +翻墙+chrome 1、打开手机开发者模式和usb调试功能 2、数据线连接手机和电脑 3、chrome浏览器调试工具 chrome://inspect/#devices 4、打开手机内的h5就能在chrome调试工具中看到相应的页面啦 5、在chrome中点击你想调试的h5下面的inspect 在chrome调试工具中无法找到相应的H5? 检查是否成功访问外网确保下载的app开启了debugger模式 ios 尝试过几

超实用，高效调试安卓App内嵌网页工具

qq_24641555的专栏

03-25

1289

面对新的原生+网页混合项目，紧迫的项目工期，加上不给力的队友，有什么好工具，能扭转局势？

uni-app入门教程：从安装到真机调试

"uni-app是一个跨平台的前端框架，它允许开发者使用一套代码构建应用，兼容iOS、Android、H5、微信小程序等多个平台。本文档将带你从零开始，逐步了解如何安装、配置、创建uni-app项目，以及进行调试，包括浏览器、...