We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now

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-mode CSS3 property which defines how background colors and images blend together (overlay, multiply, lighten, etc.)
  • Box model highlighting and console.count support in the developer console.
  • It’s now impossible to remove default drop-down arrow styling on select boxes with -moz-appearance: none or the text-indent hack (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.

We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now