Firefox 開發者工具
在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。
核心工具
頁面檢測器
檢視並編輯網頁的內容與版面。視覺化各種東西，包括盒子模型、動畫、格線版面。
網路主控台
檢查網頁紀錄的訊息、並透過 JavaScript 與網頁互動。
JavaScript 除錯器
停步、逐步、試驗、修改網頁的 JavaScript。
網路監控
看看網頁載入時發了什麼請求。
效能工具
分析網站的通常反應、JavaScript、還有布局效能。
適應性設計模式
看看網站或 app 在不同的設備與網路狀況下表現如何。
更多工具
Firefox 也內建了這些開發者工具，但通常不會像「核心工具」那麼常用。
- 記憶體 (en-US)
- 找出哪個物件是用了記憶體哪個地方。
- 儲存空間 (en-US)
- 檢查頁面存了什麼 cookie、本機的東西、indexedDB、session。
- DOM 屬性檢查器 (en-US)
- 檢查頁面的 DOM 屬性、函式之類的。
- 開發者工具列
- 開發者工具的命令行介面。
- Eyedropper (en-US)
- 選取網頁的顏色。
- 速記本
- Firefox 裡面文字編輯器，讓你能撰寫並執行 JavaScript。
- 樣式編輯器
- 針對目前的頁面觀察與編輯 CSS 樣式。
- Shader Editor (en-US)
- 查看與編輯 WebGL 使用的 vertex 與 fragment shader。
- Web Audio Editor
- 檢查音頻的節點圖形，並修改其參數。
- 擷取畫面 (en-US)
- 擷取整個網頁或是某個元素。
連接開發者工具
如果你透過鍵盤快捷鍵 (en-US)或等同的選單選項啟動了開發者工具，它的目標會針對目前頁籤的文件。不過，你也可以把工具連接到其他目標，不論是不是相同的瀏覽器、甚至是不是相同的設備。
- about:debugging (en-US)
- 針對附加元件、內容頁籤、還有瀏覽器運行的 worker。
- 連接到 Firefox for Android (en-US)
- 連接開發者工具到在 Android 運行的 Firefox 實例。
- 連接到 iframes (en-US)
- 把開發者工具連接到頁面內指定的 iframe。
- 連接到其他瀏覽器
- 把開發者工具連接到 Android 的 Chrome 與 iOS 的 Safari。
給瀏覽器除錯
開發者工具預設上是附加在網頁或網路 app 的。不過，你可以把它與瀏覽器作為一個整體連結起來。這在瀏覽器與附加元件開發方面會很有用。
- 瀏覽器控制台 (en-US)
- 看看瀏覽器附加元件紀錄的訊息，然後運行 JavaScript 程式碼。
- 瀏覽器工具箱
- 將開發者工具附加到瀏覽器本身。
擴展開發者工具
開發者工具都設計為易於擴展的。Firefox 附加元件可以取用開發者工具與其元件，擴展現有工具或加入新工具。使用遠端除錯協定，可以建立自己的除錯用戶端與伺服器，讓你可以使用自己的工具為網站除錯，或針對不同的目標平台應用 Firefox 工具。
- 開發用附加元件示例
- 透過實例理解如何作出一個開發用的附加元件。
- 給開發者工具加一個面板
- 給開發者工具寫一個添加新面板的附加元件。
- 遠端除錯協定
- 協定用於連接 Firefox 開發者工具到如 Firefox 或 Firefox OS 設備之類的除錯目標。
- 原始碼編輯器
- Firefox 內建，能嵌入到附加元件的原始碼編輯器。
- Debugger 介面 (en-US)
- 可以讓 JavaScript 程式碼觀察其他 JavaScript 程式碼的 API。Firefox 開發者工具利用該 API 實做了 JavaScript 程式碼除錯器。
- 自訂網頁主控台輸出
- 如何擴展與自訂 Web Console 和 Browser Console (en-US) 的輸出。
從 Firebug 遷移
Firebug 已經走到產品生命的盡頭（理由請參閱 Firebug lives on in Firefox DevTools），我們明白有些人要遷移到不太熟悉的 DevTools 產品線會有點困難。針對從 Firebug 遷移到 Firefox 開發者工具壓力的緩解，我們寫了個方便的指南：從 Firebug 遷移 (en-US)。
貢獻
如果你想幫忙改進開發者工具，這些資源能幫助你。
- Get Involved
- 告訴你如何參與其中的 Mozilla wiki 頁面。
- firefox-dev.tools
- 能幫你找到目前在處理的錯誤。