如何真机调试微信h5页面
最近在项目中接手微信环境h5页面的开发,主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。
目前项目暂时告一段落,希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~
由于微信环境、sdk的限制,在微信环境下如何有更加良好的调试体验还是有一些坑的,本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法(由于没有苹果手机,所以在开发自测时多以安卓系统为主要的测试环境)。
1.使用 Chrome 模拟移动设备进行调试
1.1 简单介绍
Device Mode
可以近似模拟出网页在移动设备上的显示效果,就是下面红框所示的,可以说是最常用的移动端 h5 调试方式,这里不过多进行介绍。
在项目中因为要在微信环境下调用sdk,其余浏览器不能调用相关sdk功能,所以会根据不同的 User Agent
将 h5 页面分为普通浏览器环境和微信环境有不同的业务逻辑(当然,根据不同的系统也会分 iOS
和 Android
)。
然而 Chrome Device Mode
只有如下的一些预设机型:
1.2 添加 User Agent 模拟微信环境
所以这里我们需要自己添加机型去模拟出微信环境,打开 chrome 开发者工具下面是简单的步骤示意图:
在图2第三个红框中加上 User Agent
,
Mozilla/5.0 (Linux; Android 7.0; MI 5s Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/64.0.3282.137 Mobile Safari/537.36 wxwork/2.4.16 MicroMessenger/6.3.22 NetType/WIFI Language/zh
这是我用的安卓系统微信环境的 User Agent
,网上还可以搜到许多,也有iOS系统微信环境的,
加上之后就可以切换到对应预设机型进行调试啦~
1.3 简单的使用体验总结
总的来说,在 Device Mode
中基本不能调试微信 js-sdk 功能,微信支付、微信授权登录一般也有限制,那么能拿它来做啥呢?
因为项目中会根据微信环境和普通浏览器环境有一些不同的 UI 样式,重新加载的速度个人感觉是今天介绍的方法中算是最快的,单纯以调整 UI 的目的来说体验是最好的,而且通过修改虚拟设备的宽高调试页面在不同设备上的 UI 效果。
2. 使用微信web开发者工具
微信官方推出的 web 开发者工具,可以通过模拟微信客户端的表现,使得开发者方便地在 pc 上进行开发和调试工作,下面是官方手册地址,有详细的介绍和入门教程,这里就不多加赘述
传送门
2.1 简单地聊聊使用体验
微信web开发者工具集成了 Chrome 开发者工具,可以像上面介绍的一样用来进行一些 UI 样式的调试
此外微信web开发者工具最大的特点是可以模拟 JSSDK 在微信客户端中的请求,并且可以直观的看到请求结果,如下图所展示的:
这一点真的很赞,可以直观地看到每次调用 JSSDK api 输入参数和请求结果。虽然微信 JSSDK 也可以开启调试模式,不过它是将调用的 所有 api 的返回值在客户端中 alert
出来,这种调试体验真的不是很好
不过因为是在 pc 端进行模拟,一些如扫码、定位、摇一摇等比较复杂的 sdk 功能无法进行模拟调试
2.2 再来唠唠移动调试的体验
微信 web 调试工具也带了真机调试功能,针对 Android 提供了 X5 Blink 调试和普通调试两种方式。
在开发中首先学习使用的是普通调试,简单来说就是借助 weinre 让你可以进行真机无线调试,下面是基本的调试界面:
最常用的功能有检查dom元素、查看network请求和console窗口,就是一个简陋版 chrome devtools
,最大的劣势是不能进行断点调试,综合调试体验不如后面要介绍的 X5 Blink 调试
emmm… 这里要介绍的基于 X5 Blink 的真机调试不是微信 web 调试工具自带的那个。不知道为啥我在微信 web 调试工具中 X5 Blink 内核调试
的调试均以失败告终。只能使用另一种基于 X5 Blink 的真机调试方法。
3. x5 内核 + Chrome://inspect 进行微信环境 h5 真机调试
因为对底层原理不甚了解,所以此节着重介绍一些配置的步骤,也会贴出一些比较好的学习文章链接。
下面是谷歌官方对 Android 远程调试的介绍,可以自行学习:
Android 设备的远程调试入门
对 X5 内核的介绍:
X5 浏览器内核调研报告
3.1 打开微信 TBS 调试
微信进入下面的网址:http://debugx5.qq.com,或者扫下面的二维码
可能会有错误信息,先退出来,按照错误提示依次访问几个网址
进入 http://debugmm.qq.com/?forcex5=true
进入 http://debugtbs.qq.com 选择 “安装线下内核”
重新扫上面的码,可以进入下面的页面,选择 “打开TBS内核Inspector调试功能”
然后 USB 连接手机、电脑,打开开发者模式,打开 USB 调试,然后在 Chrome 中进入 chrome://inspect/#devices 页面,可以看到下面的页面
然后就可以选择对应页面 inspect
,就可以开始真机调试,而且完美拥有 Chrome devtools 的功能
如何真机调试微信h5页面相关推荐
- pc调试微信h5页面提示Pending authentication:please accept debugging session on the device的解决方法
假如pc调试微信h5页面输入chrome://inspect/#devices无法显示微信h5页面,我升级谷歌浏览器,问题就解决了(方法1) 或者手机的开发者模式关掉再打开(方法2)
- chrome谷歌浏览器调试微信H5页面
1.打开微信TBS调试 http://debugx5.qq.com(微信中打开) 或者扫描这个二维码 3.用数据线连接手机 4.打开手机的USB调试 手机型号不同 打开USB调试方式可以也不一样! 不 ...
- pc调试微信h5页面
一.微信配置: 参考地址:https://testerhome.com/topics/6871 1.打开微信,设法打开网址 http://debugx5.qq.com (推荐直接把这个网址发给文件传输 ...
- 模拟真机调试-微信公众号
首先强调的是:我测试用的是安卓手机 1:电脑 和 手机上都必须装chrome浏览器 2:电脑上在chrome浏览器中输入:chrome://inspect/#devices 3:电脑和手机用数据线连接 ...
- xcode 配置wechat_Xcode 真机调试微信支付 提示 mainfest.json配置APPID和订单的appid 不一致...
mainfest 的信息 {"@platforms":["android","iPhone","iPad"]," ...
- 使用chrome调试微信/QQh5页面
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 文章目录 1 前言 2 debugx5.qq.com 3 手机连接电脑并打开开发者选项和USB调试 ...
- 2015 Xcode7 真机调试(开发者)以及P12配置
2015 Xcode7 真机调试(开发者)以及P12配置 关于真机方面,首要的就是真机调试,因为一个程序的开发是肯定离不开真机调试的,在Xcode7之前想要进行真机调试需要加入开发者计划,需要进行证书 ...
- pc端debugger微信、电脑debugger微信、电脑调试 微信支付、pc调试 微信支付、电脑 调试真机微信、通过电脑调试手机真机打开的微信H5页面、通过电脑chrome调试手机真机打开的微信H5
pc端debugger微信.电脑debugger微信.电脑调试 微信支付.pc调试 微信支付.电脑 调试真机微信.通过电脑调试手机真机打开的微信H5页面.通过电脑chrome调试手机真机打开的微信H5 ...
- 微信H5移动端真机调试--vConsole
在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊.友好的微信给我们提供了这么一个入口,使开发者可以真机调试.给微信开发者点赞.然后就可以看到你打印的内容及 ...
最新文章
- TaxonKit工具:获取物种NCBI数据库的Taxonomy ID
- 纯CSS3实现轮播图
- 【学习笔记】智能制造问与答
- 6.6 数据集的存储与表达
- 10个用于处理日期和时间的 Python 库
- 安装VSCode作为常用的文本编辑器
- 炫酷引导页带视频源码
- Nginx负载均衡和F5的区别---系统运维工作笔记001
- 面对 10 亿数据量的挑战,如何对系统进行性能优化?
- WebApi实现验证授权Token,WebApi生成文档等 - CSDN博客
- Openbiz 推进PHP进入大App Store时代
- 25.211 -- 物理层信道
- 最保值电子产品绝对是它:后悔没多收几台
- 磁共振计算机都是量子技术吗,IBM利用磁共振对单个原子成像 未来用于量子计算机...
- 浅谈完备化及完备空间上的线性算子
- 一级计算机考试电子表格排序筛选,重新应用Excel排序和筛选或清除筛选
- groovy 基础知识
- java 重量单位换算_JAVA中数据存储方式以及单位转换
- 51单片机按下按键数码管加一
- A micro Lie theory for state estimation in robotics005:The tangent spaces and the Lie algebra