Templates FAQ: Common HTML/CSS Debug Tools

[kwak]

Common HTML/CSS Debug Tools

Here are 3 common debug tools available which are useful for examining HTML and CSS on a web page.

Microsoft Internet Explorer Developer Toolbar
current link: http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Firefox add-on Web Develepor
current link: https://addons.mozilla.org/firefox/60/

Firefox add-on FireBug
current link: https://addons.mozilla.org/firefox/1843/

These last two are both Firefox "Recommended Add-ons" (https://addons.mozilla.org/firefox/recommended/).

Features:

These tools have lots of features but some to use on the more common html/css problems are:

• Live inspection mode showing html and css for the item under the cursor on a web page.  IE Developer Toolbar, Firefox FireBug, Firefox Web Developer.  Note: Firefox Web Developer has a more limited display than the other two tools.
• Live CSS inspection with link to actual location in CSS.  Firefox FireBug
• View > CSS.  Firefox Web Developer
• Displaying outlines of block level elements.  This lets you quickly see if there are overlap issues with div and table elements.  IE Developer Toolbar, Firefox Web Developer

These tools have many more features.  Explore the tools to find the features you like.

[kwak]

Firefox add-in CSSViewer - see this thread by MystaMax

Firefox add-in View Formatted Source
Note: This add-in will not work with Firefox 2.0 or later.
Copied from a post by toubkal: http://forum.joomla.org/index.php/topic,5997.msg45231.html#msg45231

View Formatted Source 0.9.3.4

This looks really useful. As the name says, it lets you view the source of a web page with a lovely formatted output, beautifully indented html.

What looks very useful is the option to collapse parts of code to make it more readable. i.e. you can collapse a whole div or table full of content into one line - great for looking at the wider layout - especially with multiple nested tables.

More Firefox Add-ons...
All available Firefox Add-ons can be found on the Firefox Add-ons page.

[kwak]

FireBug Version

Personally, I like the interface in 0.4.1.  The new interface in 1.0 has some features which get in the way of me using the tool.  Hopefully that will improve.