Firefox is the browser of choice for most web designers. Not only does it display websites the way they should be displayed, but it also gives users the ability to add tons of functionality and customization through add-ons or plugins. Since Web designers spend most of their day working in a browser it makes since to be able to do things like make edits to css without switching to a different application.
If your a Firefox user, but have yet to try any extensions, here are 10 of the most popular among web designers. You should really give them a try. They may just make your life a lot easier.
Firebug
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Web Developer
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. One of my favorite features of this extension is being able to edit css of any web page and see the results in real time.
ColorZilla
ColorZilla assists web developers and graphic designers with color related tasks – both basic and advanced. With it you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.
Codetch
Codetch gives you the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
Window Resizer
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. It supports the 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 resolution sizes.
Pixel Perfect
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Pencil
Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Some of the key features include: multi-page document with background page, on-screen text editing with rich-text supports, and PNG rasterizing.
FireFTP
FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
FireShot
FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.
MeasureIt
MeasureIt allows you to draw out a ruler to get the pixel width and height of any elements on a webpage.
Very nice list. I agree they are very important for every designer and blogger also.
I don’t understand why some people use Window Resizer and MeasureIt with WebDeveloper Toolbar also installed.
WebDeveloper has both of these functionalities included (and personally, I even think they’re better than their stand-alone counterparts)
I have to admit I go “Plugin Crazy” every now and then when it comes to Firefox – but in the end I always end up turning them all off because it slows down Firefox so much.
It also does not help that Firefox is getting heavier and heavier every version 🙁
We need Firefox Lite!
nice! i published a similar article on my blog some days ago, but its kinda new and in german language.
I have to agree with Cosmin. Skip a few addons a use Web Developer properly. Furthermore some of these tools are buil in on Mac OS X, so I gues you guys are PC users 😉
Great plugins!
I had never heard of the measureit, and it is exactly what I need right now.
Thanks!
Marty, word about the increasing weight of Firefox. I have been playing around with the new version of Camino simply because of the difference in speed. I am glad that Firebug is at the top of the list as I have been using it for sometime now and it has been an extremely useful tool. I highly recommend it!
screenGrab is a good alternative to fireshot. It works on Linux too. Colorzilla and Firebug are ace!
thanks for this great post.
this amazing post..thanks
Agree with Cosmin on this. Don’t need Window Resizer when you can do the exact same with the Resize feature of the WebDev Toolbar. Also, props to Cosmin, as I didn’t realize that there was a ruler in the Toolbar as well (never paid much attention to what was in Misc). Guess I can get rid of MeasureIt…Especially because it can be flaky on occasion.
I have already used some of these in Firefox and my favourite is the Alexa add-on. It is great if you are an Alexaholic and like to keep an eye on your website’s Alexa rank.
I don’t use too many at the moment as it slows down the load up time for Firefox on my machine (well, when I increase my RAM I’ll be able to use more).
Will be coming back to this list when I have upgraded my RAM :).
Firebug is always the best tool for me and I really like the Window Resizer you listed here. It helps me test the design in many resolution sizes with ease.
Hi Web Design Ledger!
Maybe you would be interested in checking out Mikogo Firefox add-on. It’s a cross-platform freeware desktop sharing app. It allows a designer to share his/her screen live over the Web with 10 others. We’ve included a great range of features to facilitate the designers’ communication with their clients. You can find more info here: https://www.mikogo.com. Feel free to contact me if you have any questions.
Thanks!
Yi
The Mikogo Team
Twitter: @Mikogo
I would try both https://www.proxynetworks.com and https://www.mikogo.com/. They are similar but different enough that you may prefer one over the other.
Really useful post – unfortunately nothing really new apart from pixel perfect.
THX
Niice! I did not know about window resizer and a few of the others. Good timing. Thank you oodles!
Why not YSlow ? It can be useful to optimize the page.
i find firebug very useful,
even for advanced users.
For screen and file sharing we use RHUB Web Conferencing. It has been great for my organization.