您的网站在 Chrome 浏览器中可以正常运行。恭喜，您已经失去了 15% 的用户。- 大数跨境

首页

您的网站在 Chrome 浏览器中可以正常运行。恭喜，您已经失去了 15% 的用户。

索引目录

2025-12-16

导读：关注【索引目录】服务号，更多精彩内容等你来探索！

关注【索引目录】服务号，更多精彩内容等你来探索！

让我猜猜你的测试流程：

在 VS Code 中编写代码
打开 Chrome 开发者工具
检查一下是否有效
发货

你把火狐浏览器搞坏了。

还有 Safari 浏览器。可能还有一些基于 Chromium 内核、隐私设置更严格的浏览器。

“但是Chrome的市场份额高达65%！”你可能会说。

酷。所以你觉得35%的用户体验不佳没问题？那可是大约15亿人啊。

让我解释一下为什么这很重要——以及为什么火狐浏览器尤其值得您关注。

浏览器测试的现状

我最近在推特上发起了一项非正式调查：

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

结果（783票）：

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

近一半的开发者发布的代码只在 Chrome 浏览器中进行过测试。

但Chrome才是标准。

不，Chrome是主流，但不是标准。

该标准是 W3C 规范和 WHATWG 生活标准。

Chrome浏览器恰好具备以下功能：

✅ 最大的工程团队（谷歌）
✅ 最具竞争力的运输功能
✅ 最活跃的开发者关系

但“最受欢迎”≠“最正确”。

例如：`-webkit-`前缀时代

还记得我们当时不得不做这件事吗？

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

为什么？因为 WebKit（Safari/Chrome）在功能标准化之前就发布了这些功能。

开发者只在 Chrome/Safari 浏览器中进行了测试，所以其他浏览器为了不破坏网站，不得不伪装成 WebKit 浏览器。

-webkit-由于太多网站在 Firefox 中无法正常显示，Mozilla 不得不添加前缀支持功能。

这就是单一引擎占据主导地位的后果。

为什么 Firefox 会被忽视（以及这为什么危险）

原因一：开发者使用 Chrome 浏览器

恶性循环：

开发者使用 Chrome 进行个人浏览
开发者仅在 Chrome 浏览器中进行测试。
网站在 Firefox 中无法正常显示。
用户转而使用 Chrome 浏览器
市场份额下降
开发者为忽略火狐浏览器寻找理由

Firefox 在开发者中的使用率约为10%，但在普通用户中的使用率约为3%。

翻译：我们是在自己使用的浏览器中进行测试，而不是在用户使用的浏览器中进行测试。

原因二：Chrome 开发者工具更好用

说实话，Chrome 开发者工具比 Firefox 开发者工具更完善。

Chrome浏览器具有：

更好的性能分析器
内置灯塔
更多扩展程序

但 Firefox 有：

更好的 CSS Grid 检查器（真的，它太棒了）
容器查询调试
注重隐私的网络工具

区别在哪？谷歌有 100 多名工程师负责开发者工具，而 Mozilla 只有大约 20 名。

原因三：“如果它在Chrome浏览器上有效，那么它在其他任何地方都有效。”

错误的。

以下是我在 Firefox 中遇到的几个真实存在的 bug ：

错误#1：`flex-basis: 0`渲染

.container {
  display: flex;
}

.item {
  flex: 1 1 0;  /* Works in Chrome */
  flex: 1 1 0%; /* Required in Firefox */
}

Chrome 接受0不带单位的格式。Firefox 则0%根据规范要求必须带单位。Firefox的做法是正确的。

Bug #2：日期输入解析

new Date('2025-01-15');  // Works everywhere

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

Firefox 严格遵循规范。Chrome则是通过猜测格式来“提供帮助”。

`fetch()`漏洞 #3：`keepalive`

fetch('/api/log', {
  method: 'POST',
  keepalive: true,  // Chrome: always works
                     // Firefox: only works for POST/GET
  body: JSON.stringify(data)
});

Firefox 有个 bug，导致它keepalive无法处理某些 HTTP 方法。我花了 3 个小时才调试好。

忽视火狐浏览器的真正代价

1. 你把注重隐私的用户排除在外了。

Firefox 用户往往具有以下特征：

更精通技术
更注重隐私
更有可能使用广告拦截器

翻译：他们是B2B SaaS和开发者工具更有价值的用户。

案例研究：我运营着一款名为 LogWard的开发者工具。我的分析数据如下：

Chrome 用户：62%
Firefox 用户：21%
Safari：14%
优势：3%

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

为什么？因为他们是关心工具本身的开发者，而不是随机流量的开发者。

2. 你正在强化垄断

可怕的是：

如果 Firefox 消亡，我们将面临：

Chrome（谷歌/Blink）
Edge（微软/Blink）
Opera（中文/Blink）
Brave（隐私/Blink）
Vivaldi（高级用户/Blink）

所有 Blink。

当 Internet Explorer 占据 95% 的市场份额时，创新停滞了5 年。

我们又要去那里了，但这次是 Chrome 浏览器。

3. 你错过了真正的虫子

