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.
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…
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 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.
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.
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.
* 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
* 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…
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
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…
You can contact us at: