In this article we will look at some of the most popular web development tools that helps in your productivity and make task easier and more efficient. These tools help you identify identify various elements of a web page and allows to to edit them, debug them, test and create the final output easier and faster.

CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.

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. Just the way you like it: Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

Inspect and edit HTML: Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live. Tweak CSS to perfection: Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly. and lots more…

Web Developer

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

CSSTidy

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

Yahoo! YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

DOMTool

It’s for either programmers who want to save time not having to write out long DOM structures manually (you can read that as lazy programmers if you want!). Plus it’s also potentially a useful starting point for someone who is not knowledgeable of JavaScript but would like to experiment with inserting HTML into a Document using DOM methods.

When writing this tool I had in mind making it possible to prototype code quickly by taking a snippet from an HTML mock. Obviously for production use the output of this tool would probably need optimising in most cases.

Internet Explorer Developer Toolbar

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages. These features enable you to:
* Explore and modify the document object model (DOM) of a Web page.
* Locate and select specific elements on a Web page through a variety of techniques.
* Selectively disable Internet Explorer settings.
* View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
* Outline tables, table cells, images, or selected tags.
* Validate HTML, CSS, WAI, and RSS web feed links.
* Display image dimensions, file sizes, path information, and alternate (ALT) text.
* Immediately resize the browser window to a new resolution.
* Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
* Display a fully featured design ruler to help accurately align and measure objects on your pages.
* Find the style rules used to set specific style values on an element.
* View the formatted and syntax colored source of HTML and CSS.

DebugBar

* DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
* HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
* Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
* HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
* And many more features: See page cookies, get pixel color on a page, make a page screenshot…

LiveHTTPHeaders

The goal of this project is to adds information about the HTTP headers in two ways:
* First by adding a ‘Headers’ tab in ‘View Page Info’ of a web page.
* Second by adding a tool in the ‘Tools->Web Development’ menu to be able to display http headers in real time (while pages are being downloaded from the Internet.
* Third by letting you edit request headers and replay an URL (beta). Look for the Replay button in the live window!

Web Accessibility Toolbar

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:
* identify components of a web page
* facilitate the use of 3rd party online applications
* simulate user experiences
* provide links to references and additional resources

Pingdom Tools

The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars. You can view the list of objects either in load order or as a hierarchy. The hierarchy view allows you to see which objects are linked to in for example a CSS file. Every test also shows general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.

ColorZilla

ColorZilla is an extension for Mozilla Firefox and the Mozilla Suite. It assists web developers and graphic designers with color related tasks - both basic and advanced.

With ColorZilla 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. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

Share this article!

Share it your friends & colleagues and help us spread it to the World.