20 Useful Tools to Make Web Development More Efficient

May 14 2008 by Jacob Gube | 103 Comments

There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.

1. CSS Grid Builder

CSS Grid Builder - Screenshot

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press "Show Code" and it generates the HTML for you.

You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.

2. CSS Sprite Generator

CSS Sprite Generator - Screen shot

Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.

CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.

3. Blueprint: A CSS Framework

Blueprint - Screenshot

Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.

4. CSSTidy

CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy. Check out the "before and after" examples to get a feel for how CSSTidy works.

5. logicss: CSS Framework

logicss - screenshot

logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.

6. ___layouts

layouts - screenshot

___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser. Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.

7. Clean AJAX

Clean AJAX - screenshot

Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.

8. Sajax

Sajax (which stands for "Simple Ajax Toolkit") is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums – so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.

9. DOMTool

Domtool

DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.

10. JavaScript Code Improver

JavaScript Code Improver

JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.

11. JSUnit

JSUnit - Screenshot

JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems.

12. Test plugin for JavaScriptMVC

Test plugin - Screenshot

The Test plugin for JavaScriptMVC is another excellent JavaScript testing framework to help make development speedier. It was created with the concept of "JavaScript testing sucks… so we want to make it easier" in mind. The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.

13. Venkman: JavaScript Debugger

Venkman - Screenshot

Venkman is a JavaScript debugging environment for Firefox 2, Netscape, and Seamonkey. It gives you a GUI for stepping through JavaScript code and setting break points. It also comes with a command-line interface built in. Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.

14. Firebug

Firebug - Screenshot

Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.

You can quickly hunt down CSS, HTML, JavaScript, and XML errors through Firebug, and it even allows you to filter and search for specific errors. Another handy feature is the DOM inspector pane which outlines a web page’s structure; very handy if you’re working on a big website or an open-source application that you’ve recently gotten involved with. It’s an awesome tool though I find that disabling Firebug when I’m not using it is helpful in speeding up normal browsing (such accessing Gmail, for example).

15. Web Developer extension for Firefox

Web Developer extension - Screenshot

Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.

16. Internet Explorer Developer Toolbar

IE Explorer Developer Toolbar - Screenshot

Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.

17. Yahoo! Design Pattern Library

Yahoo! Design Pattern Library Screenshot

The Yahoo! Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.

18. Test Everything

Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more – all in one location.

19. Pingdom Tools

Pingdom Tools

Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.

20. Aptana Studio Community Edition

Aptana Studio Community Edition

Aptana Studio is an integrated development environment (IDE) designed for Ajax-based applications. It has JavaScript debugging, an Ajax and JavaScript library that includes some popular frameworks (such as the Dojo Toolkit) syntax colorizing, HTML/CSS/JavaScript code assistance (auto-complete and tool tips) and much more. It makes Ajax development simpler and gives the developer time-saving ways of organizing and managing multiple projects.

Some more tools

  • Google Web Toolkit: write high-performance Ajax applications quickly using Java and the compiled output is highly-optimized JavaScript files.
  • Cuzillion: quickly construct web pages to see how page objects interact so that you may explore techniques on how to improve web page performance.
  • CSSFly: edit web pages on-the-fly through a web browser. Helpful in debugging and testing a web page.
  • AppJet: a web-based solution that allows you to create a functional web application or widget through a GUI.
  • Google Sitemap Generator: Quickly generate a sitemap file based on the Sitemap XML protocol without you having to write it yourself.

Some related articles

I hope you’ve enjoyed this collection of tools and that you’ve found one or two that you’d like to try out. Got a tool that’s saved you a lot of time that wasn’t listed here? Share it with us in the comments.

103 Comments

Amit Singh

May 14th, 2008

i always get something useful from your list, this time it was JavaScript Code Improver.

I have have found 960.gs a useful css framework for grid layouts

Dave

May 15th, 2008

Great list, and well timed – I’ve been looking for something to do JavaScript testing.

