Three Cheers for Firefox's "Web Developer"

Wow. If you ever have to spend time writing HTML or CSS, have I got a treat for you. Check out the Web Developer Extension written by Chris Pederick.

This thing is great because it lets you reveal the structure of your page, including anchors, blocks, deprecated elements, image meta-data, edit the CSS of a page, validate HTML, CSS, and other characteristics, and make good choices about accessability. It also includes handy buttons which take you to the relevant standards. It's thoughtfully organized, and has attractive, colorful icons.

Probably the two features which really made my jaw drop are Display Topographic Information which re-renders your page to show you the level of nesting using topographic-map style colors; and View Style Information, which converts your mouse cursor to a crosshair. As you mouse over different page elements, it shows you the "path" to the object. So on this page, when you mouse over The View from the Moon in the title, you see:

    html > body > table > tbody > tr > td.title > div > div.website_title
in the status bar. Clicking on the element pops up a new tab which contains the style information pertinent to that element. So if you ever wondered "how did they do that?" or "what do I have to do to the CSS to affect this element?" it's now trivial to figure out.
Comments:

Post a Comment:
Comments are closed for this entry.
About

Kernel Gardening.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today