Hi again readers! How are you doing? I hope you are doing fine :) I’m great by the way! Lot’s of work though… sorry again for not writing in a while.
Today I have a cool list of 5 Firefox add-ons for you! These add-ons are my everyday co-workers. If I were Santa, these would definetely be my little elfs. These add-ons make my job 10 times easier. Let’s check them out:

1) Firebug

firebug-logo

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.

Install: Firebug

2) YSlow (Firebug Add-on)

yslow

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.

Install YSlow

3) Web Developer Toolbar

webdeveloper

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

Install Web Developer Toolbar

4) Dust me selectors

dustme

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.

Install Dust-me Selectors

5) ColorZilla

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)

Install ColorZilla

*) 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!