I would add the HTML Validator extension for Firefox – I’ve found that it makes producing standards compliant code much easier.

Dave

May 15th, 2008

I found a very handy program from Smile Lemon called Website Layout Maker. You can create a beautiful CSS layout in seconds. I then bring it into Dreamweaver for the heavy duty stuff.

Shaun

May 15th, 2008

A fantastic list – I love having all the great resources in one place.

You might want to add http://psd2cssonline.com as well. Makes creating XHTML/CSS pages from Photoshop files really quick and easy.

Television Spy

May 15th, 2008

Wow this will come in very useful.

Thiago Prado

May 15th, 2008

By far the best tools ever!!!

techprophet

May 15th, 2008

Ooh! Look! Aptana is based on eclipse (www.eclipse.org). Nice list BTW *rushes off to see if there is an Aptana plugin for Eclipse*

Daniel

May 15th, 2008

A great set of tools. I think you missed a big one though, YSlow. Which measures the performance of your website and hence makes it more efficient.

jdzzle

May 15th, 2008

the web developer plug-ins are a must have and firebug is just awesome

Jesse

May 15th, 2008

Why use the HTML Validator Extension when you have the Web Development Toolbar and you can just check it with that, no need to have redundant tools.

Aron Hausler

May 15th, 2008

Fantastic resource…thank you :)

Ed Eliot

May 15th, 2008

Hi Jacob,

Thanks for mentioning the CSS Sprite Generator which Stuart Colville and I wrote. You’ve actually linked to a copy of the tool which someone else has set up (the source is available under a FreeBSD license) rather than our official one which is available at http://spritegen.website-performance.org/.

I’d be really grateful if you could update your link so as to avoid confusion for visitors to this post.

Many thanks,

Ed

PC

May 15th, 2008

Is there any good alternative to CSS Sprites Generator?

I’ve used it recently, but its still very alpha/beta. It has issues with transparency and generates grainy images. I tried other options, but it’s the best I’ve seen so far.

Joshua

May 15th, 2008

Thanks Jacob,
I love “list” posts because you’ll always find one or two entries you were not aware of. Have subscribed to your feed, keep up the good work.

yoshi

May 15th, 2008

can you make it 21 add mootools

Evan

May 15th, 2008

Firebug will get 10% of my first million. It helps SO much.

Jericho

May 15th, 2008

I also would like to mention Opera’s Dragonfly Develop Tool which works the same as Firefox’s Web Developer and Firebug or IE’s Developer Toolbar…

CommerceStyle

May 15th, 2008

These are very nice tips.

Thanks

TechLads

May 16th, 2008

nice list buddy.i liked sprint maker and bluesprint :)

keep doing this.

Adrian

May 16th, 2008

Fantastic. Thanks!

Ed Eliot

May 16th, 2008

Jacob, thanks for updating.

PC – If you can email me some examples of images that appear grainy when combined I’ll take a look and see if I can find out what the issue is. Would also be good to hear what issues you’re having with transparency.

suryaprakash

May 16th, 2008

nice.Thanks for sharing

Devroede Jeroen

May 16th, 2008

Since most browsing users in the world unfortunately still use IE (and anything between IE5 and IE7) – the following free tool is also a must for web developers: Multiple IE allows to install from IE4 up to IE7 in parallel on the same desktop. Small installer, 27Mb, get it here: http://tredosoft.com/Multiple_IE

Garet Gamache

May 16th, 2008

I find xampp, particularly xampplite, is extremely overlooked. Great for testing projects across multiple sytems with varying degree of server dependence. Two or three clicks and you have a working php/mysql server without installation and minimal config settings.

Ankur Patwa

May 16th, 2008

Good list. Thanks.

ian

May 16th, 2008

I wouldn’t recommend Venkman anymore.
I used to use it all the time but now it just seems old, tired and buggy.

You can do anything in firebug now that you could do in venkman anyway.

