The Benefits of CSS Browser Tools

Those of us familiar with front-end user interface development such as HTML, CSS, and JavaScript, understand the pains and complexities of Cross-Browser Compatibility. For most others, the main thing that matters is how a web site or application displays and functions in their browser(s) of choice. Because of the challenges browsers present, front-end interface development has become a critical part of web development.

For many years, developers had to program for multiple browsers with no assistance. This required developers to solve issues in one of two ways: either by constantly modifying the code in the CSS stylesheet or HTML, or by writing a JavaScript document.write function for debugging. Then came tools to assist the developers, such as Web Developer Toolbar and Firebug. Both of these tools allow developers to change their code directly within the browser prior to applying it to the code in order to test whether or not their change is the correct fix. Additional benefits of such tools include: the ability to check cookie information, view response headers, validate code, debug, re-size the browser settings, view speed reports, populate form fields, inspect the DOM, which is important for AJAX, and activate/deactivate CSS files and scripts.

What follows is the assumption that these innovations changed the life of a front-end user interface developer and made their jobs more efficient and effective. Unfortunately, this is only partially true. There is one major problem with these toolbars: they are only offered in Mozilla's Firefox. The challenge to write and debug code still exists in other browsers, especially in the most popular browser: Internet Explorer. Until recently, developers still had to use the old traditional techniques of making a change to the code,  and then saving and refreshing the browser.

More recently, web developer toolbars have been released for Internet Explorer 7, Opera, and others. In fact, Safari and Google's Chrome have made the toolbar a standard feature in their browsers. Now, front-end development has become less challenging; if there are browser-specific issues, they can be addressed independently or globally. (Note: There is an IE Developer Toolbar available for IE 6, however, you are not able to manipulate the code there.)

Here are links for developer toolbars for most of the main browsers:

• Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843
• IE Developer Toolbar: http://blogs.msdn.com/ie/archive/2007/01/09/ie-developer-toolbar-beta-3-...
• Safari Web Inspector: http://www.apple.com/safari/features.html#developer
• Opera: http://www.opera.com/dragonfly/
• Chrome: http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95691