Firefox is one of the best browsers out there as you already know and few days ago turned 10 years old. Usually the tradition is to bring presents to the person who has birthday but the guys in Mozilla thought the other way. They decided to give us(developers) a present. It is a a special version of Firefox with the name “Firefox Deveoper Edition” which is packed with plenty of useful tools and features. Dave Camp who is the Director of Developer Tools in Mozilla explained the new features:
So what’s under the hood?
The first thing you’ll notice is the distinctive dark design running through the browser. We applied the developer tools theme to the entire browser. It’s trim and sharp and focused on saving space for the content on your screen. It also fits in with the darker look common among creative app development tools.
We’ve also integrated two powerful new features, Valence and WebIDE that improve workflow and help you debug other browsers and apps directly from within Firefox Developer Edition.
Valence (previously called Firefox Tools Adapter) lets you develop and debug your app across multiple browsers and devices by connecting the Firefox dev tools to other major browser engines. Valence also extends the awesome tools we’ve built to debug Firefox OS and Firefox for Android to the other major mobile browsers including Chrome on Android and Safari on iOS. So far these tools include our Inspector, Debugger and Console and Style Editor.
WebIDE allows you to develop, deploy and debug Web apps directly in your browser, or on a Firefox OS device. It lets you create a new Firefox OS app (which is just a web app) from a template, or open up the code of an existing app. From there you can edit the app’s files. It’s one click to run the app in a simulator and one more to debug it with the developer tools.
Firefox Developer Edition also includes all the tools experienced Web developers are familiar with, including:
- Responsive Design Mode – see how your website or Web app will look on different screen sizes without changing the size of your browser window.
- Page Inspector– examine the HTML and CSS of any Web page and easily modify the structure and layout of a page.
- Web Console – see logged information associated with a Web page and use Web Console and interact with a Web page using JavaScript.
- JavaScript Debugger – step through JavaScript code and examine or modify its state to help track down bugs.
- Network Monitor – see all the network requests your browser makes, how long each request takes and details of each request.
- Style Editor – view and edit CSS styles associated with a Web page, create new ones and apply existing CSS stylesheets to any page.
- Web Audio Editor – inspect and interact with Web Audio API in real time to ensure that all audio nodes are connected in the way you expect.
You can get it from here: https://www.mozilla.org/en-US/firefox/channel/#aurora