What’s special about Firefox Dev Edition? How can you customize it? What’s new?
What makes Firefox Dev Edition special?
Firefox Dev Edition is a special version of Firefox just for developers. Create fast, flexible interactive UI with with tools built in React and Redux, a special CSS Grid Inspector, compact browser UI and tools to help you test your site in many browser configurations and devices (including mobile).
Your version of Firefox Quantum: Developer Edition is built on Mozilla’s fastest browser engine yet, Gecko with Servo bits, so you can depend on this version to be not only faster but much more robust.
Since this version of Firefox Dev Edition is pretty new, we thought it would be fun to walk through all the new features with you!
First, let’s start with customizing Firefox Dev Edition juuuust the way you like it.
Customize Firefox Dev Edition
You can minimize the UI and turn on the dark theme.
How:
In the upper right corner, click the three stacked horizontal lines (that’s the menu).
Click “Customize”:
From the “customize” panel, you can select light, default, or dark display. You can also specify compact or expanded display density to make sure you get the most of your screen space.
Check that out! You have customized your Firefox Dev Edition browser! Nice!
Customize the inspector
What a sight for sore eyes! As a dev, you look at a bright screen for hours upon hours. Why not give your eyeballs a rest with a dark developer tools theme?
Isn’t that soothing? Now you can code all day and still find your way to the coffee machine without running into stuff.
Customizing Firefox Developer Edition isn’t just about appearance, though! You can get several developer-focused add-ons to help you work.
MDN web docs has extensive Firefox DevTools documentation
There’s so much more that DevTools can do, and MDN web docs has a complete set of Firefox DevTools documentation for you to explore.
Check out individual tools:
Core Tools
- Page Inspector https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
- Web Console https://developer.mozilla.org/en-US/docs/Tools/Web_Console
- JavaScript Debugger https://developer.mozilla.org/en-US/docs/Tools/Debugger
- Network Monitor https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
- Performance Tools https://developer.mozilla.org/en-US/docs/Tools/Performance
- Responsive Design Mode https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
Other Tools
- Memory https://developer.mozilla.org/en-US/docs/Tools/Memory
- Storage Inspector https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
- DOM Property Viewer https://developer.mozilla.org/en-US/docs/Tools/DOM_Property_Viewer
- Developer’s Toolbar https://developer.mozilla.org/en-US/docs/Tools/GCLI
- Eyedropper https://developer.mozilla.org/en-US/docs/Tools/Eyedropper
- JavaScript Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
- Style Editor https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
- Screenshots Tool https://developer.mozilla.org/en-US/docs/Tools/Screenshot_tool
See all the MDN web docs about Firefox Developer Tools
MDN Web Docs are the most accurate, frequently updated, comprehensive web documentation anywhere!
For real, trustworthy web documentation maintained and updated by an awesome team of writers and contributors, you can’t do much better than MDN.
Want more Mozilla developer tips, news, and tools?
We’re always working on something new.
Our central spot for developer news is in Mozilla.org/developer >>
Keep up with Firefox DevTools
The best way to keep up with Firefox DevTools is to follow us on Twitter. We post the most recent news and works in progress there, as well as calls to contribute.
Follow Firefox DevTools on Twitter >>
Instructional videos, presentations, and more on our YouTube channel
We strive to be helpful in your quest to be the best web developer, so we post helpful tutorials, presentations, and interviews on our MozHacks YouTube Channel
