--- title: Firefox 開發者工具 slug: Tools tags: - Developing Mozilla - NeedsMarkupWork - NeedsTechnicalReview - NeedsTranslation - Tools - TopicStub - Web Development - 'Web Development:Tools' translation_of: Tools ---

在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。

要尋找最新的開發工具與功能，請試試 Firefox Developer Edition。

核心工具

頁面檢測器

檢視並編輯網頁的內容與版面。視覺化各種東西，包括盒子模型、動畫、格線版面。

網路主控台

檢查網頁紀錄的訊息、並透過 JavaScript 與網頁互動。

JavaScript 除錯器

停步、逐步、試驗、修改網頁的 JavaScript。

網路監控

看看網頁載入時發了什麼請求。

效能工具

分析網站的通常反應、JavaScript、還有布局效能。

適應性設計模式

看看網站或 app 在不同的設備與網路狀況下表現如何。

連接開發者工具

如果你透過鍵盤快捷鍵或等同的選單選項啟動了開發者工具，它的目標會針對目前頁籤的文件。不過，你也可以把工具連接到其他目標，不論是不是相同的瀏覽器、甚至是不是相同的設備。

about:debugging: 針對附加元件、內容頁籤、還有瀏覽器運行的 worker。
連接到 Firefox for Android: 連接開發者工具到在 Android 運行的 Firefox 實例。
連接到 iframes: 把開發者工具連接到頁面內指定的 iframe。
連接到其他瀏覽器: 把開發者工具連接到 Android 的 Chrome 與 iOS 的 Safari。

給瀏覽器除錯

開發者工具預設上是附加在網頁或網路 app 的。不過，你可以把它與瀏覽器作為一個整體連結起來。這在瀏覽器與附加元件開發方面會很有用。

瀏覽器控制台: 看看瀏覽器附加元件紀錄的訊息，然後運行 JavaScript 程式碼。
瀏覽器工具箱: 將開發者工具附加到瀏覽器本身。

擴展開發者工具

開發者工具都設計為易於擴展的。Firefox 附加元件可以取用開發者工具與其元件，擴展現有工具或加入新工具。使用遠端除錯協定，可以建立自己的除錯用戶端與伺服器，讓你可以使用自己的工具為網站除錯，或針對不同的目標平台應用 Firefox 工具。

開發用附加元件示例: 透過實例理解如何作出一個開發用的附加元件。
給開發者工具加一個面板: 給開發者工具寫一個添加新面板的附加元件。
遠端除錯協定: 協定用於連接 Firefox 開發者工具到如 Firefox 或 Firefox OS 設備之類的除錯目標。
原始碼編輯器: Firefox 內建，能嵌入到附加元件的原始碼編輯器。
Debugger 介面: 可以讓 JavaScript 程式碼觀察其他 JavaScript 程式碼的 API。Firefox 開發者工具利用該 API 實做了 JavaScript 程式碼除錯器。
自訂網頁主控台輸出: 如何擴展與自訂 Web Console 和 Browser Console 的輸出。

從 Firebug 遷移

Firebug 已經走到產品生命的盡頭（理由請參閱 Firebug lives on in Firefox DevTools），我們明白有些人要遷移到不太熟悉的 DevTools 產品線會有點困難。針對從 Firebug 遷移到 Firefox 開發者工具壓力的緩解，我們寫了個方便的指南：從 Firebug 遷移。

貢獻

如果你想幫忙改進開發者工具，這些資源能幫助你。

Get Involved: 告訴你如何參與其中的 Mozilla wiki 頁面。
firefox-dev.tools: 能幫你找到目前在處理的錯誤。