Among the tools that simplified the life of a front-end developer and, probably, reduced daily stress was Firebug(1) or the Developer Tools built-in modern browsers, such as Google Chrome(2) or Apple Safari(3). With Firebug or the above Developer Tools, you can analyze, move, edit, delete, modify. Actually, you have the ability to do mostly anything to anything in your web document. These tools has proven to be of great value, a indispensable asset of a front-end developer toolbox.
Microsoft released a Developer Tools(4) for debugging HTML and CSS from with IE8, but it was announced too late. When Firebug was announced for Firefox 2, developers needed to start visual debugging for IE browsers: both IE6 and IE7. Even now, with the IE8 Developer Tools, the toolbar itself seems to lack the easiness and usability of Firebug or Chrome/Safari Developer Tools.
Internet Explorer 6, an outdated browser, with a great disrespect for CSS standard implementations that resulted in many issues (5), did not have a debugging toolbar, but developers found a way to start debugging CSS with the use of, either the border property, or the background-color property.
Understanding that many IE6-related bugs are due to the hasLayout setting implemented in IE6, adding a border-based property to the needed element seemed to work. With a single property, you could see how an element from a web page is positioned in relation to the other items. A single needed CSS line to debug stylesheets for IE6; a single line that has proven to be effective in analyzing how a container is positioned in the context to its siblings.
In f2fw 0.1.7, you can debug your HTML/CSS documents by appending a debug class to your body element.
