调试Android微信页面

开发移动页面时，通常有必要确保对微信页面的正常访问. 尽管微信的内置浏览器统一了不同Android机器的WebView，但不同机器上的兼容性仍然不同. 问题. 调试页面时，需要考虑以下几个方面: 能够访问页面，查看元素以查看页面输出，捕获包以查看请求安卓微信模拟器，模拟登录，断点调试，性能测试，在模拟器上调试，在真正的机器本文仅涵盖调试的基本页面，不涉及Hybrid应用，公共帐户JDK，与小程序相关的调试

开发Android微信页面时，通常一开始就在PC上执行. 在开发的后期自测试阶段之后，它将被转移到Android模拟器并在各种真实机器上进行自测试. 需要在真实计算机上进行调试和测试.

能够访问该页面当然很简单，但是很难访问该页面并为下一个调试页面奠定基础.

许多公司将分为内部和外部网络. 开发环境位于内部网络上. 如果无法访问外部网络，则需要使用代理工具进行传输.

活动页面的开发环境地址为local.abc.com/wx/page-spring，估计在测试机上将有一个对应的地址test.abc.com/wx/page-spring

要访问此页面，将在PC开发计算机上设置主机: 127.0.0.1 local.abc.com 12.70.0.1 test.abc.com

为了能够访问同一部手机，需要设置HOST，但是大多数型号都需要ROOT，这是不可取的

使用Fiddler工具在手机上设置代理

1. 首先，将电话和PC置于同一局域网中，检查PC的IP（当前为11.22.33.44）

2. 打开Fiddler并设置允许远程计算机连接选项. 如果它是HTTPS页面，则还需要设置为允许HTTPS解析

3. 如果是HTTPS，请先在手机上安装Fiddler的证书，然后在手机浏览器中访问IP: 端口，然后按照提示进行安装

4. 在手机的Wi-Fi连接上设置代理，并将其设置为IP: 端口

不同的手机修改方法不同，但它们也相似，通常在更多或高级的修改网络中

通过这种方式，您可以使用域名直接在手机上访问页面.

但是，在电话上设置代理仍然有些麻烦，您还可以使用Fiddler的开放端口功能

使用Fiddler工具，打开端口直接连接

省略上面的第四步，并使用Fiddler打开端口（例如8877）并在命令行上执行

在FiddlerScript脚本面板中添加替换规则，在执行主机转换的请求之前匹配IP: 端口，然后保存应用程序

然后在PC上访问11.22.33.44:8877/wx/page-spring以查看转换是否正常，然后在电话上访问此链接

此外，某些页面需要绑定到微信oAuth授权. 这些页面上线后（例如），如果您想直接在PC上访问调试，则会出现问题

使用Fiddler，在请求之前设置Cookie

微信授权实际上绑定到OpenID，并且对应于我们自己的系统，然后只要获得此登录cookie，就可以实现模拟登录

在Fiddler中，有很多方法可以为请求设置Cookie

1. 获取Cookie

使用上述方法，Fiddler可以捕获手机访问请求，接受一定的请求，然后获取Cookie（例如此PHPSESSID）

2. Fiddler为请求设置cookie

您可以断开点，在PC上访问链接，然后在Raw或相应的Tab中修改cookie，然后返回

手动打断点有点麻烦，您也可以简单地使用FiddlerScript来替换设置

当然，您也可以使用AutoResponder直接匹配访问此页面的过程

遇到样式兼容性问题时，您需要通过查看元素进行调试. 调试的第一个基础是查看页面的元素和基本日志输出.

有很多这样的工具. 最常见的一种是Chrome的开发人员调试工具. 在PC上，我们可以通过设备仿真直接使用本机支持的DevTools. 在真实的机器上，我们可以使用其远程调试功能.

1. Chrome设备模拟

这很常见，在这里不多说

2. Chrome远程调试

远程调试实际上是在PC上调试通过手机访问的页面，然后通过USB连接进行调试.

