1) Firebug

Everyone knows and loves Firebug! It is the swiss-army knife of web development, and it would be strange If you haven’t heard of it before. Firebug is a developing tool that helps us in tons of ways. It’s mainly used for CSS and Javascript debugging.

The HTML tab helps you inspect elements and check their CSS atributes. You can even edit CSS code in a live enviroment. It also allows you to add/edit/delete HTML elements.

The console tab is great for debugging Javascript errors.

The Net tab allows you to see every request made to the server by our browser. It may help you detect a server misconfiguration or the plain stupidity of forgetting the leading slash in an image url.

2) YSlow (Firebug Add-on)

Firebug is so cool that you can even add add-ons to it! YSlow is a Firebug add-on developed by Yahoo that meassures the speed of your website. Use YSlow to figure out what you can improve/optimize or what’s going wrong.

3) Web Developer Toolbar

Web Developer Toolbar is awesome. Is a must-have like Firebug. It has tons of tools inside it, but my favorite’s are:

Ruler: Get the width and height of any element in the website

Line guides: Make horizontal or vertical lines to check if your layout is correctly aligned

Resize: check how the website looks in different screen sizes.

Local HTML + CSS validation (connects with the W3C validation page)

Disable CSS or Javascript

4) Dust me selectors

Have you ever had such an enourmous CSS file with so many changes that you can’t even remember? It’s probable that some selectors you had are not being used anymore. Dust-me selectors checks if any CSS selectors are not being used in your webpage, so you can later delete them

Warning: If you are using a reset code (Eric Meyer’s for example), many selectors will appear unused. Comment these lines on yor CSS file when using the dust-me selectors tool.

5) ColorZilla

ColorZilla is a cool tool to work with colors. You have an eyedropper tool that helps you get any color on any element in the website. Three cools things of ColorZilla:

RGB or HEX colors

Pallete to adjust/correct colors

ZOOM to aim better if the element targeted is too small (like text elements)

*) Extra: ReCSS (CSS Reload Javascript)

I wanted to add to the list a cool and useful Javascript bookmark that let’s us force reload our CSS file withouth reloading the HTML again. This is really great when applying CSS changes on large sites and works with any browser . You can find the bookmark here: ReCSS I want to thank Martín Szyslican, (a friend of mine) that helped me a lot writing this post and selecting the add-ons to include. Well, that’s all for now guys… I hope these tools may come in handy for you! Bye!