Nerd Party: How to use the Web Developer tool

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. // How to use the web developer tool

Highlight the item you’d like to inspect and that portion of the stylesheet will appear in the box below. // How to use the web developer tool

To edit the stylesheet live, click tools > web developer extension > css > edit css. // How to use the web developer tool

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… // How to use the web developer tool

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.


Related Posts Plugin for WordPress, Blogger...


  1. Jay says

    I just discovered this tool the other day after finishing my HTML and CSS basics lessons on and I was so excited! I haven’t taken time to play with it yet, but after watching this, I think I’ll have to very soon. It’s even more powerful than I had imagined!


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>