讓我猜猜你的測試流程：

1. 在 VS Code 中編寫程式碼

2. 開啟 Chrome 開發者工具

3. 檢查一下是否有效

4. 出貨

你把火狐瀏覽器搞壞了。

還有 Safari 瀏覽器。可能還有一些基於 Chromium 核心、隱私設定更嚴格的瀏覽器。

「但是Chrome的市佔率高達65%！」你可能會說。

酷。所以你覺得35%的使用者體驗不佳沒問題？那可是大約15億人啊。

讓我解釋一下為什麼這很重要——以及為什麼火狐瀏覽器尤其值得您關注。

瀏覽器測試的現狀

我最近在推特上發起了一項非正式投票：

“部署前你們會在多少種瀏覽器上進行測試？”

結果（783票）：

• 僅限 Chrome 瀏覽器： 47%

• Chrome + Firefox： 28%

• Chrome + Firefox + Safari： 19%

• 所有主流瀏覽器： 6%

近一半的開發者發布的程式碼只在 Chrome 瀏覽器中進行測試。

但Chrome才是標準。

不，Chrome是主流，但不是標準。

該標準是 W3C 規範和 WHATWG 生活標準。

Chrome瀏覽器恰好具備以下功能：

• ✅ 最大的工程團隊（Google）

• ✅ 最具競爭力的運輸功能

• ✅ 最活躍的開發者關係

但「最受歡迎」≠「最正確」。

例如： -webkit-前綴時代

還記得我們當時不得不做這件事嗎？

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

為什麼？因為 WebKit（Safari/Chrome）在功能標準化之前就發布了這些功能。

開發者只在 Chrome/Safari 瀏覽器中進行了測試，所以其他瀏覽器為了不破壞網站，不得不偽裝成 WebKit 瀏覽器。

由於許多網站在 Firefox 中無法正常執行，Mozilla 不得不加入-webkit-前綴支援。

這就是單一引擎佔據主導地位的後果。

為什麼 Firefox 會被忽視（以及為什麼危險）

原因一：開發者使用 Chrome 瀏覽器

惡性循環：

1. 開發者使用 Chrome 進行個人瀏覽

2. 開發者僅在 Chrome 瀏覽器中進行測試。

3. 網站在 Firefox 中無法正常顯示。

4. 用戶改用 Chrome 瀏覽器

5. 市佔率下降

6. 開發者為忽略火狐瀏覽器尋找理由

Firefox 在開發者中的使用率約為10% ，但在一般使用者中的使用率約為 3% 。

翻譯：我們是在自己使用的瀏覽器中進行測試，而不是在使用者使用的瀏覽器中進行測試。

原因二：Chrome 開發者工具更好用

說實話，Chrome 開發者工具比 Firefox 開發者工具更完善。

Chrome瀏覽器具有：

• 更好的性能分析器

• 內建燈塔

• 更多擴充程式

但 Firefox 有：

• 更好的 CSS Grid 檢查器（真的，它太棒了）

• 容器查詢除錯

• 注重隱私的網路工具

區別在哪？谷歌有 100 多名工程師負責開發者工具，而 Mozilla 只有大約 20 名。

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

錯誤的。

以下是我在 Firefox 中遇到的幾個真實存在的 bug：

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要求百分比為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則是透過猜測格式來「提供幫助」。

Bug #3： fetch()函數在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（Google/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+：✅

但是，如果您在沒有core-js情況下使用 Babel，則不會進行 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
});

解決方法：使用類似smoothscroll-polyfill polyfill 或函式庫。

“在我的機器上執行正常”的問題

您的設定：

• Chrome 120（最新版）

• macOS Sonoma

• 32GB 記憶體

• 快速網路

您的用戶設定：

• Firefox 102（雖然老舊但並非絕版）

• Windows 10

• 4GB記憶體

• 3G連接

您的網站：

• 載入耗時 1.2 秒

• 流暢的動畫

• 無錯誤

您的使用者體驗：

• 加載耗時 8 秒

• 動畫效果粗糙

• 白螢幕死機

為什麼？你是在自己的環境下測試的，而不是他們的。

大公司如何處理這個問題

Google

谷歌內部使用Chrome瀏覽器。他們的員工使用Chrome瀏覽器。他們的基礎設施也是基於Chrome瀏覽器。

結果： Google產品（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 的商業模式：廣告（透過 Google）

Firefox 的商業模式：不投放廣告（透過捐款和搜尋合作）

你信任誰來保護你的隱私？

3. 開源很重要

Chrome/Blink：開源但由Google控制

Firefox/Gecko：開源且由社群驅動

如果Google認為“這項功能不利於我們的廣告收入”，那麼它就不會在 Chrome 瀏覽器中推出。

Firefox不存在這種利益衝突。

反駁論點（以及我的回應）

“但是測試耗時太長了！”

回覆：每次部署要花5分鐘在Firefox中測試，時間太長了嗎？

如果你的部署流程如此脆弱，以至於5分鐘都至關重要，那麼你面臨的問題就更大了。

“火狐瀏覽器只有3%的市場份額，何必呢？”

回應： 50億網路用戶的3%= 1.5億人。

你會忽略1.5億潛在客戶嗎？

“我的分析資料顯示，98%的用戶使用Chrome瀏覽器。”

回應：相關性≠因果關係。

也許你的網站在 Firefox 瀏覽器中無法正常運作，所以 Firefox 用戶會立即離開，並且不會出現在分析資料中。

按瀏覽器查看跳出率。我猜 Firefox 的跳出率比較高。

“我直接用瀏覽器測試服務就行了。”

回覆： BrowserStack 每月 39 美元。

下載Firefox是免費的。

行動號召

我想問的是：

下次部署前：

1. 打開 Firefox

2. 測試您的網站

3. 壞了就修好。

就是這樣。

我不是叫你換瀏覽器，也不是要你成為火狐瀏覽器的擁護者。

只是想請您在多個瀏覽器中進行測試。

資源

測試工具：

• 劇作家- 跨瀏覽器自動化

• BrowserStack - 真實設備測試

• 我可以使用- 瀏覽器支援表

Firefox 工具：

• 火狐開發者版

• MDN Web Docs （Mozilla 的優秀文件）

我的專案（專為 Firefox 建置）：

• LogWard 在 GitHub 上

最後想說

每當你發布只能在 Chrome 瀏覽器中執行的程式碼時，你就是在為瀏覽器壟斷投票。

您正在投票給：

• 創新能力下降

• 隱私性降低

• 選擇較少

我們以前就遇到過這種情況（Internet Explorer）。

我們不要再這樣做了。

你會在多個瀏覽器中進行測試嗎？你的工作流程是怎麼樣的？請在評論區分享！ 👇

如果你是一位只使用 Chrome 瀏覽器的開發者，我向你發出挑戰：現在就用 Firefox 測試你的網站。我敢打賭你至少會發現一個 bug。

原文出處：https://dev.to/polliog/your-site-works-in-chrome-congrats-youve-alienated-15-of-users-4hoc