Make sure you get the latest version of firebug though from it’s webpage. Also take a look at firebug light for other browsers.

SomeImagination

May 16th, 2008

imo CSS frameworks are only useful to utterly lazy developers, I mean who in their right mind would use that logicss auto grid builder thing for anything?

Eric Ferraiuolo

May 16th, 2008

What web-developer hasn’t see all the tools on this list before? Seem pretty standard to me; used most of them, have heard of all of them before in passing.

wicked

May 16th, 2008

debugbar is another good webdevelopment tool for ie
http://www.debugbar.com/

Ian Smith

May 16th, 2008

You should check out taffydb (http://taffydb.com). It can add some powerful tools to working in JavaScript and with Ajax requests.

Stephen Waits

May 16th, 2008

Check out Opera 9.50b2 (or newer snapshots). The new developer tools are incredibly slick.

pening

May 16th, 2008

Web designer Widgets for opera browser:
1. True HTML Editor
2. CSS Help

Justin Meyer

May 17th, 2008

Thanks for including JavaScriptMVC’s test plugin. People also might be interested in include which lets you easily load and compress their JavaScript files (http://javascriptmvc.com/learningcenter/include/index.html).

Bart

May 17th, 2008

Is there a decent Javascript debugger/profiler for Opera?

Recently, I’ve been working on code for HTML cleanup, that works slick on Firefox and MSIE: parsing a whole webpage takes about 50-60 milliseconds. That’s virtually instant.

Running the same code on Opera 9.x, it takes a noticeable time. Even for a short piece of a few lines, I’m estimating the execution time at between 1/2 and 1 second.

I had not expected Opera to be so slow, so I’m thinking that it’s probably *some* actions that are wasting time. Now I’m hoping for a profiler, as in Firebug in Firefox, to give me a quick clue as to what is causing the slowness.

Any recommendations?

Jennifer Baxt

May 19th, 2008

Thanks for the tools. My webmaster said he used a few of these and he especially likes the IE developer toolbar.

John Nicely

May 19th, 2008

Another great one that you forgot or don’t know about (and will appreciate now that you do): MultipleIEs. It allows you to install IE 3.0, 4.01, 5.01, 5.5, and 6.0 all on one computer simultaneously. Very convenient for testing multiple version of Internet Explorer to make sure they work with your code/design. Obviously one shouldn’t give a damn about 3.0 or 4.0, but a small portion of people still use 5.5 and 5.01.

available online at http://tredosoft.com/Multiple_IE

John Nicely

May 19th, 2008

Whoops. Didn’t refresh before posting that comment :)

Mika

May 21st, 2008

CSSViewer as Firefox Extension is very useful for me atleast

Sporkman

May 22nd, 2008

Nice list, thanks!

adevv

May 23rd, 2008

Does anybody know any list of useful Opera add-ons for web developers? There are a lot of Mozilla’s but it seems so hard to find Opera’s? :(

Mobiles

May 24th, 2008

Great collection of web tools, I like most Blueprint: A CSS Framework web tool

arngur

May 25th, 2008

Thanks for the collection.
For folks like me who have not been paying close attention to progress in user interface technologies this is a precious list – thanks!

Quick question about more generic sprite concept implementation. Enhancing image aggregations by css equivalents is a good step forward.
To take it to the next level, have anyone already made it possible to aggregate any static resource from many small to a few larger files? For such an implementation .css or images will just be usage examples.

Don’t know if Sprite can already dynamically create the aggregations, but it should be useful and help make it more transparent to use.

An interesting but trickier aggregation could have been if dynamically generated pages would be able to be broken down to their static sub-parts to be then aggregated in similar fashion.

Thanks!

Computerden

May 28th, 2008

anything that can help speed up development is a good thing

zuborg

June 3rd, 2008

Nice list.
But http://site-perf.com/ looks like more realistic tool than pingdom.com

Office Rat :)

June 4th, 2008

I don’t think that most of the agencies do this

Hitesh

June 11th, 2008

Javascript Code improver takes the comments out of the code. not good as it takes the code out of it.

Liam

June 17th, 2008

I like dbQwikSite. http://www.dbQwikSite.com
A web code generator for database sites. Cuts coding time down and does a good job.

Aggie Jane

June 29th, 2008

Thanks a lot.

BigW

July 1st, 2008

Excellent list. I’ve added a few more tools to my arsenal.

John Simons

July 16th, 2008

This is a new product I just make public, it’s a tool for converting Word docs to HTML. Simply upload your Word document and adjust the setting to get exactly the HTML you need. Very handy, once the bugs are worked out it definitely belongs on this list. http://manglebracket.com

Krishna

August 4th, 2008

Great Collection for web developers, I will surely put the link on my site.

Kiran

August 12th, 2008

Very useful for any web developer.

Neo

August 22nd, 2008

Great list!
JavaScript Code Improver seems to be cool thanks.

RockyMtnHi

August 27th, 2008

Thanks for the list.

I see it was mentioned before, but this is still worth noting. The Yahoo YSlow for Firefox that works in conjunction with Firebug is a great tool for troubleshooting slow page load times. It is associated with the book “High Performance Websites, Essential Knowlwdge for Front-End Engineers” by Steve Souders and published by O’Reilly.

I have taken page loads from 12 seconds to 1. Concepts are critical to all web designers.

RockyMtnHi

October 7th, 2008

Can you tell me what tool you used to create the screenshots on this page? They are consistent in size and format and look great.
Thanks

Publicidad Gratis

November 4th, 2008

Jave debugger works great!

Regards…

Gazikent

November 11th, 2008

Good list. Thanks.

bugzlife

December 10th, 2008

very informative post. i just use notepad, colorpad, and photoshop though. :p

Webdesi3

December 29th, 2008

Great information! Thank you

partoba

January 3rd, 2009

This is an awesome list of tools. Great works and indeed useful. Thanks

unique pet products

January 21st, 2009

can’t live without firebug. It’s great and fast for troubleshooting a website.

Rilwis

January 30th, 2009

Thanks for greate list. These tools are very beautiful :)

