頁面檢測器
檢查 HTML、CSS、盒模型、Grid、Flexbox 與字型資訊，並即時驗證版面與樣式修改。
Firefox 開發者文件
使用 Firefox DevTools 檢查 HTML 與 CSS、除錯 JavaScript、分析網路請求與效能，再透過 MDN 查閱 Web API、Baseline 與瀏覽器相容性資料。Developer Edition 則是獨立的預發行瀏覽器通道，適合提前測試即將推出的 Firefox 功能。
本站隱私權政策Developer Edition、Firefox DevTools 與 MDN 是三個不同概念：前者是瀏覽器通道，DevTools 是內建除錯工具，MDN 則是 Web 平台文件與相容性參考。
Firefox Developer Edition
為網頁開發者打造的獨立 Firefox 通道
Developer Edition 提供仍在 Beta 測試中的最新開發者功能，並包含主控台多行編輯器、WebSocket 檢測器等工具。
它使用獨立設定檔，可與 Firefox 正式版或 Beta 版同時使用，方便在不同瀏覽器通道間測試同一個網站。
遠端除錯、暗色佈景主題與開發者工具列按鈕等開發偏好會預設開啟；實際網頁除錯能力則來自 Firefox DevTools。
Inspect · Debug · Measure · Test
使用 Firefox DevTools
使用 Firefox DevTools
檢查頁面、除錯程式碼並分析執行行為
網頁主控台
查看 JavaScript 訊息、CSS 警告、安全性與網路錯誤，也能直接執行 JavaScript。
JavaScript 除錯器
設定中斷點、單步執行、檢查作用域與呼叫堆疊，用來定位程式邏輯與執行階段錯誤。
網路監測器
查看請求、回應、狀態碼、標頭、快取、時間軸與資源大小，定位載入與 API 問題。
儲存空間檢測器
檢查與修改 Cookie、IndexedDB、localStorage、sessionStorage 與快取等網站儲存資料。
回應式設計模式
模擬不同視窗尺寸、裝置像素比、觸控與網路條件，測試網站在不同環境中的表現。
CSS 視覺化工具
利用 Grid、Flexbox、動畫與字型等視覺化輔助工具理解複雜版面與渲染結果。
效能工具
分析網站回應速度、JavaScript、版面配置與主執行緒活動，找出效能瓶頸。
記憶體工具
透過記憶體快照與物件分析找出不必要的保留、占用成長與可能的記憶體洩漏。
樣式編輯器
查看、編輯與管理頁面載入的 CSS 樣式表，快速測試修改並追蹤樣式來源。
從 DOM、JavaScript 到網路與效能，按問題選擇工具
Firefox DevTools 是一整套整合工具，不是單一面板；不同問題可以從頁面結構、程式碼、請求、儲存與效能逐步定位。
版面與 CSS 除錯
先用頁面檢測器確認 DOM、CSS cascade、盒模型、Grid 與 Flexbox，再即時測試規則修改。
API 與網路除錯
使用網路監測器檢查請求順序、狀態碼、Header、快取與耗時，再搭配網頁主控台定位錯誤。
JavaScript 與效能分析
用除錯器設定中斷點、檢查變數與呼叫堆疊，再搭配效能工具分析程式執行和版面更新。
回應式與裝置測試
使用回應式設計模式模擬視窗、DPR、觸控與網路條件，但正式上線前仍應搭配真實裝置與跨瀏覽器測試。
DevTools 負責除錯，MDN 負責 Web 平台參考
先在 Firefox 中觀察真實頁面行為，再到 MDN 查閱規範、範例、Baseline 與瀏覽器相容性資料。MDN 面向整個 Web 平台，不是 Firefox 專屬 API 文件。
HTML、CSS 與 JavaScript
透過 MDN 查閱語言與平台功能、規範連結與範例，再用 Firefox DevTools 驗證實際渲染與執行結果。
Web API 與權限
查閱 DOM、Fetch、Storage、Performance、Media、Workers 等 Web API 的介面、使用條件、權限需求與範例。
Baseline 與瀏覽器相容性
利用 MDN Browser Compatibility Data 與 Baseline 判斷功能在 Firefox、Chrome、Edge、Safari 等主流瀏覽器中的可用範圍。
用程式碼搭配 DevTools 驗證行為
以下範例可搭配頁面檢測器、JavaScript 除錯器、網路監測器與無障礙語意檢查；實際 Web API 支援範圍仍應搭配 MDN 相容性資料判斷。
CSS
使用容器查詢驗證元件層級的回應式版面
.card-grid {
container-type: inline-size;
}
@container (min-width: 720px) {
.card-item {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}JavaScript
觀察頁面可見性並延後非關鍵工作
document.addEventListener('visibilitychange', () => {
if (document.hidden) return;
requestIdleCallback(() => {
loadDeferredWidgets();
});
});Accessibility
用原生按鈕語意建立可展開控制項
<button
type="button"
aria-expanded="false"
aria-controls="faq-panel">
查看詳細資訊
</button>Network
使用 Fetch API 處理請求狀態與錯誤
async function loadProfile() {
const response = await fetch('/api/profile');
if (!response.ok) throw new Error('Request failed');
return response.json();
}Firefox 開發者文件常見問題
圍繞 Firefox DevTools、Developer Edition、JavaScript 除錯、CSS 版面、網路請求、MDN 與瀏覽器相容性回答常見開發問題。
Firefox DevTools 要怎麼開啟？+
Firefox 內建 DevTools。可從瀏覽器選單的開發者工具入口開啟，也可使用 F12 或常見鍵盤快捷鍵進入工具箱，再切換頁面檢測器、主控台、除錯器、網路監測器等面板。
Firefox 怎麼除錯 CSS Grid、Flexbox 和版面問題？+
使用頁面檢測器查看 DOM 與 CSS 規則，再搭配 Grid、Flexbox、盒模型與字型等視覺化工具，檢查版面關係、無效宣告與即時樣式修改。
Firefox 怎麼除錯 JavaScript 和設定中斷點？+
使用 JavaScript 除錯器設定中斷點、單步執行程式碼、檢查作用域、變數與呼叫堆疊；網頁主控台則適合查看記錄、例外與快速執行 JavaScript。
Firefox 怎麼查看 Fetch、XHR 和 API 請求？+
開啟網路監測器後，可以查看 Fetch、XHR、文件、腳本與圖片等請求的狀態碼、Header、回應內容、快取、大小與耗時，並搭配主控台排查網路或安全性錯誤。
Firefox Developer Edition 和一般 Firefox 有什麼不同？+
Developer Edition 是預發行開發通道，提供仍在 Beta 測試中的功能與開發偏好設定，並使用獨立設定檔，因此可與 Firefox 正式版或 Beta 版同時使用。
MDN 是 Firefox 專屬的開發文件嗎？+
不是。MDN Web Docs 提供 HTML、CSS、JavaScript、Web API 與跨瀏覽器相容性資料；Baseline 也會綜合 Firefox、Chrome、Edge、Safari 等主流瀏覽器的支援狀態。
用 Firefox DevTools 除錯，再用 MDN 驗證平台支援
頁面結構、JavaScript、網路請求、儲存、回應式版面與效能問題可以直接在 Firefox 中觀察；Web 標準、API 與跨瀏覽器相容性則繼續到 MDN 查閱。