Having the write tools makes night and day difference in the development of your website.  The apps and browser extensions that I’m about to share with you have saved me countless of hours in creating, upgrading, and debugging websites.  * – Denotes extensions I’ve also use in Firefox.

BuiltWith Technology Profiler – This is a great learning tool but useful tool to have.  It tells you what technologies (server information, frameworks, widgets, document information, encoding, etc..) the current webpage that you are on is using.

Eye Dropper – Your browsing around and all of a sudden you’re asking yourself, wow I love that color, what color is it?  Well this tool allows you to click on the color and it will give you the hex and RGB of the color so that you can use it next time you want to build a site.

Firebug Lite for Google Chrome* – A must have, along with Chrome Developer tools (built into Chrome) this extension makes it easier to debug CSS issues and layouts.  For Firefox, this extension is called FireBug and isn’t the “lite” version whatever that means.

IE Tab – A shout out to this extension.  I don’t really use it since I just open up a real IE browser whenever I need to test a website in Internet Explorer.  But this extension apparently would allow you to test out your website to see how it would behave in IE.

JSONView* – I love this tool.  If you’re creating AJAX application and need to look at the JSON handler page, you this extension makes it a ton of a lot easier to view the JSON string.

Page load time – A quick little extension that tells you how long it takes for a page to load.  Great tool to determine if the load time of the site is acceptable and what’s causing the snag.

SEO Quake* – I think this is by far the best and most accurate SEO extension for Chrome & Firefox.  This extension will tell you what the SEO ranking of a website is at the top of the page as well as every single link on a Google search results page.

Web Developer* – I typically use this extension for its ability to clear the site’s cookie or be able to manipulate it.  Great tool when you’re creating a site that uses cookies as well as server side sessions!

Window Resizer – This tool is becoming a new favorite of mine, and yet it is so simplistic in nature.  Basically it tells you how large the current browser window is.  You can drag the browser corner and always know how big the browser is.  You can also select fix sizes as well.  This tool is extremely useful when creating responsive websites as well as testing out how your website would look on tablet and smartphones.

Bonus!  Here are some other useful Extensions to have to improve general productivity.

Adblock Plus (Beta) – Blocks ads, because who has time to watch ads?  And don’t you hate it when the video ad itself is longer than the video itself?

Google Mail Checker – You probably already have a million tabs open, why have another one for Gmail?  With this extensions, you’ll know how many emails are left unread without having another to leave a Gmail tab open because there would be a small icon in the upper right to tell you how many emails you have unopened.

Gestures for Chrome – Mouse gestures, the ultimate productivity technique.  Basically being able to open new tabs and windows, selecting left/right tabs, reloading, etc.. with a gesture of a mouse.  This is the best extension for gestures I found in Chrome, but still not as good as FireGestures for Firefox.

Other tools of the trade applications for web designers and web developers.

Filezilla – FTP program.  Nuff said.  If you know what FTP is, this is what you need.

Adobe Photoshop – The be all and end all for photgraph creation and manipulation.  If you need a free version, Gimp is the closest in terms of capabilities.  Paint.NET is also good too and a lot easier to use for beginners.

Adobe Dreamweaver – Depending on the developer, it may be the be all and end all for website development for ASP, PHP, HTML, CSS, and Javascript.  From its easy to use interface, syntax highlighting and intellisense, to its FTP capabilities, Dreamweaver makes development a lot easier and bearable!  I havn’t seen a really close alternative to Dreamweaver, but in a distance second I would have to say Amaya.  But its a far distance…  Notepad++ is an alternative if you don’t need a WYSIWYG interface and its a lot versatile in that you can use it to code Pyton, Ruby, C++, and a lot of other languages.

Dropbox – If you want to store your files in the clouds or able to keep your files sync’ed on multiple machines so you don’t have to carry a thumb drive with you at all times, I highly recommend Dropbox.  It is simply the best online file storage out there imho.  Compatible with Mac, PCs, and Linux, you’ll get 2GB and up to an additional 18GB if you refer other people to sign up for a total of 20GB at the time of this post.

TrueCrypt – Sometimes you’re asked to work on some highly secretive confidential projects and need to store or send the files.  TrueCrypt is a free open source encryption program that works on both Macs and PCs.  It requires a little bit of work to use it, but the extra steps are highly necessary to keep your files safe.

What are some of your favorite tools that have helped made your web projects easier?  I would love to hear and try them out.