记一次手机浏览器兼容性处理全过程

发现问题

一次偶然的机会,我用手机微博打开了网站 https://www.jsont.run/ 但是发现页面出现了错乱

333.jpg

底部一栏已经跑到顶部去了,说明这里的 flex 出现了布局上的bug,但是用电脑打开是没问题的,而且用手机微信内置浏览器打开也是正常的,那么只能说明微博使用了一个不同版本的浏览器,想到目前各种浏览器基本都是基于chrome内核的,于是我把范围缩小在了:某个版本的chrome浏览器会产生这个bug,接下来就是确定到底是哪个版本引发的问题。

确定浏览器版本

通过搜索 “browser test online” 我找到了这个在线测试不同浏览器的网站 https://www.browserling.com/ 支持选择系统和不同版本的浏览器,经过多次切换chrome版本,我终于定位到了这个出问题的版本为 <= 84

55.png

正当我准备好好调式一下的时候,发现剩余时间马上就到了(免费用户每次只有3分钟的会话时间,下次再排队),完全不能好好测试,加上这实际上是一个远程桌面,操作起来也非常不方便。于是我又想了一下,不如直接下载84版本的chrome到本地不就行了。

下载老版本Chrome

接下来又是一通各种搜索折腾,如何在一个电脑上同时运行多个版本的chrome?很多答案都不靠谱,不过最终我还是找到了一个官方的万能方案,可以运行你想要的任何chrome版本。

1、获取具体的版本号

首先在chrome发版日志里面 https://chromereleases.googleblog.com/search/label/Stable%20updates 搜索你需要的版本,比如我这里是 84,进入第一条搜索结果 https://chromereleases.googleblog.com/2020/07/stable-channel-update-for-desktop.html

我们可以得到一个具体的版本号就是 84.0.4147.89

22.png

2、获取分支位置

前往 https://omahaproxy.appspot.com/ 将上面拿到的版本号输入 Version Information模块中

555.png

点击 Lookup 之后我们就可以得到一个 768962 的分支位置。

3、下载

前往chrome的快照仓库 https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html 选择你要下载的平台,我这里是 Win_x64,进入该目录然后搜索 768962,但是很遗憾,搜索不到,只能手动一直往下查找一个相邻的号码(注意这里的号码越大表示实际的版本号也越大),最终我找到了 768952 的号码,进入(https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/768952/) 下载 chrome-win.zip

666.png

解压之后(免安装)便得到了一个可以直接运行的chrome浏览器了

777.png

然后我们可以查看一下该版本是 84.0.4147.0 虽然跟 84.0.4147.89 有点区别,但是确实是我们需要的 84 版本了。

888.png

紧接着我用该浏览器测试了一下,果然复现问题了

000.png

这就是我从发现问题到最终能够在自己电脑上复现问题的整个过程了,希望能够对各位以后遇到这种浏览器兼容性问题的时候有所帮助。

附官方链接:https://www.chromium.org/getting-involved/download-chromium/

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容