真实故事：

我发布了一个在Chrome浏览器中运行完美的功能。但一位用户反馈说：“整个页面都是空白的。”

是哪个漏洞？

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

// Works in Chrome
console.log(data?.items?.[0]?.name);

// Breaks in Firefox 85 (optional chaining bug)

Firefox 在数组的可选链式调用方面存在一个 bug。我的用户中有 30%使用旧版 Firefox 时会看到空白屏幕。

我之所以发现这个问题，是因为有用户提交了错误报告。有多少人刚刚离开了？

但我用的是现代 JavaScript，Babel 可以处理这个问题。

不，并非如此。

Babel 转译语法，但它不会填充浏览器 API。

例子：`structuredClone()`

const cloned = structuredClone(originalObject);

支持：

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

但是，如果您不使用 Babel core-js，则不会进行 polyfill。

结果：在 Chrome 120 中运行正常，在 Firefox 91 中出现故障。

Safari 的问题更加严重了

至少 Firefox 是开源的，你可以在本地进行测试。

Safari 仅适用于 macOS/iOS。

如果您是 Windows/Linux 开发人员，则必须具备以下条件才能测试 Safari：

购买一台Mac电脑（1000美元以上）
使用 BrowserStack（每月 39 美元）
使用 GitHub Codespaces（比较复杂）

Safari 的市场份额为 20%（主要来自 iOS）。

有趣的是： iOS 系统不支持其他浏览器引擎。iOS 版 Chrome 实际上只是换了 Chrome 皮肤的 Safari。

所以，当你忽略 Safari 时，你也忽略了：

所有iPhone
所有iPad
几乎所有Mac电脑

如何进行真正的跨浏览器测试（而不至于崩溃）

步骤 1：安装 Firefox 开发者版

下载地址： firefox.com/developer

为什么选择开发者版本？

更快的发布周期
内置开发工具
容器标签（隔离不同的上下文）

耗时：下载/安装需 5 分钟。

步骤二：建立测试清单

每次部署之前：

- [ ] Test in Chrome (your dev browser)
- [ ] Test in Firefox (catch spec violations)
- [ ] Test in Safari (if you have a Mac)
- [ ] Test in Chrome on mobile (responsive)

时间成本：每次部署 5-10 分钟。

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

坏的：

if (navigator.userAgent.includes('Firefox')) {
  // Firefox-specific code
}

好的：

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

步骤 4：使用 Autoprefixer 和 PostCSS

npm install autoprefixer postcss

此功能可自动处理供应商前缀：

/* You write: */
.box {
  display: grid;
}

/* It outputs: */
.box {
  display: -ms-grid; /* IE */
  display: grid;
}

第五步：使用真机测试（适用于移动设备）

iOS/Safari 版：

BrowserStack（付费）
LambdaTest（付费）
借用朋友的iPhone（免费）

适用于安卓系统：

Chrome DevTools 远程调试
安卓模拟器（免费但速度慢）

Firefox 真正领先的功能

1. CSS Grid 开发工具

Firefox 拥有业内最好的 CSS Grid 检查器。

铬合金：

Shows grid lines... that's it.

火狐浏览器：

- Shows grid line numbers
- Highlights grid areas
- Shows gap sizes
- Displays grid template areas visually

如果你要构建复杂的布局，Firefox DevTools 是必不可少的。

2. 容器查询调试

Firefox 是第一个提供完善的容器查询调试功能的浏览器。

Chrome 后来也添加了这个功能（在看到 Firefox 的实现方式之后）。

3. 隐私功能

Firefox 具有：

全面 Cookie 保护
（阻止跨站点跟踪）
增强型跟踪保护
（默认阻止第三方跟踪器）
DNS over HTTPS
（默认）

为什么这对测试很重要：

如果你的网站依赖第三方 cookie，除非你妥善处理，否则在 Firefox中将无法正常运行。

例如：在 Firefox 的严格设置下，您的 Google Analytics 分析可能无法正常运行。

真实世界的破损案例

示例 1：CSS`aspect-ratio`

.video {
  aspect-ratio: 16 / 9;  /* Works in Chrome 88+ */
                          /* Firefox 89+ */
                          /* Safari 15+ */
}

但问题是： Safari 14（目前仍占 iOS 设备总数的约 5%）不支持此功能。

使固定：

.video {
  aspect-ratio: 16 / 9;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
  .video {
    padding-top: 56.25%; /* 9/16 = 0.5625 */
  }
}

示例 2：`input type="date"`样式

input[type="date"] {
  appearance: none;  /* Removes default styling */
}

Chrome：完美运行；

Firefox：部分运行；

Safari：完全无视。

解决方案：使用日期选择器库（flatpickr、react-datepicker）以获得一致的用户体验。

示例 3：平滑滚动

window.scrollTo({
  top: 1000,
  behavior: 'smooth'  // Chrome: smooth animation
                      // Firefox: smooth animation
                      // Safari 15+: smooth animation
                      // Safari 14-: instant jump
});

解决方法：使用 polyfill 或类似库smoothscroll-polyfill。

