These are the most helpful extensions I have found for Google Chrome. They are all free. They are also available for Firefox. In Chrome, extensions are added via the Tools menu > Extensions.

1. ColorZilla – gives you a handy colour picker to use in the browser. When you click within the browser viewport, you get the rgb value for the colour, the hex value, and the dimensions of the object selected.

colorzilla

 

2. MeasureIt! – a handy tool that lets you draw a rectangle around any screen element in the browser, giving you the width and height in pixels. I find this helpful to judge the height of an image, or the width of padding or whitespace.

measure-it

 

3. Web Developer – an outstanding and rich tool. One of my favourite features is EditCSS. Another is Display ID and Class Details. Very helpful when you are trying to track down styling.

webdeveloper-toolbar