Videolu Dersler

April 24th, 2009

Great list!
JavaScript Code Improver seems to be cool thanks.

Steve

May 12th, 2009

Check out our free application that allows you to add Flash to an existing web site – sort of a GUI for swfObject but much more:

http://enhanceusergroup.ning.com/page/free-enhancerelated-file

web developer

June 1st, 2009

I’m loving the css sprite generator. Great time saver.

Biber Hapı

September 6th, 2009

Great list!
JavaScript Code Improver seems to be cool thanks

Paramount

September 19th, 2009

Great list. Thank you for sharing. Will definately speed up the design process.

ArunPheo

October 20th, 2009

Thanks you list is great but I think you forgot j-query javascript library

pornoizle

November 30th, 2009

ist is great but I think you forgot j-query javascript library

Power Juicer

December 23rd, 2009

Firebug is a very important tool

Arrow SEO

January 17th, 2010

Wow. Great set of tools to look out for. I need to take it all in for my next web development project. Thanks!

tihomir

January 28th, 2010

Thanks, Very helpful list of tools! I’d suggest you a tool that reduce code size: http://bit.ly/aykrpt

TG

January 31st, 2010

Another tool: http://jsonviewer.stack.hu/
I think useful. :)

Hammad

March 24th, 2010

Very good list, it’s has gone in my bookmarks now, however couple of items are repeating to debug JS code. But again it is vital for a web developer to test their code on both Firefox and Internet Explorer.
This article is useful if you know one of them and want to learn the other: http://ciitronian.com/blog/programming/tutorial-using-ie-developer-tools-as-firebug-in-mozilla-firefox/

Web Developer

April 5th, 2010

nice list, awesome

Khachatur

April 21st, 2010

I want to suggest one more tool.
If you need to debug communication between your browser and the web server then the HTTP Debugger Pro can do a good job for you.