“在我的机器上运行正常”的问题

您的设置：

Chrome 120（最新版）
macOS Sonoma
32GB 内存
快速互联网

您的用户设置：

Firefox 102（虽然老旧但并非绝版）
Windows 10
4GB内存
3G连接

您的网站：

加载耗时 1.2 秒
流畅的动画
无错误

您的用户体验：

加载耗时 8 秒
动画效果粗糙
白屏死机

为什么？因为你是在自己的环境下测试的，而不是在他们的环境下。

大公司如何处理这个问题

谷歌

谷歌内部使用Chrome浏览器。他们的员工使用Chrome浏览器。他们的基础设施也基于Chrome浏览器。

结果：谷歌产品（Gmail、Docs、Meet）在Chrome浏览器中运行效果最佳。

他们会测试其他浏览器，但 Chrome 浏览器享有优先权。

微软

微软在各种浏览器上都采用了自动化测试。

他们的堆栈：

Playwright（跨浏览器自动化）
Azure DevOps（基于浏览器矩阵的 CI/CD）
手动质量保证团队

预算： $$$$$

Mozilla

Mozilla 首先会在 Firefox 中测试所有内容（这显而易见）。

但他们也会在 Chrome 和 Safari 中进行测试，因为他们知道他们的用户会在 Chrome 中进行测试。

真是讽刺，对吧？

我的个人测试工作流程

以下是我测试LogWard 的方法：

本地发展（90% 的时间）

主要工具：
Chrome 开发者工具
次要：
Firefox DevTools（每 3-4 个功能使用一次）

部署前（预部署之前）

# Automated tests in multiple browsers
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit  # Safari engine

前期准备（制作前）

手动测试：
Chrome（桌面版）
手动测试：
Firefox（桌面版）
手动测试：
Safari（通过 BrowserStack）
手动测试：
Chrome（安卓）
手动测试：
Safari（iOS 通过 BrowserStack）

部署后

监控：
Sentry 用于检测 JavaScript 错误（按浏览器分组）
分析：
通过浏览器查看跳出率

如果 Firefox 的跳出率比 Chrome 高出 10%，那说明某些地方出了问题。

为什么火狐浏览器的生存至关重要

1. 创新源于竞争

Firefox 首创的功能示例：

Quantum CSS
（并行 CSS 引擎 - 2017）
WebAssembly
（与 Chrome 共同开发，2017 年）
WebRender
（GPU加速渲染，2018）
全面 Cookie 保护
（Chrome 后来效仿的隐私模式，2021 年）

如果没有 Firefox 不断突破界限，Chrome 将会停滞不前。

2. 将隐私作为首要功能

Chrome的商业模式：广告（通过谷歌）

Firefox的商业模式：不投放广告（通过捐赠和搜索合作）

你信任谁来保护你的隐私？

3. 开源很重要

Chrome/Blink：开源但受谷歌控制；

Firefox/Gecko：开源且由社区驱动

如果谷歌认为“这项功能不利于我们的广告收入”，那么它就不会在 Chrome 浏览器中推出。

Firefox不存在这种利益冲突。

反驳论点（以及我的回应）

“但是测试耗时太长了！”

回复：每次部署都要花5分钟在Firefox中测试，时间太长了吗？

如果你的部署流程如此脆弱，以至于5分钟都至关重要，那么你面临的问题就更大了。

“火狐浏览器只有3%的市场份额，何必呢？”

回应： 50亿互联网用户的3%= 1.5亿人。

你会忽略1.5亿潜在客户吗？

“我的分析数据显示，98%的用户使用Chrome浏览器。”

回应：相关性≠因果关系。

也许你的网站在 Firefox 浏览器中无法正常运行，所以 Firefox 用户会立即离开，并且不会出现在分析数据中。

按浏览器查看跳出率。我猜 Firefox 的跳出率更高。

“我直接用浏览器测试服务就行了。”

回复： BrowserStack 每月收费 39 美元。

下载Firefox是免费的。

行动号召

我想问的是：

下次部署之前：

打开 Firefox
测试您的网站
坏了就修好。

就是这样。

我不是要你换浏览器，也不是要你成为火狐浏览器的拥护者。

只是想请您在多个浏览器中进行测试。

资源

测试工具：

剧作家
- 跨浏览器自动化
BrowserStack
- 真实设备测试
我可以使用
- 浏览器支持表

Firefox 工具：

火狐开发者版
MDN Web Docs
（Mozilla 的优秀文档）

我的项目（专为 Firefox 构建）：

LogWard 在 GitHub 上

最后想说

每当你发布只能在 Chrome 浏览器中运行的代码时，你就是在为浏览器垄断投票。

您正在投票给：

创新能力下降
隐私性降低
选择较少

我们以前就遇到过这种情况（Internet Explorer）。

我们不要再这样做了。

你会在多个浏览器中进行测试吗？你的工作流程是怎样的？请在评论区分享！👇

如果你是一位只使用 Chrome 浏览器的开发者，我向你发出挑战：现在就用 Firefox 测试一下你的网站。我敢打赌你至少会发现一个 bug。