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