你的网站在 Chrome 上可用。恭喜，你已经疏远了 15% 的用户

Source: Dev.to

让我猜猜你的测试工作流

• 在 VS Code 中编写代码
• 打开 Chrome DevTools
• 检查是否正常工作
• 发布

你刚刚把 Firefox 弄坏了。
还有 Safari。以及可能一些隐私设置更严格的基于 Chromium 的浏览器。

“Chrome 占有 65% 的市场份额！” 你说。
好啊，那你就接受 35% 的用户体验被破坏吗？那相当于 约 15 亿人。

浏览器测试的现状

我最近在 Twitter 上做了一个非正式投票：

“在部署前你会在多少浏览器上进行测试？”

结果（783 票）：

• 仅 Chrome： 47%
• Chrome + Firefox： 28%
• Chrome + Firefox + Safari： 19%
• 所有主流浏览器： 6%

近一半的开发者只在 Chrome 上测试代码后就发布了。

“但 Chrome 是标准”

不是。Chrome 是 主导，而不是标准。
标准是 W3C 规范和 WHATWG 活文标准。

恰好 Chrome 拥有：

• ✅ 最大的工程团队（Google）
• ✅ 最激进的功能发布速度
• ✅ 最响亮的开发者关系

但“最流行” ≠ “最正确”。

示例：-webkit- 前缀时代

/* CSS */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

为什么会这样？ 因为 WebKit（Safari/Chrome）在特性标准化之前就已经实现并发布。开发者只在 Chrome/Safari 上测试，于是其他浏览器只能 假装是 WebKit 来避免破坏。Mozilla 甚至为了解决大量站点在 Firefox 中失效的问题，直接加入了 -webkit- 前缀的支持。这正是单一引擎主导时会出现的现象。

为什么 Firefox 被忽视（这有多危险）

原因 #1：开发者使用 Chrome

恶性循环

1. 开发者个人浏览使用 Chrome
2. 开发者只在 Chrome 上测试
3. 网站在 Firefox 上出错
4. 用户转向 Chrome
5. 市场份额下降
6. 开发者进一步合理化忽视 Firefox

开发者中使用 Firefox 的比例约为 10 %，而普通用户中只有 3 %。
翻译：我们在自己使用的浏览器上测试，而不是用户使用的浏览器。

原因 #2：Chrome DevTools 更好

Chrome DevTools 因拥有庞大的工程团队而更为精致。

Chrome 拥有：

• 更强的性能分析器
• 内置 Lighthouse
• 更多扩展插件

Firefox 拥有：

• 更出色的 CSS Grid 检查器（真的很棒）
• 容器查询调试
• 注重隐私的网络工具

Google 在 DevTools 上投入了 100 多名工程师；Mozilla 只有约 20 人。

原因 #3：“只要在 Chrome 上能跑，就能在所有浏览器上跑”

错误。 只在 Firefox 中出现的真实 bug：

Bug #1：flex-basis: 0 的渲染差异

/* CSS */
.container {
  display: flex;
}

.item {
  flex: 1 1 0;   /* Chrome 中有效 */
  flex: 1 1 0%;  /* Firefox 中必须使用 */
}

Chrome 接受没有单位的 0；Firefox 按规范要求使用 0%。Firefox 的实现是正确的。

Bug #2：日期输入解析

// JavaScript
new Date('2025-01-15');   // 所有浏览器均可

new Date('1/15/2025');    // Chrome：OK
                         // Firefox：Invalid Date
                         // Safari：OK

Firefox 严格遵循规范；Chrome 为了用户体验会自行猜测日期格式。

Bug #3：fetch() 与 keepalive

// JavaScript
fetch('/api/log', {
  method: 'POST',
  keepalive: true,   // Chrome：始终生效
                     // Firefox：仅在 POST/GET 时生效
  body: JSON.stringify(data)
});

Firefox 曾有一个 bug，使得 keepalive 在某些 HTTP 方法下失效，导致数小时的调试工作。

忽视 Firefox 的真实代价

1. 排除注重隐私的用户

Firefox 用户往往：

• 更懂技术
• 更注重隐私
• 更可能使用广告拦截器

他们对 B2B SaaS 和开发者工具的价值更高。

案例研究： 在 LogWard：

• Chrome：62%
• Firefox：21%
• Safari：14%
• Edge：3%

Firefox 用户的付费转化率是 Chrome 用户的 1.8 倍。

2. 加固垄断

如果 Firefox 消失，浏览器格局将坍塌为基于 Blink 的浏览器：

• Chrome（Google）
• Edge（Microsoft）
• Opera（中国）
• Brave（隐私）
• Vivaldi（高级用户）

全部共享同一引擎。当 Internet Explorer 曾占据 95 % 市场份额时，创新停滞了五年。我们正面临同样的风险。

3. 漏掉真实的 Bug

// JavaScript
const data = await fetch('/api/data').then(r => r.json());

// Chrome 正常
console.log(data?.items?.[0]?.name);

// Firefox 85 中因可选链 bug 失效

可选链的一个 bug 在旧版 Firefox（约 30 % 用户）上导致页面空白。仅因一位用户提交报告才被发现。

“但我使用现代 JavaScript，Babel 会处理这些”

Babel 只转译 语法，并不为 浏览器 API 提供 polyfill。

示例：structuredClone()

// JavaScript
const cloned = structuredClone(originalObject);

支持情况

• Chrome 98+：✅
• Firefox 94+：✅
• Safari 15.4+：✅

如果不使用 core-js 或其他 polyfill，旧版 Firefox 将直接报错。

Safari 的问题更严重

对 Windows/Linux 开发者来说，测试 Safari 非常困难：

• 需要一台 Mac（$1,000 以上）或付费服务如 BrowserStack（$39/月）或复杂的 GitHub Codespaces 环境。

Safari 占约 20 % 市场份额（主要是 iOS）。iOS 强制所有浏览器使用 WebKit，因而 iOS 上的 Chrome 其实就是带有 Chrome 皮肤的 Safari。忽视 Safari 就等于忽视：

• 所有 iPhone
• 所有 iPad
• 大多数 Mac

如何真正进行跨浏览器测试（不至于疯狂）

步骤 1：安装 Firefox Developer Edition

下载地址：

为什么选择 Developer Edition？

• 更快的发布周期
• 内置强大的开发者工具
• 容器标签（隔离上下文）

耗时成本： 大约 5 分钟。

步骤 2：制定测试清单

每次部署前：

- [ ] 在 Chrome（你的日常浏览器）中测试
- [ ] 在 Firefox（捕获规范违背）中测试
- [ ] 在 Safari（如果有 Mac）中测试
- [ ] 在移动端 Chrome（响应式）中测试

耗时成本： 每次部署 5–10 分钟。

步骤 3：使用特性检测，而非浏览器检测

错误做法：

if (navigator.userAgent.includes('Firefox')) {
  // 针对 Firefox 的代码
}

正确做法：

if ('structuredClone' in window) {
  const cloned = structuredClone(obj);
} else {
  const cloned = JSON.parse(JSON.stringify(obj));
}

步骤 4：使用 Autoprefixer 与 PostCSS

npm install autoprefixer postcss

Autoprefixer 会自动添加厂商前缀：

/* 你编写的代码 */
.box {
  display: grid;
}

/* 编译后输出 */
.box {
  display: -ms-grid;
  display: grid;
}