Firefox 開發者工具

在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。要取得最新的開發者工具,請下載 Firefox Developer Edition

核心工具


頁面檢測器

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

網路主控台

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


JavaScript 除錯器

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

網路監控

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


效能工具

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

適應性設計模式

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


更多工具

Firefox 也內建了這些開發者工具,但通常不會像「核心工具」那麼常用。

記憶體
找出哪個物件是用了記憶體哪個地方。
儲存空間
檢查頁面存了什麼 cookie、本機的東西、indexedDB、session。
DOM 屬性檢查器
檢查頁面的 DOM 屬性、函式之類的。
開發者工具列
開發者工具的命令行介面。
Eyedropper
選取網頁的顏色。
速記本
Firefox 裡面文字編輯器,讓你能撰寫並執行 JavaScript。
樣式編輯器
針對目前的頁面觀察與編輯 CSS 樣式。
Shader Editor
查看與編輯 WebGL 使用的 vertex 與 fragment shader。
Web Audio Editor
檢查音頻的節點圖形,並修改其參數。

連接開發者工具

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

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 ConsoleBrowser Console 的輸出。

貢獻

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

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

Join the Developer tools community

Choose your preferred method for joining the discussion: