12 Essential Extensions for Web Developers & Designers
Firefox is more than a browser. It’s a toolbox, just waiting to be filled with tools.
This is for freelancers who want only the best tools to make their working day easier and more productive.
This first installment contains the top 12 most useful Firefox extensions for freelance web developers and designers.
1. FireFTP
A powerful FPT client in one tab, your work in another. Sometimes the simplest solutions can be profoundly useful. (Note: Does not as yet support SFTP).
2. ColorZilla
This extension allows you to pick colors from the web, paste the hex code into other programs, zoom in on pages, measure distances and utilize a built-in pallet browser. A must-have for any web designer.
3. IE Tab
Shelve the need to open up both Firefox and Internet Explorer to test your work in IE or properly view a website that hasn’t been optimized for Firefox. IE Tab places a small icon in your status bar allowing you to use IE’s rendering engine for a specific site. You can also open a new IE tab via the right-click menu.
4. Firebug
An essential part of the web developer’s toolbox, Firebug allows you to tinker with the undercarriage of your project’s CSS, JavaScript or HTML. You can operate Firebux through a panel or in a separate window. It allows you to identify how each line of code shapes the final product as rendered on the web.
5. Load Time Analyzer
Isolate the loading times of images, stylesheets, page requests, scripts and so on. You can even graph the results — though I’m not really sure why you’d want to…
6. Greasemonkey
Add Javascript to any webpage. Whether you write your own scripts or use scripts provided by other coders, Greasemonkey helps unlock the full potential of any given website. (Note: try it with DOM Inspector.)
7. Web Developer
Another developer essential, Web Developer adds an array of custom tools and menus to Firefox. Use it in tandem with Firebug for maximum functionality and control over your code.
8. View Source Chart
Color codes your HTML to help keep track of hierarchies and nested elements.
9. MeasureIt
Click the ruler icon in your status bar to unlock MeasureIt’s functionality. It allows you to measure the pixel width and height of page elements via the cursor. Yep — no more cumbersome copying and pasting into Photoshop. When you’re done, hit ‘Escape’ and everything returns to normal. A useful, subtle tool.
10. HTML Validator
This nifty extension adds a little validation error and warning display to your status bar which updates as you browse. It can validate both HTML sent by the server and HTML in memory after Ajax execution.
11. Window Resizer
Quickly resize your browser to view websites in 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolutions.
12. Aardvark
As you move your mouse cursor over a page element it will be isolated by a red rectangle. A yellow caption will display the element’s type and class or id (if available). Keyboard shortcuts then allow you to edit or delete the element.
Via Freelanceswitch.com
Add comment December 19th, 2007