On the previous page we had a look on html editors. On this page we want to focus on tools for debugging and validation. Here we will focus on free tools as well.
Valid HTML is sexy ;) and it increases the change that most browsers will render the page properly. A nother pro to validate your page is, that search engines also prefer pages with valid HTML.
You can find the W3C Validator online on:
For the mozilla firefox browser you can find a lot of plugins, that help you to indentify bugs and optimize your website.
The central website for firefox plugins is addons.mozilla.org
There are two plugins that i want to show shortly:
The plugin can be downloaded on the projectpage (http://chrispederick.com/work/web-developer/).
The web developer toolbar offers you a lot of features that are very handy for common tasks:
The toolbar offers you a features with a nice user interface:
Another great extension for firefox is firebug. You can find more information about firebug on www.getfirebug.com.
You can see in the scrennshot how you can see the DOM of a website in firebug with a tree view, where you can expand and browser through the nodes.
When you hoover with the mouse over a node, the node will be highlighted within the website. This is usefull to get used to the structure of an HTML document.
In the right corner you will find more information about the current selected node.
In the "layout" are, all CSS classes will be shown that influnce the layout of the selected node. You can also make live inline changes here or deactivate single styles for debugging.
Firebug also gives you the possiblity to messure the loading times of a website in a very comfortable way.
In the section "Net" you find the visualized loading times for each element on your website.