在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。
核心工具
更多工具
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 的。不過,你可以把它與瀏覽器作為一個整體連結起來。這在瀏覽器與附加元件開發方面會很有用。
擴展開發者工具
開發者工具都設計為易於擴展的。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
- 能幫你找到目前在處理的錯誤。