你需要知道的關於 Firefox 開發者工具的一切

已發表: 2015-05-18

Firefox 開發者版是為開發者量身打造的 Firefox 特殊版本。 它具有所有最新的 Firefox 功能以及許多專業的開發人員工具。 在這裡，我將提供有關其功能的指南，以便您了解有關 Firefox 開發人員工具的所有信息。

用戶界面火狐開發者工具

安裝 Firefox Developer Edition 後，您會注意到它與標準的 Firefox 工具欄略有不同。 Firefox 在設計工具欄時無疑採用了更加以開發人員為中心的方法，使其外觀更窄，默認情況下裝飾有更多按鈕。

Firefox 開發者工具的默認主題是深色的，這很可能是用戶測試的結果。 但是，如果您不喜歡深色主題，您可以隨時通過轉到Menu > Customize來關閉開發者版主題。

創建工具

Firefox Developer Edition 附帶了許多創建工具，這些工具是為那些創作網站和 Web 應用程序的人設計的。 下面我提供了工具及其優點的概述，因此您不必去搜索這些信息。

便箋

便簽本屏幕截圖

該工具為 Web 開發人員提供了試驗 JavaScript 代碼的機會。 在 Scratchpad 提供的環境中，您可以編寫、運行和檢查與當前頁面交互的代碼的結果。

要打開 Scratchpad，只需按 Shift F4 或轉到 Web Developer 菜單並單擊 Scratchpad。 這將打開您可以編寫代碼的窗口。 完成後，單擊“執行”>“運行” ，代碼將在當前選項卡中運行。

樣式編輯器

樣式編輯器使 Web 開發人員能夠查看和編輯所有帶有關聯頁面的樣式表。 您還可以從頭開始創建新樣式表並將其應用到頁面，以及導入現有樣式表並將其應用到當前頁面。

要打開樣式編輯器，請轉到 Web Developer 菜單並單擊Style Editor 。 Firefox 開發人員工具箱將出現在瀏覽器底部，樣式編輯器可供使用。

著色器編輯器

在 Firefox 中使用著色器編輯器很簡單。 開發人員可以完全查看和編輯 WebGL 使用的片段著色器和頂點。 對於那些不知道的人來說，很快，WebGL 智能地使用 JavaScript（通過 API）直接通過 Firefox 瀏覽器渲染 2D 和 3D 圖形，而無需使用插件。

為了使用著色器編輯器，需要先啟用它。 為此，請轉到工具箱設置，然後選中“著色器編輯器”旁邊的框。 著色器編輯器將顯示在 Firefox 工具欄中。 單擊它，您將能夠打開它。

網絡音頻編輯器

Web Audio Editor API 使開發人員能夠創建音頻上下文。 開發人員需要創建音頻節點，提供：

  • 音頻源
  • 執行轉換的節點
  • 表示為音頻流選擇的目的地的音符。

網絡音頻編輯器將檢查頁面的音頻方面並在圖表中提供它的可視化表示。 這使開發人員能夠檢查功能和操作，並檢查所有節點是否正確連接。 開發人員可以編輯和檢查 AudioParam 節點屬性以及其他屬性。

與著色器編輯器一樣，網絡音頻編輯器必須手動啟用並且不是默認設置。 啟用很簡單：只需返回開發人員工具設置，然後選中“Web 音頻”旁邊的框。 然後，您將看到 Firefox 工具箱工具欄中顯示了一個附加選項卡。 只需單擊此選項卡，就會加載一個頁面，您可以從中構建音頻上下文。

調試工具

Firefox 的調試工具旨在檢查、探索和調試網站和 Web 應用程序。 下面我概述了其中一些工具的主要功能及其優點。

頁面檢查器

Page Inspector 工具使開發人員能夠檢查和編輯網頁的 HTML 和 CSS 編碼。 使用此工具，開發人員可以通過本地加載的版本或通過遠程目標調查頁面。

打開頁面檢查器很容易。 如果您選擇了一個元素，您只需右鍵單擊該元素，然後選擇“檢查元素”。 或者，您可以轉到 Web Developer Menu，然後單擊 Inspector 選項。 然後頁面檢查器將出現在瀏覽器的底部。

網絡控制台

此工具記錄與網頁相關的所有信息，例如網絡請求、JavaScript、CSS、安全錯誤和警告、錯誤警告和信息性消息。 它還使您能夠使用 JavaScript 與網頁交互。

Web 控制台旨在取代舊的錯誤控制台，後者最初是 Firefox 開發人員工具的一部分。 雖然錯誤控制台提供了來自多個頁面的大量錯誤列表，但 Web 控制台只會顯示與特定網頁相關的信息，因此更有用。

要打開 Web 控制台，請轉到 Firefox 菜單中的 Web 開發人員子菜單，然後單擊“Web 控制台”。 您也可以使用快捷鍵 Ctrl Shift K。工具箱將出現在瀏覽器底部，並激活“控制台”。

調試器

Firefox Debugger 工具為 Web 開發人員提供了檢查和修改 JavaScript 代碼的機會。 它還可以用於識別錯誤。 使用調試器，您可以在 Firefox 中本地調試代碼，也可以在 Firefox OS 設備或 Firefox for Android 上遠程調試代碼。

要打開調試器，請轉到 Firefox 主菜單中的 Web Developer 子菜單，然後單擊“調試器”。 或者，您可以按 Ctrl Shift S，工具箱將出現在瀏覽器底部，調試器已激活並可供使用。

