Firefox 開發者工具

在桌面及行動裝置上進行 HTML、CSS 及 JavaScript 的檢查、編輯及除錯

Firefox Developer Edition 是針對開發者的特別 Firefox 版本，包含 Firefox 最新的功能、以及實驗性的開發者工具。目前的 Developer Edition 包含以下開發者工具的新功能：

提出開發者工具新功能的點子，或是為其他開發者提出的構想投票。

創造

網站與 Web App 的開發工具

Scratchpad: A text editor built into Firefox that lets you write and execute JavaScript.
Style Editor: View and edit CSS styles for the current page.
Shader Editor: View and edit the vertex and fragment shaders used by WebGL.
Web Audio Editor: Examine the graph of audio nodes in an audio context, and modify their parameters.

為網站與 Web App 測試、探索、與除錯

Web Console: See messages logged a web page, and interact with the page using JavaScript.
Page Inspector: View and modify the page HTML and CSS.
JavaScript Debugger: Stop, step through, examine and modify the JavaScript running in a page.
Network Monitor: See the network requests made when a page is loaded.
Storage Inspector: Inspect cookies, local storage, indexedDB and session storage present in a page.
Developer Toolbar: A command-line interface for the developer tools.
3D View: 3D visualization of the page.
Eyedropper: Select a color from the page.
Working with iframes: How to target a particular iframe.

為行動開發而生的工具

App Manager: Design and develop apps for Firefox OS.
WebIDE: The replacement for the App Manager, available from Firefox 33 onwards.
Firefox OS Simulator: Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
Responsive Design View: See how your website or app will look on different screen sizes without changing the size of your browser window.
Debugging on Firefox for Android: Connect the developer tools to Firefox for Android.
Debugging Firefox for Android with WebIDE: For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.
Valence: Connect the developer tools to Chrome on Android and Safari on iOS

測試與修復效能問題

Performance tool: Analyze your site's general responsiveness, JavaScript and layout performance.
Frame rate graph: See the frame rate for your site.
Waterfall: Figure out what the browser is doing as it runs your site.
Call Tree: Figure out where your JavaScript code is spending its time.
Flame Chart: See which functions are on the stack over the course of a performance profile.
Paint Flashing Tool: Highlights the parts of the page that are repainted in response to events.
Reflow Event Logging: See reflow events in the web console.
Network Performance: See how long the parts of your site take to load.

開發者工具預設是用在網頁與 Web App 上的，但你也可以將其連結上瀏覽器，當開發瀏覽器與套件時非常實用

Browser Console: See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox: Attach the Developer Tools to the browser itself.

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

Add a new panel to the devtools: Write an add-on that adds a new panel to the Toolbox.
Remote Debugging Protocol: The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor: A code editor built into Firefox that can be embedded in your add-on.
The Debugger Interface: An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
Web Console custom output: How to extend and customize the output of the Web Console and the Browser Console.
Example devtools add-ons: Use these examples to understand how to implement a devtools add-on.

Choose your preferred method for joining the discussion: