如何真机调试微信h5页面

朱雀 2021-11-23 10:28 1871阅读 0赞

> 最近在项目中接手微信环境h5页面的开发，主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。
> 
> 目前项目暂时告一段落，希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~

由于微信环境、sdk的限制，在微信环境下如何有更加良好的调试体验还是有一些坑的，本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法（由于没有苹果手机，所以在开发自测时多以安卓系统为主要的测试环境）。

#### 1.使用 Chrome 模拟移动设备进行调试 ####

#### 1.1 简单介绍 ####

`Device Mode` 可以近似模拟出网页在移动设备上的显示效果，就是下面红框所示的，可以说是最常用的移动端 h5 调试方式，这里不过多进行介绍。

![在这里插入图片描述][20190726155417505.jpg]

在项目中因为要在微信环境下调用sdk，其余浏览器不能调用相关sdk功能，所以会根据不同的 `User Agent` 将 h5 页面分为**普通浏览器环境**和**微信环境**有不同的业务逻辑（当然，根据不同的系统也会分 `iOS` 和 `Android` ）。

然而 Chrome `Device Mode` 只有如下的一些预设机型：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

#### 1.2 添加 User Agent 模拟微信环境 ####

所以这里我们需要自己添加机型去模拟出微信环境，打开 chrome 开发者工具下面是简单的步骤示意图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

在图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 上进行开发和调试工作，下面是官方手册地址，有详细的介绍和入门教程，这里就不多加赘述

[传送门][Link 1]

#### 2.1 简单地聊聊使用体验 ####

微信web开发者工具集成了 Chrome 开发者工具，可以像上面介绍的一样用来进行一些 UI 样式的调试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

此外微信web开发者工具最大的特点是可以模拟 JSSDK 在微信客户端中的请求，并且可以直观的看到请求结果，如下图所展示的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

这一点真的很赞，可以**直观地**看到每次调用 JSSDK api 输入参数和请求结果。虽然微信 JSSDK 也可以开启调试模式，不过它是将调用的 所有 api 的返回值在客户端中 `alert` 出来，这种调试体验真的不是很好

不过因为是在 pc 端进行模拟，一些如扫码、定位、摇一摇等比较复杂的 sdk 功能无法进行模拟调试

#### 2.2 再来唠唠移动调试的体验 ####

微信 web 调试工具也带了真机调试功能，针对 Android 提供了 X5 Blink 调试和普通调试两种方式。

在开发中首先学习使用的是普通调试，简单来说就是借助 weinre 让你可以进行真机无线调试，下面是基本的调试界面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

最常用的功能有**检查dom元素、查看network请求和console窗口**，就是一个简陋版 `chrome devtools`，最大的劣势是不能进行断点调试，综合调试体验不如后面要介绍的 `X5 Blink 调试`

emmm… 这里要介绍的基于 X5 Blink 的真机调试不是微信 web 调试工具自带的那个。不知道为啥我在微信 web 调试工具中 `X5 Blink 内核调试` 的调试均以失败告终。只能使用另一种基于 X5 Blink 的真机调试方法。

### 3. x5 内核 + Chrome://inspect 进行微信环境 h5 真机调试 ###

因为对底层原理不甚了解，所以此节着重介绍一些配置的步骤，也会贴出一些比较好的学习文章链接。

下面是谷歌官方对 Android 远程调试的介绍，可以自行学习：

[Android 设备的远程调试入门][Android]

对 X5 内核的介绍：

[X5 浏览器内核调研报告][X5]

#### 3.1 打开微信 TBS 调试 ####

微信进入下面的网址：http://debugx5.qq.com，或者扫下面的二维码

可能会有错误信息，先退出来，**按照错误提示**依次访问几个网址

1.  进入 http://debugmm.qq.com/?forcex5=true
2.  进入 http://debugtbs.qq.com 选择 **“安装线下内核”**
3.  重新扫上面的码，可以进入下面的页面，选择 **“打开TBS内核Inspector调试功能”**
4.  然后 USB 连接手机、电脑，打开开发者模式，打开 USB 调试，然后在 Chrome 中进入 chrome://inspect/\#devices 页面，可以看到下面的页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]

然后就可以选择对应页面 `inspect`，就可以开始真机调试，而且完美拥有 Chrome devtools 的功能

[20190726155417505.jpg]: /images/20211122/3429f7d95a8e4f438d4df4727245e8eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211122/78909a5e9d4744b18af9a90c8e20eb9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211122/3d7fed10438c436da17c2358f0e9a545.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211122/879a57d513944e9d960ce10a22181fab.png
[Link 1]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211122/38213639b443435c880ebe08a8151eb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211122/f9ec8605c3214d0cb2416ecfe6fafd11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211122/4fbb23c76319417f990388a4961a522d.png
[Android]: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-cn#troubleshooting
[X5]: https://www.jianshu.com/p/2a14d303308d
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96d2tra2sxLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211122/d6955d7a38bc4b7981ace817b91446c3.png