Like any developer that needs to debug software the major browsers have now provided this option for a visual debugging of pages in terms of CSS and HTML. These tools make it easy to find design flaws.
You can see the CSS, highlight elements and see bounding Boxes of elements. If you have problems in the looks of your site these tools will help you figure them out easily.
The tools give you full access to the DOM and some go even deeper to the HTTP headers and other important details for a web-developer.
Internet Explorer provides an excellent Explorer Band that will help you a lot. If allows you to highlight elements as you hover them and see their HTML and CSS properties. Get the IE Toolbar and go one step closer to nailing down IE CSS incompatibilities.
If you installed the IE developer bar properly you will see the two elements marked above. The Explorer Bar in the menu and the Blue Arrow icon in the toolbox. Either takes you to the same place!
For FireFox you have the FireBug … what else. It will also give you access to the DOM, JavaScript, HTTP Headers … everything and it has a more detailed description on the linked website.
If you installed the FireFox FireBug properly you will see the element marked above. Click the Green Circle with the Check Inside!
Opera also provides a method of debugging. Opera Developer Tools also give you access to the HTTP headers, Cookies and some more technical stuff.
If you installed the Opera Dev Tools properly you will see the two buttons on the toolbar. Clicking them you will see the details for the active page.
A good website has to perform the same in all these three browsers: Opera, Internet Explorer, FireFox and, even if this sounds easy, Internet Explorer does not allow web developers to get bored.
All the tools are intuitive and easy to use. Move the mouse over the elements and click the buttons to see the magic. Needless to say more!
Post Feedback