用于PC的Chrome DevTools不仅可以识别手机上的Chrome浏览器，而且还支持其他一些WebView浏览器（例如，微信内置X5浏览器，小米浏览器，华为浏览器等）

将手机USB连接到计算机，并在手机开发人员的设置中启用它. 允许USB调试. 您可以在计算机控制面板的设备管理上看到已成功安装设备驱动程序（可以直接使用画笔向导来帮助安装驱动程序）

然后在Chrome中访问，访问手机上的页面，然后您就可以在这里识别它

上图打开页面以依次访问手机Chrome，小米浏览器，微信X5浏览器

以微信中的“ CSS触发器”页面为例，单击“检查”将弹出类似于DevTools的调试窗口.

很多时候您只能看到空白页. 这是因为在进行远程调试时，Chrome应该首先请求下载调试工具包（为什么不按照浏览器安装包进行打包？打包后可能太大了，而且此调试工具包受版本控制，每个版本都不相同环境），需要FQ.

首先需要获得一个（手机）浏览器环境，然后再直接使用脱机缓存.

访问国外网站工具自行解决，您可以访问此域名#

此处提供了一个主机，以后可能会失效:

# 216.239.38.126 chrome-devtools-frontend.appspot.com
216.58.203.244 chrome-devtools-frontend.appspot.com

然后您可以开始审阅，并且该功能基本上与DevTools相同（Chrome版本之后）

但是，应注意，无法识别UC浏览器. 您需要使用PC的UC浏览器开发版和移动终端的UC浏览器开发版进行调试，方法类似

可能无法识别其他WebView，因此需要打开WebView本身以支持调试

默认情况下支持小米浏览器，去年默认情况下也支持微信X5，但是最近需要手动打开它，在微信中对其进行访问，然后打开Inspector调试功能，然后重新访问页面

3. 构建Weinre调试环境

使用Weinre，原理是在页面中插入脚本，该脚本不支持断点调试功能

使用NPM安装后，

npm i -g weinre
weinre --boundHost localhost --httpPort 9876

将脚本字符串放在要调试的页面上. 有关详细用法，请参阅文档

虽然功能相对简单，但这是最常见的调试方法，可以在大多数环境中使用

4. 使用微信开发人员工具进行调试

WeChat开发人员工具分为两种，一种是基于Weinre的网络连接调试，另一种是基于USB电缆连接调试. Android可以使用两种，iOS只能使用前一种

使用简单的调试

要求手机和PC位于同一局域网中，在手机中设置代理，然后在微信中打开一个页面进行调试

使用方法与普通Weinre相似，但是存在一个缺陷，即不支持HTTPS，因此在访问HTTPS的页面上会出现白屏

使用USB调试X5内核

此方法可以调试使用X5内核的微信浏览器，QQ浏览器或其他相关页面，并可以执行脚本断点调试

类似地，您需要确保X5打开了debuggable选项，并在打开页面后开始调试

在页面列表中选择“检查”，并且也会调用与开发人员工具集成的Chrome DevTools，因此您需要一路爬墙才能首次找到调试工具包

调试情况类似于Chrome的远程调试. 不同之处在于，微信开发工具中的调试功能略旧. 好处是它可以识别Chrome无法识别的某些内容.

5. 使用spy-debugger进行调试

对于Weinre，除了集成微信开发人员工具外，还有另一个更好的解决方案

Spy-debugger本质上是基于weinre进行开发和调试的. 此外，它还支持HTTPS页面，简单的网络数据包捕获和文件映射

npm i spy-debugger -g
spy-debugger

安装后开始，在同一局域网下的电话上设置代理（默认端口为9888）

可以看出对HTTPS页面有一定的支持（您需要首先按照步骤设置证书）

此外，它还提供了基本的数据包捕获功能（默认情况下使用AnyProxy，您也可以自行设置），这也很实用

6. 使用VCon​​sole进行调试

以上内容只是为了查看页面的元素以便进行一些基本的调试.

