Templates FAQ: Common HTML/CSS Debug Tools

Forum closed, please submit your tips and tricks to: http://docs.joomla.org/Category:Tips_and_tricks
Forum rules
Please submit all new Tips and Tricks to: http://docs.joomla.org/Category:Tips_and_tricks

This forum section will be closed and removed eventually.
Locked
kwak
Joomla! Ace
Joomla! Ace
Posts: 1055
Joined: Tue Nov 14, 2006 3:19 am
Location: Portland, OR USA

Templates FAQ: Common HTML/CSS Debug Tools

Post by kwak » Tue Dec 26, 2006 6:48 pm

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/deta ... laylang=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.
Keith Watson

kwak
Joomla! Ace
Joomla! Ace
Posts: 1055
Joined: Tue Nov 14, 2006 3:19 am
Location: Portland, OR USA

More Firefox Debug Tools

Post by kwak » Fri Jan 12, 2007 11:47 pm

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 ... l#msg45231
toubkal wrote: 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.
Last edited by kwak on Sat Jan 13, 2007 6:11 pm, edited 1 time in total.
Keith Watson

kwak
Joomla! Ace
Joomla! Ace
Posts: 1055
Joined: Tue Nov 14, 2006 3:19 am
Location: Portland, OR USA

Re: Templates FAQ: Common HTML/CSS Debug Tools

Post by kwak » Sat Feb 03, 2007 2:18 am

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.
Keith Watson


Locked

Return to “Submit Your Suggested Tips & Tricks to Docs.joomla.org now please.”