Content with Style

Web Technique

Ctrl+Shift+F at the developer toolbar party

by Matthias Willerich on July 6 2006, 08:14

This is my find of the day:
Hit Ctrl + Shift + F when using Chris Pederick’s developer toolbar, or “display element information” under Information. I’m sure I’m so late to this party, that the only ones left are some crying girl with an empty bottle of spirits and a sad sausage swimming in lukewarm water.

Now more seriously: You’ll find a nice summary including attributes, ancestors and children as well as position and style information for every element you roll over.

Of course you can get similar results (depending on what you’re after) with with CSS->View style information, Outline block elements or by using Firebug’s inspector; but it doesn’t claim as much space, and the information is presented very nicely.

Comments

  • Nice find! I knew there was such a function but I didn’t know the shortcut. As I have a soft spot for shortcuts I find this feature rather nice!

    Cheers!

    by Kalle on July 6 2006, 08:37 #

  • Seems I made some people happy at least.
    I just figured out why I never came across this: On the web developer toolbar 0.9.4 which I had installed, there is no such thing; I can only assume that it was added when Firefox 1.5 came out and I never bothered taking a fresh look at new features.

    by Matthias on July 9 2006, 09:36 #

  • This is news to me too, so I guess you’re not the only one late to the party.

    by Scott on July 6 2006, 13:36 #

  • Wow! I’d never noticed this before either, and I’ve been using the WebDev toolbar all day, every (working) day for over a year now.

    by Nick Fitzsimons on July 7 2006, 09:37 #

  • The first thought that came to my mind when I was in bloglines is, “what on earth could I not know about THE webdev toolbar?” and to my suprise I was totally shocked. I had never seen that before and it is so handy. Thanks for the goodness.

    BTW: You might want to check the taborder on your comment form. It’s kindda annoying to pop up to the home link insetead of the preview button.

    by TJ Singleton on July 6 2006, 18:23 #

  • hmm… i wonder why it doesn’t work for me.
    i used that toolbar every day, and really like the idea of the shortcut, has anyone else had problems with it not actually working?

    by naterkane on July 25 2006, 01:42 #

  • The most useful part of the CTRL+SHIFT+F for me is the exact font size that’s being rendered in pix on firefox – useful if you’re using relative font sizes, and can’t work out the maths, and want better than ‘looks about right’.

    I find doing a quick print screen and semi-transparently overlaying in your photoshop or fireworks design is the best way, which begs another question – should you be going to the spec (e.g. 10px arial 130% leading) or to what comes out looking best?

    by Dan Eastwell on October 23 2006, 12:34 #

  • Problem - the ctrl+shift+f button is now a set-part of Firefox with the new release of version 3.6. When the shortcut is hit, it now changes the view of the Firefox screen to a full-screen display (I'm assuming F stands for full-screen). So this part is no longer available... unless there is a way to change the shortcuts, or if there's a newer version by Chris (plugin author) that changes the shortcut set for this.

    by Jeff Kee on March 14 2010, 18:37 #

  • Im too late to the party too! But I like the post, it is so informative.

    by Business Catalyst on October 7 2010, 02:11 #

Content with Style?

Content with Style was a London based blog, focused on web technology and related topics. We wrote posts between 2005 and 2011. This is the archived content from that time.

Bookmark and Share

Grab our feed

Browse by Date

2011

2010

2009

2008

2007

2006

2005

Copyright 2006-2011 Content with Style, All rights reserved.