但是，它似乎可以在PC上进行操作. 有没有可以直接在手机上使用的工具？

我最近找到了这个小工具，如果计算机不在身边，则对于在移动终端上进行调试非常有帮助

在新版QQ浏览器中，此选项已集成，使用手机QQ浏览器进行访问，设置为打开以查看右下角的功能入口

单击后，您将看到几个面板安卓微信模拟器，可以满足基本页面审阅，请求查看和命令执行的需要. 您也可以根据需要添加插件

在内置微信浏览器中访问页面时，您需要手动导入文件VConsole.js然后调用它

var vConsole = new VConsole();

很多时候，我们希望获得页面发起的请求和响应并分析数据. 有很多数据包捕获工具，Windows上的Fiddler，Mac上的Charles，以及手机上的其他工具

Fiddler的功能用法非常强大，但是大多数人只知道基本功能，还有很多事情尚未理解. 例如，自定义脚本的FiddlerScript部分可以实现许多扩展

本文不会扩展，建议您仔细阅读《提琴手调试指南》

大多数其他工具可以查看请求或返回，但不能进行自定义修改. 这就是Fiddler和Charles独特之处的原因

当然，要使用Fiddler，您必须使用计算机. 如果您只想直接在电话上看到请求，可以推荐两种工具

1. 使用数据包捕获功能捕获数据包

在Android计算机上，安装后，请在其设置中配置证书

点击绿色按钮开始监视，它将监视所有APP的所有协议，或者您可以选择监视某个APP

例如，在这里我听了我对微信博客花园的访问，查看捕获的列表以查看相关信息

2. 使用HttpInterceptor数据包捕获工具

与前者相比，它具有更

它具有内置的WebView浏览器，您可以直接访问连接分析页面，还可以设置代理，设置主机（不包含ROOT），修改返回的数据等.

如果在PC的开发环境中设置了主机，并且PC的IP为11.22.33.44，则可以在此处将主机设置为PC的IP，可以通过域名进行访问

如果您想监视其他应用程序（例如微信中的页面），请将代理设置为127.0.0.1:8888（Fiddler的影子），请注意在不使用时关闭代理（或进程被杀死），否则，您将无法访问网络

单击预览以查看已捕获请求的列表，然后单击以查看请求的详细信息和返回的数据

如果要修改返回的数据，可以在此处进行设置. 例如，当与上述VConsole结合使用时，无需计算机即可完成一些基本的调试功能

断点调试，包括JS的调试，以及DOM节点元素的树结构和属性更改的调试. 这在调试过程中非常重要. 一般来说，您需要使用开发人员工具.

在这个维度上，调试方法应该是Chrome的设备模拟和远程调试

有时需要测试页面的性能，从加载时的时间性能到运行时的流畅性性能，再到页面所占内容的性能，等等.

要更准确地考虑这些指标，通常必须在真实计算机上进行调试，并且开发人员工具必不可少

设计此环时，通常需要Chrome远程调试.

本文不会首先扩展，以后会进行Chrome DevTools的调试和完成，敬请期待〜

移动页面测试分为三个级别:

1. 在PC上使用浏览器设备模拟测试

2. 在PC上用模拟器仿真测试

3. 使用真实的机器模拟测试

大多数浏览器的设备模拟都是从样式中模拟出来的，而Android具有一些硬件趋势，这在实际计算机上是最可靠的

但是，现在大多数手机浏览器都具有工具栏，而华为手机具有虚拟键盘，这会导致页面高度不一致. 也许在设备仿真页面上是正常的，但是受挤压的元素已包含在实际设备中.

因此，如果有机会，您必须收集用于实际机器测试或至少模拟器测试的通用模型.

本文基于调试Android微信页面，列出了几种常见的调试工具和相应的使用方法

并非每种方法都被保证是可行的，因此在调试过程中会有很多选择

最重要的是Fiddler和DevTools的结合. 如果DevTools无法解决问题，我们会找到Weinre

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/sanxing/article-219436-1.html