The tools aren't just for debugging on desktop Firefox. They're built using a client-server protocol that enables a tool running on the desktop to debug code running on an Android device running Firefox, and will soon enable you to debug code running on Firefox OS as well.
We've also provided some tools that specifically target mobile development: the Responsive Design View is a quick way to see how a site will look on a small screen, and the Firefox OS Simulator lets you run and debug a Firefox OS app on the desktop without needing to use a real Firefox OS device.
Finally, the developer tools are extensible by design. Firefox add-ons can access the debugger API, so you can build your own developer tools that extend and enhance the built-in tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.
The current Aurora release is Firefox 25, and includes these new features:
edit and replay network requests
CSS autocompletion in the Inspector
import and export profile data
ToolboxThe Toolbox provides a single home for most of the developer tools that are built into Firefox.
- Page Inspector
- View and modify the HTML and CSS for the selected element.
- Web Console
- Style Editor
- View and edit CSS styles for the current page.
- Network Monitor
- Inspect all the network requests that are made when a page is loaded, and how long they take to execute.
Of course, mobile web developers are web developers too, so the web development tools listed above are mostly interesting to mobile web developer as well. But we've also created some tools specifically aimed at mobile development.
- Remote Debugging
- Use the developer tools to debug your Android device over USB.
- Firefox OS Simulator
- Run and debug your Firefox OS app on the desktop, without needing to use 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.
These tools ship inside Firefox as well, but their user interfaces aren't integrated into the Toolbox.
- Browser Console
- Developer Toolbar
- A command-line interface to manipulate and work with the developer tools in Firefox, and buttons for quick access to the most commonly used tools.
- 3D View
- Also known as "Tilt", this provides a 3D visualisation of the current page.
- Paint Flashing Tool
- The paint flashing tool highlights the part of the browser window that are repainted in response to events, helping to diagnose potential performance problems with your site.
This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the "Web Development" category on addons.mozilla.org.
- DOM Inspector
- Inspect, browse, and edit the DOM of web pages or XUL windows.
- Web Developer
- Adds a menu and a toolbar to the browser with various web developer tools.
- Webmaker Tools
- A set of tools developed by Mozilla, aimed at people getting started with Web development.
- W3C Validators
- The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
If you have any questions about the developer tools built into Firefox, please come and ask us on the dev-developer-tools mailing list or in the #devtools channel on Mozilla's IRC network. You can also find out more about the team on our Wiki page.