A staple tool for any web developer and one of our favourites here at Engage Web is ‘Firebug’. It’s a nifty add-on to Firefox that gives you the ability to edit, manipulate and test HTML and CSS changes on a live website without changing the original code.
As with anything this popular and powerful, there will be people looking to emulate its success. With this in mind, I have looked at what I think are the three main browsers and their offering to the debugging arena:
The first offering is from Firefox itself. It was bundled with the Firefox 4 release and comes with a very similar interface to Firebug. As much as it pains me to say with my allegiance to Firebug, the Firefox one is incredibly usable, with the overlay drop-downs able to emulate ‘hover’ and ‘focus’ states, as well as an enlarged side panel for CSS editing. There is also the ability to enter a ‘responsive mode’ which resizes the viewport, giving feedback on the size so you can define those breakpoints.
The biggest pull for me was the 3D view, which layers the parent and sibling elements on the page into a fully moveable and selectable 3D representation.
Chrome’s inbuilt debugger is closer to Firebug’s look, and works in a very similar way. However, I found it quite awkward at times to change values of CSS and accurately see which element I was working on. It reminded me of some of the first drafts of Firebug before great improvements were made in the interface and usability. The one useful element that stood out was an ‘Audit’; this gave feedback on the site as to improvements that could be made in its speed and efficiency, something I’m always striving for.
A very similar effort to the Chrome entry, it has a very basic visual appearance. It fulfills all of the basic expectations of a debugger, but doesn’t really go the extra mile to add anything new or innovative. The ability to render pages as IE 6/7/8/9/10 is quite handy, but I feel that it’s just there for web developers to go through each one and apply the appropriate fixes for the variations in each version.
In conclusion, my two favourites debuggers will still be Firebug and Firefox’s own inbuilt debugger, a powerful combination that gives Firefox the edge when it comes to being the choice of the developer.