Firefox 30 was released on June 10, 2014. It’s a little lackluster but Mozilla are entitled to a break following the browser’s major overhaul in version 29. The most interesting changes:
- a new
background-blend-modeCSS3 property which defines how background colors and images blend together (overlay, multiply, lighten, etc.) - Box model highlighting and
console.countsupport in the developer console. - It’s now impossible to remove default drop-down arrow styling on
selectboxes with-moz-appearance: noneor thetext-indenthack (Bugzilla 649849). Thanks Mozilla — my forms look crappy again and I can’t write that article now!
More significantly, Firebug 2.0 has been launched. It’s taken a while to reach the milestone given the project is almost a decade old and the current trend for rapidly-incrementing version numbers. The world’s first (good) developer console was starting to fall behind its imitators as vendors improved native browser tools.
Firebug 2.0 implements several new features and enhancements…
Interface Update
The interface has received a refresh. Panels can be shown or hidden from the main Firebug menu:
In addition, we’ve finally received syntax highlighting:
Events Inspector
The new Events panel in the HTML tab lists all events attached to the selected DOM element and links to the script handler. Chrome’s Inspector has had this feature for a while and it’s incredibly useful:
JavaScript Expression Inspection
The value of any variable or expression can be inspected by hovering the cursor over the code:
Improved Auto-Completion
Code auto-completion is available on most panels — press tab to open the suggestion drop-down and select an item. It can also be used when editing HTML/SVG attributes and within a breakpoint condition:
Miscellaneous Updates
As well as the usual bug fixes and speed improvements, you can also look forward to using the following features:
- Scripts can be de-minified using the “{}” icon.
- HTML attributes can be added quickly by clicking the ‘>’ of the opening tag.
- Console messages from the same line are grouped (uncheck Group Log Messages on the Console tab drop-down menu to show all messages).
- The search box permits CSS selectors and regular expressions.
- CSS color values can now be shown ‘As Authored’ (as well as hex, RGB or HSL) in the CSS panel drop-down menu.
- Registered mutation observers can be inspected by issuing a
getEventListeners(element)command from the console.
Firebug’s Future
Firefox’s native development tools are great but I still switch to Firebug when I need deeper analysis. It remains my favorite developer console but that’s probably because I’ve been using it since the early alpha days. Some will complain it doesn’t have functionality found elsewhere, although third-party extensions more than make up any shortfall.
Development may diminish over time now vendors are competing to add better browser tools. However, this may never have occurred if it weren’t for Joe Hewitt’s revolutionary add-on. It’s beneficial having a non-vendor creating developer tools unencumbered by commercial, political and technical pressures.
If you’re a web developer, you need Firefox and Firebug should be the first add-on you install.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
