Ever wonder what makes the Web work? Want to tinker with design and code? Firefox Developer Tools let you look under the hood of any Web page so you can debug, optimize and experiment with the Web.
The Style Editor makes it easy to experiment with, revise and test changes to the appearance of Web pages. Edit the design of any page and see your changes instantly as you modify the stylesheet. Try it out from the Web Developer menu.
Mobile developer tools
Fast, easy and intuitive, the Developer Toolbar saves you time when working on Web development. It provides easy keyboard control over a variety of tools and automatically completes commands and parameters as you type. Find it in the Web Developer menu or hit shift+F2.
Peek right into the styling of any Web page by visually selecting the page element that you’re interested in. Simply right-click on any part of the page and select “Inspect Element;” choose Inspect from the Web Developer menu; or use the handy ctrl-shift-I (cmd-shift-I on Mac) keyboard shortcut. (Try it out on this very page!)
Firefox has always had excellent support for HTML5, and the latest version builds on that history with even more advanced features.
Submitted! Thank you.
Firefox implements HTML5 forms, and supports new input types, data list support, new input attributes like autofocus and placeholder, decoupled forms, form options, validation mechanisms, constraint validation and new CSS selectors to bind them all together. For more detailed information, visit our Hacks site.
Firefox includes an HTML5-ready parser which brings new capabilities like inline SVG, and also improves performance by running the parsing algorithm on its own processor. This brings the Firefox parser algorithm closer to the standard and lays the foundation for consistent parsing across browsers.
Firefox supports WebM, the new royalty-free format for video on the Web. It works on YouTube if you join their HTML5 beta, and works with embedded YouTube videos if you use their new iframe embedding API. Join the beta and see an example at the bottom of this post.
With support for the buffered attribute for HTML5 video, Web pages with video can now give an accurate measure of how much video has been buffered rather than an approximation based on the download rate and current position in the stream.
The “autobuffer" attribute for video has been replaced with the new “preload” attribute. This attribute gives developers control over how videos are pre-buffered if they’re included on a page rather than the binary on/off system that was included in Firefox 3.5.
Firefox supports the HTML5 pushState and replaceState history modification calls, allowing developers to create or modify the browser navigation history. These are helpful for applications that might want to generate history entries using the hash after the URL (useful for HTML-based slides, for example).
Firefox supports an early version of calc that’s private-namespaced as –moz-calc. This allows developers to use simple expressions anywhere they can use a length, making CSS page layouts much simpler (no more divs for spacing!).
Firefox has added an extremely useful new CSS extension: -moz-any() selector grouping. This allows providing alternatives between combinators rather than having to repeat the entire selector for one different piece.
Firefox’s CSS pseudo-selector, -moz-focusring, lets you specify the appearance of an element when it’s focused and when it would have a focus ring drawn around it. Different operating systems have different conventions for when to draw a focus ring or not, and this lets you control the look of form controls while maintaining platform conventions.
Firefox implements new standard APIs to find out what’s going on in your browser and provide more ways that you can add interactivity (online and offline) to your web pages.
Firefox can call .click() on a hidden file control to bring up the platform file upload widget, meaning you can build your own instead of exposing the (ugly) file upload control. If you combine this with the new File APIs and progress events you’ll have a recipe for a very nice file upload experience.
Firefox can tell if a mouse or finger generated an event with the mozInputSource property. This is useful with the touch and multi-touch events and makes it possible to build apps that treat touch and mouse input differently.
Firefox includes an early version of IndexedDB. This emerging standard for local storage is still undergoing change and will be private-prefixed until it’s stable. IndexedDB primer provides an overview of using the IndexedDB API.
Firefox includes support for the new FormData object, which makes it easier to interact with HTML forms. It also enables some new capabilities, like making it easy to upload a file as part of a form accessed via the File API.
Firefox supports a huge number of new security enhancements to help Web developers and protect users.
Content Security Policy
Content Security Policy (CSP) is a set of tools developers can use to help prevent a few different classes of attacks. In particular, it offers tools to mitigate cross-site scripting attacks, click-jacking and packet sniffing attacks. When a rule is violated, Firefox can send back information about that violation to the website, helping improve security for other browsers too.