Paris

April 24th, 2010

Woah! Awesome. I really like JS Code Improver

Andy

May 19th, 2010

Thanks Jacob, Great list. I “dugg” it for you!

argent

July 21st, 2010

nice list, awesome

Tyson

September 7th, 2010

Firebug for life!

Thanks for the list

Eye Bridge

October 25th, 2010

Thank you very much for sharing tips. Keep posting.

carl

December 1st, 2010

I found a website http://www.webdevelopertools.biz its good for all kind of development tools , does anyone else know of any good websites for developer help , thanks

bhavesh

January 26th, 2011

hello friends, i want to develop a website can anyone tell me the tools and the best scripting language if possible can i also get the links for the same. i have installed dreamviewer but i am not able to work on it. any books with which i can use it for scripting it. thank you

rahil

January 27th, 2011

thanks very much……

very useful tips…..

ewan

March 7th, 2011

Great list.. thanks for your efforts… would be great to update at some stage in 2011

Dan-el

March 20th, 2011

Great collection!
I see you’ve also mentioned Google Web Toolkit (GWT), there’s a similar tool for C# developers called SharpKit.
SharpKit is a C# to JavaScript converter during compilation. Makes client-side code development much easier! :-)

imran

April 16th, 2011

Why use the HTML Validator Extension when you have the Web Development Toolbar and you can just check it with that, no need to have redundant tools.
Plz sent c& c++ code
i forget most use code
[email removed for privacy]

laxmikant

May 17th, 2011

thank you so much……

jack hooper

May 18th, 2011

I am just started to learn PHP, HTML. This article is helpful for me.

Amy

May 22nd, 2011

OMG!
This list is the best I came across, thank you for sharing it.
CleaanAjax is my favourite.

Mick Davies

June 28th, 2011

Nice list of resources guys! I consider myself new to website design (graduated in 2009) and I do wonder what web developers did before Firebug! That is easily my favorite tool for developing online, closely matched with jquery library for effects/forms.

Cheers Mick

Vinay

July 14th, 2011

Thanx a lot…It’s very useful..

pressmo admin

July 17th, 2011

Is aptana open source?
Good list, I’m using at least 5 of it. I’d like to recommend Pressmo.com – for preparing more user friendly version of PDF of DOC files.

1Mike

July 23rd, 2011

Wow, great article even several years later. I know our people love fire bug. And not to repeat but what tool did you use for the screen shots?

stidged

August 2nd, 2011

there is actually a cool tool called Snippet Bin. This speeds up your coding a LOT!! It would be a great addition to this list

Razibul Hassan

August 6th, 2011

CSS Grid Builder is really a time saver. The generated HTML code is easy to use and the CSS is linked from the yahoo!

George Brountzas

September 4th, 2011

Nice article! I would also recommend notepad++ for coding

Akif Shamim

September 7th, 2011

i found all these useful ! thank you

Irina

September 26th, 2011

Wow great article, thanks!
I’d add browserlab https://browserlab.adobe.com/en-us/index.html# as a great tool to test how the site will render on the different browsers. Can’t check functionality though..
And IE tester http://www.my-debugbar.com/wiki/IETester/HomePage (rendering and javascript, for windows only)

Alberto Gasparin

November 24th, 2011

I would add a tool to simulate real-word connections even if you are developing on your local server: http://slowyapp.com/
Used in conjunction with PageSpeed or YSlow can help you improve your website behavior on crappy connections.

James

December 11th, 2011

It would be great to get an updated list, maybe for 2012. Whilst many of these tools are still excellent, eg Firebug there are a few that are probably not used so much anymore…

Sergey Vlasov

June 20th, 2013

Another time saving tool for rapid web application development similar to dbQwikSite is PHP Generator for MySQL http://www.sqlmaestro.com/products/mysql/phpgenerator/

Leave a Comment

Subscribe to the comments on this article.