safari 低版本调试-环境搭建

jason_yang
490 阅读2分钟

起因

公司部分用户使用低版本的safari浏览器，样式显示异常。

  • 自己使用sonoma safari 17.5版本
  • 用户电脑bigsur safari 16或以下的版本

解决方案

1. 借电脑

  • 直接找到反馈用户电脑调试
  • 找同事借类似的版本电脑测试

缺点

不方便调试

2. 修改safari 的 agent 参数- 无效

image.png

image.png

实际测试无效

使用第三方在线虚拟环境

缺点

开发环境一般不支持外网直接访问

自己使用vm运行虚拟环境

优点：

  • 完全自主可控
  • 调试方便接近本地开发

缺点：

环境搭建比较花时间

如何用vm搭建

m系列电脑

公司使用m2笔记本，ARM架构要用新的方式

使用工具UTM

步骤

image.png

image.png

选择镜像 image.png

提示确定

image.png

实测效果

总体是提示，error：An error occurred during installation. Installation failed. 果断放弃 image.png

intel电脑

暂时只能使用intel老款的电脑搭建虚拟环境

可以使用 VMware fusion 或者 parallels desktop 安装，parallels收费，推荐VMware fusion

安装步骤

image.png

image.png

image.png

image.png

实测结果

完美安装和运行

如果你只是简单验证兼容浏览器问题，由于苹果系统在安装阶段就提供了访问浏览器的能力，所以无需完整安装操作系统，只需要加载镜像运行在虚拟机即可。（缺点：该版本无法打开开发者模式，）

非安装测试方式

选择语言 image.png

直接选择safari

image.png

可以看到阉割版本的safari无开发者模式，也就无法跟踪具体的问题与排查 image.png

更低版本安装

老版本的macOS（10.7 - 10.11版本），下载后的格式一般是pkg.dmg

image.png

  1. 先双击进入文件夹，看到 InstallMacOSX.pkg文件

image.png

  1. 使用命令 解压文件夹
pkgutil --expand '/Volumes/Install Mac OS X/InstallMacOSX.pkg' /Users/xxxxx/Desktop/output 

注意：第一个参数里面 /Volumes/Install Mac OS X/InstallMacOSX.pkg 就是你双击后看到的文件路径， 第二个参数是你要导出的路径

  1. 导出output后有3个文件 image.png

对着InstallMacOSX.pkg 右键显示包内容 image.png

看到 installESM.dmg  直接喂给vm image.png

其他 safari移动端调试

通过数据线连接iphone真机，在mac上面调试

打开 safari 开发者模式 image.png

iphone 设置settings -》 safari -》 advanced image.png

在develop -》 open page with 选择自己的手机型号/ 当然使用xocde安装的模拟模拟器也是可以

image.png

avatar
文章
阅读
粉丝