HTML Tooltipps

HTML Tooltips - Usefull Tools fpr HTML Debugging and Validation

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.

 

The W3C Validator

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:

validator.w3.org

 

Extending Firefox for Webdevelopment

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 Web Developer Toolbar from Chris Pederick

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:

 

  • Switch to different screen resolutions
  • Showing alt tags and sizes of images
  • Editing and deactivating of CSS styles
  • Validation with the W3C validation service

The toolbar offers you a features with a nice user interface:

Firebug - Debugging with Firefox

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.

 

 

Im Scrrenshot ist die Firefox Extension Firebug in Action zu sehen während der HTML Code von admin-wissen.de analysiert wird.
Firebug in Action

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.


Measure loading times with Firebug

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.

 

By hoovering on an item, you can see the preview of the element and you can check the HTTP request and response. This can be usefull to get more inforamtion about the caching of an element. CSS and JavaScript resources are also covered here and you can see what can be delivered from the local browser cache.

 

Im Screenshot ist die Analyse der Ladezeit einer Webseite mit Firebug zu sehen.
Ladezeiten mit Firebug analysieren

Navigation