别再买Mac来修复 CSS 了

Source: Dev.to

“黑客”方式在 Windows & Linux 上调试 Safari

说实话：Safari 就是新的 Internet Explorer。

作为网页开发者，我们大多使用 Chromium（Chrome、Edge、Brave）和 Gecko（Firefox）。我们的布局在 Windows 或 Linux 上看起来完美——直到出现工单：

• “我的 iPhone 上菜单坏了。”
• “我的 MacBook 上图片被压扁了。”

如果你没有 Mac，常见的解决方案要么昂贵要么痛苦：

• 买一台 Mac——花上 1,000 美元以上只为验证一个 flex-gap 问题。
• 云测试（BrowserStack、LambdaTest）——工具优秀，但费用高且有时卡顿。
• 虚拟机 / Hackintosh——法律灰色地带，环境脆弱，头疼不已。

第四种方式

开源世界里有一个隐藏的宝石，让你能够在 Windows 和 Linux 上原生运行 WebKit（Safari 背后的渲染引擎）。它免费、快速，并且可以配合 Node.js 使用。

欢迎使用 Playwright WebKit。

什么是 WebKit（以及为什么可行）

Safari 并非魔法，它是基于渲染引擎 WebKit 构建的浏览器 UI。

Apple 开发 WebKit，但 WebKit 本身是开源的。虽然 Apple 在 2012 年停止了 Safari for Windows，但 Playwright 团队（Microsoft）为 Windows 和 Linux 编译了 WebKit。

这为你提供了：

• 相同的 CSS 渲染规则
• 相同的 JavaScript 奇怪行为
• 相同的布局 bug

它并不是完整的 Safari.app，但对于 布局、CSS 与 JS 调试 来说，准确度约 ≈ 99.9 %。如果这里出现问题，iPhone 上也会出现。就这么简单。

设置：从零到 Safari 只需 2 分钟

你只需要 Node.js。

前置条件

• Node.js（Windows、Linux 或 WSL）
• 终端（PowerShell、CMD、Bash）

步骤 1：安装 Playwright 浏览器（重要）

npx playwright install

这会为你的操作系统下载 Chromium、Firefox 和 WebKit 二进制文件。只需运行一次；否则 codegen 可能会失败或反复下载浏览器。

步骤 2：立即启动 WebKit

npx playwright codegen https://your-website.com --browser webkit

同样支持 localhost：

npx playwright codegen http://localhost:3000 --browser webkit

Playwright 将会：

• 启动 WebKit
• 打开一个浏览器窗口
• 自动附加 DevTools

……于是你就在 Windows/Linux 上调试 Safari 了。

你看到的是什么

窗口极简——没有地址栏、没有书签、没有 Apple UI，但它 是真正的 WebKit 在渲染你的网站。它使用的正是以下平台的同一引擎：

• macOS 上的 Safari
• iOS 上的 Safari
• Apple 设备上的内嵌浏览器

像 Safari 老手一样调试

打开 DevTools

右键任意位置 → 检查元素。打开的 DevTools 是 WebKit Inspector，而不是 Chrome DevTools，所以会有一些差异。

首先检查的内容

• Elements – CSS 差异、flexbox 行为、缺失的 gap
• Console – 只在 Safari 中出现的 JS 错误（例如可选链、日期解析）
• Network – CORS、请求头、混合内容问题

常见 Safari Bug 列表

• flexbox 中的 gap 表现异常
• 移动端的 100vh 与动态视口高度
• 图片在 flex/grid 容器内被拉伸
• position: sticky 不一致

日期解析怪癖

new Date('2023-05-01 12:00:00') // ❌ 可能在 WebKit 中失败
new Date('2023-05-01T12:00:00Z') // ✅ 安全

方法 2：脚本化 Safari（高级用户模式）

如果你经常调试 Safari，创建一个可复用脚本。

debug-safari.js

// debug-safari.js
const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });

  const context = await browser.newContext({
    viewport: { width: 390, height: 844 }, // iPhone 12–14 尺寸
    deviceScaleFactor: 3,
    userAgent:
      'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) ' +
      'AppleWebKit/605.1.15 (KHTML, like Gecko) ' +
      'Version/15.0 Mobile/15E148 Safari/604.1'
  });

  const page = await context.newPage();
  await page.goto('http://localhost:3000');
})();

运行方式：

node debug-safari.js

结果：在 Windows 上得到一个持久的 iPhone 风格 Safari 模拟器。

限制（了解权衡）

这是一种黑客方案——强大但不神奇。

你 不能 测试的内容

• 视频与音频编解码 – 没有 H.264 / AAC（受授权限制）
• Apple 系统字体 – 除非手动安装，否则没有 San Francisco
• 仅限 Apple 的集成 – Apple Pay、iCloud、钥匙串、系统级 API

对于 CSS、布局和 JS bug，这些都不影响。

何时仍需使用真机 Mac？

• 上线前的最终 QA
• 媒体播放调试
• 原生 Safari 扩展

日常开发中，Playwright WebKit 已足够。

结语

别再把代码交付后 盼望 Safari 正常工作。使用 Playwright WebKit 你可以获得：

• 免费的 Safari 级渲染
• 即时调试
• 无需 Mac
• 无订阅费用

全部在终端里完成。试过之后，你再也不会为了解决 CSS bug 而去买 Mac 了。

祝调试愉快。 🚀