安卓微信页面的调试

在开发移动端页面时,一般都得保证在微信页面中能够正常访问,虽说微信内置浏览器统一了各个不同安卓机的WebView,但在不同的机子上,还是会出现不一样的兼容问题。 调试页面,有几个维度要考虑:能够访问页面、审查元素查看页面输出、抓包查看请求模拟登陆、断点调试、性能测试、在模拟器上调试、在真机上调试 本文仅涉及基础页面的调试,不涉及Hybrid app、公众号JDK 、小程序的相关调试

一、能够访问页面

在开发安卓微信页面时,刚开始一般是会在PC上进行,等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测,上线了如果出问题还需要在真机上调试测试。

能够访问页面,当然简单,但难在能够访问页面,并能为接下去的调试页面打好基础。

很多公司会有内外网之分,开发环境是在内网,外网访问不到,就需要使用代理工具作一个中转。

某个活动页的开发环境地址是, local.abc.com/wx/page-spring  ,测试机上估计也会有对应的一个地址  test.abc.com/wx/page-spring

为了访问这个页面,在PC的开发机上会设置HOST: 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,在 options 中设置 Allow remote computers to connect , 如果是HTTPS的页面,还需要设置允许HTTPS的解析

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

4. 在手机的Wi-Fi连接上设置代理,设置成 IP:port

不同手机修改方式不一样,但也类似,一般在更多或者高级修改网络里头

这样一来,就可以在手机上直接用域名进行访问页面了。

但在手机上设置代理还是稍微麻烦了一点,还可以使用Fiddler的开放端口功能

使用Fiddler工具,开放端口直连

省略上面的第四步,改为使用Fiddler开放一个端口(比如8877),在命令行中执行

在FiddlerScript脚本面板中添加替换规则,请求前匹配IP:port来进行host转换,然后保存应用

然后在PC上访问 11.22.33.44:8877/wx/page-spring  试看是否正常转换,再在手机上访问这个链接即可

另外,有些页面需要绑定微信oAuth授权,这些页面上线之后(比如为  www.abc.com/wx/page-spring),如果想在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://inspect/#devices ,在手机上访问某个页面,在这里就能识别出来了

上图按顺序为 手机Chrome、小米浏览器、微信X5浏览器 打开的页面

以微信中的 CSS Triggers页面为例来审查, 点击 inspect将弹出一个类似 DevTools的调试窗口

很多时候只能看到一个空白的页面,那是因为在远程调试的时候,Chrome要先请求下载调试工具包(为什么不跟随浏览器安装包来打包呢?可能是觉得打包之后体积太大,而且这个调试工具包是有版本控制的,各个环境不一致),需要FQ才行。

首次调试某个(手机)浏览器环境需要获取,后续则直接使用离线的缓存。

科学上网工具自行解决  ,能访问这个域名就行  https://chrome-devtools-frontend.appspot.com/#

这里提供一个host,可能后面会失效:

# 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在去年的时候也是默认支持的,不过最近需要手动开启了,在微信里访问 http://debugx5.qq.com/ , 然后打开 Inspector调试功能,重新访问页面即可

3. 搭建 Weinre 调试环境

使用Weinre,原理是往页面插入一段脚本,不支持断点调试功能

使用NPM安装之后,

npm i -g weinre

weinre --boundHost localhost --httpPort 9876

将这串脚本放到要调试的页面中即可,详细用法可查看 文档

功能虽然比较简单,但这是最通用的调试方法,基本大部分环境下都能使用

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

微信开发者工具的调试分为两种,一种是基于Weinre的网络连接调试,另一种是基于USB线缆连接的调试。安卓可以使用两种,iOS只能使用前者

使用简单的调试

需要手机与PC同处于一个局域网,在手机中设置代理,然后在微信里打开某个页面进行调试

 使用方法类似普通的Weinre,不过有个缺陷,就是不支持HTTPS,所以访问HTTPS的页面会出现白屏

使用USB调试X5内核

这种方法可以调试微信浏览器、QQ浏览器 或其他使用了X5内核的相关页面,可以进行脚本的断点调试

同样的,需要先保证X5打开了可调试的选项,打开页面后开始调试

在页面列表中选择inspect审查即可,同样地会调用开发者工具集成的Chrome DevTools,所以初次也需要爬墙找调试工具包

调试情况与Chrome的远程调试类似,差的是微信开发工具里调试功能的稍微旧了些,好的是它可以识别一些Chrome识别不到的

 5. 使用 spy-debugger   进行调试

对Weinre来说,除了使用微信开发者工具的集成之外,还有另一个稍好的方案

spy-debugger本质上也是基于weinre进行开发调试的,除此之外它还支持HTTPS页面,支持简单的网络抓包以及文件映射

npm i spy-debugger -g

spy-debugger

安装之后启动,同局域网下手机设置好代理(默认端口为 9888)

 可见对HTTPS页面做了一定的支持(需要先 按步骤 设置好证书)

另外也提供了基础的抓包功能(默认使用AnyProxy,还可以自行设置),也是蛮实用的

6. 使用 VConsole 进行调试 

上面所说都只是为了能够审查页面的元素,以便做一些基础的调试。

不过,似乎都是在PC上操作的,那有没有能直接在手机上用的工具呢?

近段时间发现这个小工具,如果电脑不在身边,对移动端的调试还是蛮有帮助的

在新版QQ浏览器中,已经集成了这个选项,使用手机QQ浏览器访问 http://debugx5.qq.com ,设置为开启即可在右下方看到功能入口

点击后可以看到几个面板,能够满足基本的页面审查、请求查看、命令执行,需要的话也可以自己添加插件

