7 Killer Web Development Tools

As tools find their way into your routine it becomes easy to forget they’re there – the best tools, in fact, are so usable that you don’t notice them at all.

We develop websites on a daily basis, and over the years we’ve picked up a bag of tools that are second nature to us now.

Our hope is that you’ll find one or two tools in this list that will find a good home in your repertoire.

1) Firebug

Firebug is a Firefox add-on.  We started using Firebug in late ’08, and since then we’ve literally used it on a daily basis.  Some of the features of this kick-ass tool:

• Color-coded HTML for easy visual browsing
• Highlight effects on elements in the browser window as you mouse over them in the code. This alone saves us loads of time when troubleshooting CSS and other issues.
• The “Inspect Element” feature when right-clicking on anything in the browser window jumps you right to the corresponding HTML code where you can view/edit the HTML and the CSS rules that apply to the element.  It also shows you which CSS rules have been overwritten by the “cascade effect” via the strikethrough visual indicator.
• The ability to browse the Document Object Model (DOM) - if you’re doing any JavaScript programming/troubleshooting this is very handy.
• Visual aids (guides and rulers) for troubleshooting CSS – not only does Firebug color-shade the padding and margins of elements, but handy guides automatically appear so you can see just how far off your alignment is for two elements.
• Firebug does a lot more than this and the applications are virtually limitless – it’s like X-ray glasses for web developers.

Just go download/install it – you won’t regret it.

2) Web Developer Toolbar

The Web Developer Toolbar, a Firefox add-on from Chris Pederick, is a classic – in web age, anything that is more than two years old and is still widely used and relevant is an official “classic.”  The toolbar is loaded with features that allow you to:

• Browse with/without images, JavaScript and CSS
• View/delete cookie data
• Disable meta redirects
• Add user style sheets
• Quickly determine if your page code is valid – and, if not, where the errors are
• Tons more (too many features to list)

This is another one you should just go and download right now – it’s a no-brainer.

3) User Agent Switcher

Another Firefox add-on from Chris Pederick – the User Agent Switcher does what it sounds like – it allows you to switch your user agent when browsing.  Why would you want to do that?  Here are a few reasons:

• When developing for mobile devices (such as the iPhone) testing becomes tedious – with the user agent switcher you can add user agents (including the iPhone agent) and browse as if.  Here’s a page on adding the iPhone agent to the User Agent Switcher list.
• You can also add Googlebot to the agent list – this is a powerful and relatively straightforward way to spy on black hat cloaking methods.  Or, if you’re black hat yourself, this allows you to test your cloaking pretty quickly/easily.  This post from Ann Smarty at SearchEngineJournal.com explains how to add the Googlebot user agent and use a header detector tool to view cloaking methods.

Note: Carlos del Rio from User Driver Change (you should pick up the book) dropped by and let us know that some websites employ a script that temporarily bans you from their site if they detect you’re browsing with User Agent Switcher – so use at your own risk.

4) Xenu

Settle down – the alien at right is not real, and this link has nothing to do with Tom Cruise or Scientology. 

Xenu is actually a nifty tool that quickly crawls all of the links on a website and collects information on them.  This is a great way to find broken links on your site and saves you the time of manually reviewing them.

There are a ton of other applications for Xenu, and rather than attempt to catalog them here it’s probably a better idea to simply link over to Ann Smarty once again at SearchEngineJournal.com and her post, “7  Things You Can Do With Xenu Link Sleuth.”  Yes, Ann knows her tools.

5) WordPress + Thesis

OK, maybe calling this platform a “tool” is a stretch, but when it comes to saving time putting together clean and effective websites there is nothing better in our experience.  Our site runs on WordPress and Thesis.

We knew we wanted to build our site on the WordPress for various reasons – the ease of adding content/pages once the platform is designed and functional among them.

When Chris Pearson and Brian Clark of Copyblogger.com (which also runs on Thesis) released Thesis in 2008 it drew a lot of buzz – and with good reason.

Thesis looks great “out of the box”, and the flexibility it allows you to customize your design with ease in unparalleled.  It has a ton of other features that make it, in our opinion, simply the best WordPress theme available.

If you’re shopping around for blog/website platforms Thesis should be at the top of your list.  You can purchase a Thesis license and download the files by following our affiliate link here: Thesis Theme for WordPress.

6) Blueprint

Blueprint is a CSS framework that saves tons of development time.  If you’re building a site from scratch (rather than using something like Thesis as your platform) this is a must-have.

It literally saves us hours on development projects and overall just makes our coding lives easier.

7) Splashup

Splashup is a free web-based photo editing application that basically can replace Photoshop for some lighter applications.

This is a handy tool when you’re traveling and need to fix an image on the fly.

You can even use Splashup to create some nifty graphics.  I just created the graphic above in about two minutes using Splashup. I know, I know – my design skills are breathtaking.

What are some tools you use on a daily basis to make your development work easier and more efficient?  Let us know in the comments.