Web Developer Toolbar Shortcuts

Anyone serious about working on their own website should install Chris Pederick’s Web Developer browser extension, (and I suggest using it with FireFox).

The toolbar adds all kinds of diagnostic tools for debugging CSS, HTML, DOM, images and more.  In-fact, it has so many features, many developers forget what is buried deep inside the toolbar’s pull-down menus.

Lets say you wanted to outline all the TABLE CELLS on a page.  You could click Tools, then Web Developer, then Outline, then Tables and finally Table Cells, (as the menu below shows);

diagram showing how to select menu items to outline all TABLE CELLS using Chris Pederick's Web Developer toolbar.

To outline all TABLE CELLS using Chris Pederick's Web Developer toolbar requires (5) pull-down menu hovers and clicks.


Instead, if you prefer you can shorten all of clicking to a series of keystrokes.

All of the shortcuts begin with [ALT]+[T]+[W].. so all you need to remember is the 2-3 keys after that.  The example above, to Outline Table Cells is [ALT]+[T]+[W]+[O]+[T]+[C].

Here’s a few more commonly used ones.

View Image Information ……… [ALT]+TWIV

View image Information using Chris Pederisk's Web Developer toolbar.

View Image Information using Chris Pederisk's Web Developer toolbar.

Outline Block Level Elements ……… [ALT]+TWOB

Oultine block level elements using Chris Pederick's web developer toolbar.

Menu navigation needed to oultine all block level elements using Chris Pederick's web developer toolbar.

To learn the shortcuts, start by pressing  [ALT]+TW, then look for the bold / underlined characters in each menu item.


To download the toolbar or get support for this great tool,
visit: http://chrispederick.com/work/web-developer/

###

Tagged with: , , , , , , , ,
Posted in Webmaster's Toolbox
2 comments on “Web Developer Toolbar Shortcuts
  1. Mike Heath says:

    This isn’t working for me. I’m on Windows XP Firefox 4 and when I press Alt TW the Tools menu drops down and Web Developer is highlighted but the sub-menu does not appear.So no further nav is possible.

    Any ideas?

  2. Randy Harris says:

    I’m still on FF 3, so I can’t say if its a FF4 specific issue. A few thoughts: maybe the keystrokes are conflicting with other browser add-on you have installed, or other Windows apps that trap those particular keystrokes. I can fully navigate the entire Web Developer menu structure with the keyboard shortcuts and have not had anyone else report the issue you’re having, sorry.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>