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.




  1. 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>