The Joomla! Forum ™

Download

Demo


Board index » Joomla! Official Sites & Infrastructure » Sites & Infrastructure - Feedback/Information » Archived Boards - All boards closed » Tips & Tricks - Moving » Submit Your Suggested Tips & Tricks to Docs.joomla.org now please.

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.



Post new topic Reply to topic  Page 1 of 1
  [ 3 posts ] 
  Print view Previous topic | Next topic 
Author Message
kwak
PostPosted: Tue Dec 26, 2006 6:48 pm 
Joomla! Ace
Joomla! Ace
Offline

Joined: Tue Nov 14, 2006 3:19 am
Posts: 1055
Location: Portland, OR USA
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.

_________________
Keith Watson
Top
 Profile  
 
kwak
 Post subject: More Firefox Debug Tools
PostPosted: Fri Jan 12, 2007 11:47 pm 
Joomla! Ace
Joomla! Ace
Offline

Joined: Tue Nov 14, 2006 3:19 am
Posts: 1055
Location: Portland, OR USA
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
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.

_________________
Keith Watson


Last edited by kwak on Sat Jan 13, 2007 6:11 pm, edited 1 time in total.

Top
 Profile  
 
kwak
PostPosted: Sat Feb 03, 2007 2:18 am 
Joomla! Ace
Joomla! Ace
Offline

Joined: Tue Nov 14, 2006 3:19 am
Posts: 1055
Location: Portland, OR USA
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
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 3 posts ] 


Board index » Joomla! Official Sites & Infrastructure » Sites & Infrastructure - Feedback/Information » Archived Boards - All boards closed » Tips & Tricks - Moving » Submit Your Suggested Tips & Tricks to Docs.joomla.org now please.

Who is online

Users browsing this forum: No registered users and 0 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group