Mozilla Firefox hasn’t been the exciting browser it used to be before the advent of Chrome and the rapid release cycle hasn’t really helped so much either. But lately, Mozilla has been on a roll with some big changes starting with Firefox 29 which had a refreshing visual makeover and the more minor Firefox 30 which introduced GStreamer 1.0 support and a new sidebar button. The beta of Firefox 31 focuses more on the developer front and it is definitely worth a look even for a beta.
Once you open up the Web Developer Tools, you will notice that the layout remains similar to the current stable version. Many of the Web Developer improvements are actually under the hood. Try going to the “Style Editor” section, edit any CSS file, hold the “Ctrl” key and select multiple lines. Try typing with these lines selected and your edits will be applied to the selected lines.
Click on the “Settings” (Gear) icon and scroll down and you will notice another new check box labeled “Grab a color from the page” in the Available Toolbox Buttons section. With this ticked, an eyedropper should appear on the upper right of the Web Developer Tools panel. This allows you to get the hex color code of any pixel within the Mozilla Firefox window. This is useful if you want to grab the color of an element within a particular site and apply it elsewhere without crawling through the source code.
On the “Inspector” tab, the “Box Model” panel has been slightly improved allowing you to edit the dimensions directly (just click on the numbers) and instantly see the results. Add-on developers can make use of the Add-on Debugger to aid in the troubleshooting of their add-ons.
Check out Mozilla’s blog post about the recent beta as well as the release notes to discover the other changes. Mozilla Firefox 31 is still in Beta so install only for testing purposes.
Modern browsers have their own set of developer tools these days but Firefox’s recent improvements make it a more appealing tool for very busy developers.