網絡監視器

網絡監視器旨在向您顯示 Firefox 發出的所有不同網絡請求、每個請求所需的時間以及每個請求的詳細信息。 轉到 Web 開發人員菜單 > 網絡以激活該工具。 您需要刷新頁面才能看到請求。

在網絡監視器中，您將能夠查看請求的時間線並按類型過濾內容。 還有一個性能分析工具，您可以使用它來查看瀏覽器下載網站不同部分所需的時間。 要運行此工具，只需單擊網絡監視器底部工具欄中的秒錶圖標。

存儲檢查員

如果您想了解網頁可以使用的不同類型的存儲，則需要啟用存儲檢查器工具。 目前，存儲檢查器可用於檢查 Cookie、本地存儲、會話存儲和 IndexedDB。

存儲檢查器提供存儲的只讀視圖。 然而，Firefox 表示正在開發該工具，以便開發人員能夠在未來編輯他們的存儲內容。

要打開 Storage Inspector，請轉到 Web Developer 子菜單並單擊 Storage Inspector。 或者，您可以按 Shift + F9 以使用鍵盤快捷鍵。

開發者工具欄

Firefox 開發者工具欄

開發人員工具欄旨在為 Web 開發人員提供對許多 Firefox 開發人員工具的命令行訪問。 除了使用 Firefox 設置的命令（您可以在此處找到）之外，您還可以使用 Scratchpad 添加您自己的命令。 這些可以轉換為附加組件，以便其他人也可以使用它們。

按 Shift + F2 打開開發工具欄。 或者，您可以轉到 Web 開發人員菜單並單擊開發人員工具欄。

其他調試工具——3D 視圖、吸管、iFrames

Firefox 3D 查看工具

Firefox 開發人員工具包中包含的其他調試工具包括：

  • 3D 視圖：這為您提供嵌套的 HTML 和內容塊的 3D 視圖
  • 滴管：這使您可以從頁面中選擇特定顏色並將其複製到剪貼板）
  • 選擇 iFrame：這允許您將開發人員工具指向文檔中的特定 iFrame。

吸管顏色工具

移動工具

除了 Firefox 創建和調試工具之外，還有許多移動工具可供開發人員用於移動開發。 我將在下面詳細介紹這些。

應用管理器

該工具允許開發人員在 Firefox OS 設備上測試、部署和調試 HTML5 應用程序。 它還充當模擬器，因此可以直接從 Firefox 桌面瀏覽器進行測試。

應用管理器附帶一個應用面板，開發者可以在其中管理本地應用和外部託管的應用； 設備面板，提供有關已連接設備的信息，例如其操作系統版本和安裝的應用程序； 和 Toolboxes，它們是一組可用於正在運行的應用程序的 Firefox 開發人員工具。

網絡IDE

此移動工具使開發人員能夠通過 Firefox OS Simulator 或通過 Firefox OS 設備創建、編輯、執行和調試他們的 Web 應用程序。 您可以使用它通過其他瀏覽器（例如​​ Firefox for Android 和 Chrome for Android）連接到 Firefox 開發人員工具。

其他移動工具

其他移動工具包括：

  • Firefox for Android 遠程調試
  • Firefox OS Simulator：模擬 Firefox OS 設備，但在桌面上運行
  • 響應式設計視圖：這使您能夠查看您的網站或 Web 應用程序在具有不同屏幕尺寸的不同設備上的外觀。

性能工具

性能在 Web 開發中至關重要，這就是 Firefox 為 Web 開發人員提供許多工具的原因，這些工具可用於診斷和修復其網站和 Web 應用程序的任何性能問題。

性能工具

性能工具取代了 Firefox 最初的 JavaScript 採樣分析器。 它仍然包含採樣配置文件的更新版本； 但是它也有一個幀率時間線。 預計未來會有更多功能。

性能工具可用於創建、分析和採樣配置文件。

JavaScript 分析器

JavaScript Profiler 旨在幫助開發人員查找 JavaScript 代碼中的問題。 它通過對當前 JavaScript 調用堆棧進行採樣並提供有關它的統計信息來完成此操作。

油漆閃爍工具

此工具將突出顯示瀏覽器需要重新繪製以響應輸入的網頁部分。 它使 Web 開發人員能夠確定他們的網站是否使瀏覽器重新繪製超過其需要的次數。 請記住，重繪會對您的性能產生負面影響，因此最好使用此工具來消除不必要的重繪並提高網站的性能。

單獨的開發人員資料

下載火狐開發者版

必須在 Firefox 版本之間切換將是一個真正的痛苦。 好消息是 Firefox Developer Edition 使用與您已安裝的其他版本的 Firefox 完全不同的配置文件。

開發者發行說明

Firefox 開發者發行說明

希望閱讀與當前和任何歷史版本的 Firefox 開發人員版本相關的說明的開發人員只需訪問此鏈接即可。

包起來

如果您是新的或有經驗的 Web 開發人員，您將從使用詳細多樣的 Firefox 開發人員工具中受益匪淺。 從創建代碼到調試 HTML，這些工具允許您執行開發網站或 Web 應用程序所需的各種操作。 移動工具也是非常有用的，尤其是對於那些希望以創建網站的響應，從最新的好處（4月21日2015）谷歌的算法更新。

有關 Firefox 開發人員工具的更多信息，請訪問 Mozilla 開發人員網站並加入開發人員社區。 Firefox Developer Edition 可以免費下載和使用。