rss
twitter
    Find out what I'm doing, Follow Me :)

Web Developer Toolbar

Posted By Scott Stroz September 28, 2006 4:30 PM Related Categories: ,
Comments: 4
Views: 4268
I have been a faithful user of the Web Developer Toolbar  for Firefox for quite sometime.  I will admit, I don't even tap a fraction of its potential.  I typically only use it to edit the CSS of a page where I am still creating or editing the layout.  For those who might not know, the Web Developer Toolbar lets you edit the CSS of any page, and renders the changes you make to the page.  It does not save the changes to the file (now that would be both cool and dangerous), but you can copy and paste any changes into the real CSS file.

Today, I was told about 2 nifty little features I did not know existed.

  1. 'Display Element Information' - This is available on the 'Information' menu or, by default, by pressing ctrl+shift+f.  You can then mouse over different parts of the page and see information about the page, such as: the type of element (<td>, <p>, <div>, etc..), and attributes of the tag, any children and the 'ancestors'.  Very cool.
  2. 'View Style Information- - This is available  on the 'CSS' menu or, by default, pressing ctrl+shif+y.  You can then click on any element and any CSS specific to the element you clicked will open in a new tab.  Also very cool.

Both of these will likely save me a lot of time when creating templates, or trouble shooting CSS issues.

4 comments

(Comment Moderation is enabled. Your comment will not appear until approved.)
Add Comment - Subscribe to Comments
Daniel Roberts said...
I use various features during development but my most used feature is Ctrl+Shift+S to turn off styles. I use this regularly when reading blogs and sites that have white text on a dark background, and before printing pages that print badly due to various layouts.
9/28/06 4:38 PM
Brian Polackoff said...
Scott,
Thanks for letting us "out of the loop" guys in on this nifty plugin for FF. I heard of it for the first time today from your blog and it already has impacted the way I test my work.

Thanks!
9/28/06 10:12 PM
James Holmes said...
Try pairing it with the FireBug extension to get into the guts of Javascript/AJAX problems.
9/29/06 4:58 AM
Scott Stroz said...
James - Thanx for the tip on FireBug, it has proven itself invaluable already.
10/1/06 10:30 PM
Add Comment