TONI ZOVA

If you’re a web designer then you know how bloody annoying and time consuming it can be to do some of the most simple things like tweaking the CSS, editing little typos in your code, measuring stuff and then slipping the figures into your style sheets etc. I mean, we waste so much time doing little bits and bobs that it’s ridiculous, but I, as perfect as I am, don’t waste a second. I use Add-ons to make my life easier while coding and you should too.

I’m going to go through a list of the Add-ons I use and explain what each does, trust me, at first, once you have a good 5-10 or even 15 Add-ons strapped into your browser, you might be a little overwhelmed, but trust me, it’s worth it and you’ll get used to utilizing these extra browser features!

//////////////////////////////////////////////////////

One of my all time favorites is the Firebug Add-on. Quoting them right off the source;

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.

//////////////////////////////////////////////////////

Another great Add-on is the CSS Validator/HTML Validator Add-on.

CSS Validator is a Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file. When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.

//////////////////////////////////////////////////////

For those annal about screen resolution etc, here’s one that will make your day, the Browser Window Resizer add-on. As simple as this add-on is, it’s def a nice help to quick check out your site in dif screen resolution settings.

The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.

/////////////////////////////////////////////////////

Here’s a nifty Add-on for you guys, the CSSViewer Add-on!

With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.

//////////////////////////////////////////////////////

I also suggest you take a look at the JavaScript Debugger, FirePhp and the Palette Grabber Add-ons. There are tons of others so feel free to drop by the FireFox Add-on Archive.

And I know, a short list but I hope this is more of an introductions to FireFox Add-ons for you, really, step out of that plastic bubble ok? Smell the fresh air and see what all the big boys are playing with