Today I’m going to share one of my favorite design tools, the Web Developer add-on for FireFox & Chrome. You can download it here and then watch the video to see how it works. (Firebug was the other tool I talked about)
You are gonna to earn lots of nerd points with this one!
Here are a few screen shots in case you aren’t able to see the text well enough in the video…
Click tools > web developer extension > css > display style information to located divs and tags for specific design elements.
Highlight the item you’d like to inspect and that portion of the stylesheet will appear in the box below.
To edit the stylesheet live, click tools > web developer extension > css > edit css.
To figure out the height or width or items user the rulers: tools > web developer extension > miscellaneous > display ruler. The size will appear at the bottom of the tool bar…
Let me know if you like this type of video. It was actually pretty fun & easy to make (way less edits than shooting video of myself talking!) so I’ll be happy to do more in the future.