而在微信内置浏览器中访问页面时,则需要手动引入 VConsole.js 这个文件,然后调用一下即可

var vConsole = new VConsole();

三、抓包查看请求模拟登陆

 很多时候我们希望获取某个页面所发起的请求和响应,对数据进行分析。抓包工具有很多,在Windows上有Fiddler,在Mac上有Charles,在手机上也有其他工具

 Fiddler的功能用法是很强大的,但大部分人只知道基本的功能,还有很多东西未曾了解。比如其中的自定义脚本FiddlerScript部分,可以实现很多扩展

本文不展开来讲,推荐好好看一下《Fiddler调试指南》

大部分其他工具可以查看请求或返回,但无法进行自定义修改。这是Fiddler和Charles的独到之处

当然,使用Fiddler就得使用电脑,如果只是想直接在手机上看看请求的话,还有两个工具可以推荐

1. 使用 Packet Capture 进行抓包

在安卓机子中,安装之后,在它的设置项里配置一下证书

点击绿色按钮开启监听,它会监听到所有APP的各种协议,也可以选择监听某一个APP

比如,这里监听了我在微信里访问博客园,查看捕获的列表可以看到相关的信息

2. 使用 HttpInterceptor 抓包工具

相对前者来说,这个东西功能算是多了点

它内置了一个WebView浏览器,可以直接在里头访问连接分析页面,也可以设置代理,设置host(免ROOT),修改返回数据等

如果PC上的开发环境设置了host ,PC的IP是 11.22.33.44,那么就可以在这里的host 设置为PC的IP,即可通过域名进行访问

如果想监听其他APP(比如微信里的页面),则设置代理为 127.0.0.1:8888 即可(有点Fiddler的影子了),注意不用的时候(或者此进程被杀死)把代理关掉,否则访问不了网络

 点击预览可以看到捕获的请求列表,然后点击进去可以看到请求和返回的数据详情

 如果想修改返回数据,可以在这里进行设置。比如结合上述的 VConsole 来使用,可以在不借助电脑的情况下就能做一些基本的调试功能

四、断点调试

 断点调试,包括JS的调试,以及DOM节点元素的树结构、属性改变的调试,它在调试过程中是很重要的,一般来说都需要使用到开发者工具。

在这个维度上看,调试方法要属Chrome的设备模拟和远程调试

五、性能测试

 某些时候还需要对页面进行性能的测试,从加载时的时间线性能,到运行时的流畅度性能,再到页面占用的内容性能等角度来分析

要比较准确地显示地考量这些指标,一般都需要在真机上进行调试,也少不了开发者工具

一般设计到这一环时,Chrome远程调试就是必须的了。

本文先不展开,后续会有关于Chrome DevTools 的调试整理,敬请期待~

六、在真机上调试

 关于移动端页面的测试,有三个层次:

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

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

3. 使用真机模拟测试

浏览器的设备模拟多是从样式上来模拟,安卓模拟器有了一些硬件上的倾向性,在真机上最为可靠

然而现在大多数的手机浏览器都自带了工具栏,而华为手机上自带了虚拟键盘,导致一个页面的高度不统一。也许在设备模拟页面上正常了,在真机却被挤压元素被覆盖了。

所以说,有机会的话都要搜集常见的机型来进行真机测试,或者至少要进行模拟器的测试。

以调试安卓微信页面为基础,本文列举了几个常见的调试工具和相应的使用方法

并不是每个方法都保证可行,所以在调试过程中会有很多的备选方案

要说最重要的,应该就是Fiddler和DevTools的结合了,DevTools解决不了的再找Weinre

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

Windows上的程序员神器Cmder 装逼和提高工作效率两不误

45510
来自专栏程序你好

三分钟让你了解什么是Web开发?

10330
来自专栏Coco的专栏

清除页面广告?身为前端,自己做一款简易的chrome扩展吧

21950
来自专栏听雨堂

PowerPoint发布及链接图片的处理

        用PPT做了一个纯播放类的课件,希望发布到CD上,首先想到的是打包,找到一个PowerPoint Slide Show Converter的程序...

20480
来自专栏coding

sublime text结合markdown viewer实现完美的写作体验

58930
来自专栏前端知识分享

Bootstrap中datetimepicker日期控件1899年问题解决

  最近在开发项目的过程中,遇到一个很尴尬的问题。我们项目一直采用的是angular+bootstrap,日期控件用的是bootstrap中的datetimep...

29340
来自专栏Crossin的编程教室

爬虫必备工具,掌握它就解决了一半的问题

网上爬虫的教程实在太多了,去知乎上搜一下,估计能找到不下一百篇。大家乐此不疲地从互联网上抓取着一个又一个网站。但只要对方网站一更新,很可能文章里的方法就不再有效...

19120
来自专栏木子昭的博客

macOS Serria安装配置QT5.5

最近比较迷C++,打算用qt写一个带界面的小游戏. 在deepin应用商店一键安装qt, 没有出现任何问题(点赞deepin!),但在Mac安装qt的时候遇...

40140
来自专栏更流畅、简洁的软件开发方式

【自然框架】之 “工作日志”和“选择日期”

      上周回家办点事,更新的事情就有耽搁了。对不住大家,所以这周要努力了。       我发现要做的事情太多了,做过了哪些事情也都记不清了,所以有必要弄个...

25560
来自专栏smy

ckplayer 如何在PC上完美支持 m3u8播放

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。 一般情况我们都使用普通的视频格式比如mp4,...

71860

扫码关注云+社区

领取腾讯云代金券