发现问题
一次偶然的机会,我用手机微博打开了网站 www.jsont.run/ 但是发现页面出现了错乱
底部一栏已经跑到顶部去了,说明这里的 flex 出现了布局上的bug,但是用电脑打开是没问题的,而且用手机微信内置浏览器打开也是正常的,那么只能说明微博使用了一个不同版本的浏览器,想到目前各种浏览器基本都是基于chrome内核的,于是我把范围缩小在了:某个版本的chrome浏览器会产生这个bug,接下来就是确定到底是哪个版本引发的问题。
确定浏览器版本
2023-12-05 备注:目前换成了 chromiumdash.appspot.com/branches 这个网站
通过搜索 “browser test online” 我找到了这个在线测试不同浏览器的网站 www.browserling.com/ 支持选择系统和不同版本的浏览器,经过多次切换chrome版本,我终于定位到了这个出问题的版本为 <= 84
正当我准备好好调式一下的时候,发现剩余时间马上就到了(免费用户每次只有3分钟的会话时间,下次再排队),完全不能好好测试,加上这实际上是一个远程桌面,操作起来也非常不方便。于是我又想了一下,不如直接下载84版本的chrome到本地不就行了。
下载老版本Chrome
接下来又是一通各种搜索折腾,如何在一个电脑上同时运行多个版本的chrome?很多答案都不靠谱,不过最终我还是找到了一个官方的万能方案,可以运行你想要的任何chrome版本。
1、获取具体的版本号
首先在chrome发版日志里面 chromereleases.googleblog.com/search/labe… 搜索你需要的版本,比如我这里是 84,进入第一条搜索结果 chromereleases.googleblog.com/2020/07/sta…
我们可以得到一个具体的版本号就是 84.0.4147.89
2、获取分支位置
前往 omahaproxy.appspot.com/ 将上面拿到的版本号输入 Version Information模块中
点击 Lookup 之后我们就可以得到一个 768962 的分支位置。
3、下载
前往chrome的快照仓库 commondatastorage.googleapis.com/chromium-br… 选择你要下载的平台,我这里是 Win_x64,进入该目录然后搜索 768962,但是很遗憾,搜索不到,只能手动一直往下查找一个相邻的号码(注意这里的号码越大表示实际的版本号也越大),最终我找到了 768952 的号码,进入(commondatastorage.googleapis.com/chromium-br… 下载 chrome-win.zip
解压之后(免安装)便得到了一个可以直接运行的chrome浏览器了
然后我们可以查看一下该版本是 84.0.4147.0 虽然跟 84.0.4147.89 有点区别,但是确实是我们需要的 84 版本了。
紧接着我用该浏览器测试了一下,果然复现问题了
这就是我从发现问题到最终能够在自己电脑上复现问题的整个过程了,希望能够对各位以后遇到这种浏览器兼容性问题的时候有所帮助。