The following is a collection of some useful cost-free tools for web developers.
You wouldn't publish a book without spell-checking it, and you shouldn't publish a webpage without validating it. The following tools will scan your page and give a detailed summary of the errors they find.
The W3C CSS Validator, developed by the same organization that created and standardized the CSS language, is the most used and most reliable CSS validator available. It's a free and open source web-based tool that will scan your CSS source and explain any lexical or syntactic errors it finds.
The W3C CSS Validator checks compliance with the CSS 2 standard by default. At the time of writing, most browsers are targetting the upcoming CSS 2.1 specification. There are some well-supported features of CSS 2.1 that didn't exist in CSS 2, so the W3C CSS Validator may give you errors on those.
On the results page, the validator will often give you a number of warnings even if there are no errors. These warnings do not imply that your page is invalid or even written poorly. They are basically tips for things to be aware of. Most of them deal with the fact that users may customize their default stylesheet, and if they, for example, choose to have a black background and white text by default and your page only specifies a light background color, the page may be unreadable for those users. The validator may recommend that you specify a text color along with your background color to prevent these potential problems.
The W3C HTML Validator, developed by the same organization that standardized the HTML language, is the most used and most reliable HTML validator available. It's a free and open source web-based tool that will scan your HTML or XHTML source and explain any lexical, syntactic, or structural errors it finds.
The W3C HTML Validator is somewhat unusual in that it determines the SGML profile (HTML versus XML) of the page based on the doctype. All major web browsers use the Content-type HTTP header to determine the profile, while the doctype is usually only used for the element/entity sets and doctype switching. What this means is that if you have an XHTML doctype but use the typical Content-type: text/html HTTP header (usually the default), the W3C HTML validator will parse it as XML even though all major web browsers will parse it as regular HTML. Because of this, browsers may see the page as invalid even though the W3C HTML Validator says it's valid. There are a number of other reasons to beware of XHTML in general.
The W3C Link Checker, developed by the same organization that standardized the HTML and HTTP languages, is a free and open source web-based tool that will scan your website and report any broken links it finds, as well as other relevant information. You may specify an arbitrary number of pages deep to check.
Here are some useful web development extensions for the Mozilla Firefox web browser.
ColorZilla is a little tool that sits in your statusbar and offers an eyedropper, color picker, and rudimentary full-page zoom settings. It's useful for quickly grabbing and comparing colors on a webpage. The full-page zoom settings resize the text and images, but backgrounds and other stylistic aspects are left the same.
If you're on Ubuntu and are using Firefox from Ubuntu's repository, ColorZilla won't work right by default. You can either use Firefox from the official Mozilla site or apply this workaround:
/firefox/libxpcom* from the Firefox package to a temporary location./usr/lib/firefox, replacing the files of the same names.Firebug, made by the creator of the DOM Inspector, is a powerful and easy-to-use tool for debugging scripts. It includes three main features: a console which lists errors and allows you to execute any arbitrary JavaScript code at any time in the scope of the webpage itself; a debugger which shows you all of the JavaScript source with errors highlighted; and an inspector which allows you to navigate the page's DOM, element styles, computed layout, and associated events.
The HTML Validator extension uses a local HTML validation tool to validate every page you visit, with the results displayed as an icon in the status bar and with a summary and highlights in the View Source window. This can help you conveniently identify errors in the markup without needing to consult the W3C validator every time. It's available for both Windows and Linux and has a very small performance impact.
Version 0.7.x uses a local install of HTML Tidy as its backend, which is less reliable than the W3C validator. However, as of version 0.8 (still in beta at this time of writing), there is an optional SGML mode that uses the same backend as the W3C validator and produces very accurate results.
The Web Developer extension is a must-have for web developers. It offers over a hundred different tools to help web developers get their work done, all from a convenient and well-organized context menu or toolbar, depending on your preference. Some particularly useful features include: live CSS and HTML editing; options to disable images, scripts, cookies, or a number of other things; view server response headers; a ruler showing the pixel coordinates of the cursor position and selected elements; various outline tools; quick access to a number of validation tools, including for non-public pages; and view generated source to see how the page has been modified by scripts.
Here are some useful web development add-ons for the Internet Explorer web browser.
The Internet Explorer Developer Toolbar, developed by Microsoft, is the closest thing you'll get to Firefox's Web Developer extension and DOM Inspector in Internet Explorer. It was clearly designed to be familiar to people who have used the Web Developer extension, with most of the same features organized in the same way. It doesn't yet offer live CSS and HTML editing, arguably the most useful features in the Web Developer extension, but it does have a DOM inspector (also modeled after the Firefox equivalent) and an eyedrop color picker, though it doesn't yet have a spectrum color picker. The Developer Toolbar is available for Internet Explorer 6 and 7 with no cost. At the time of writing, this add-on is still in beta.
The following tools will help you run Internet Explorer on a Linux desktop.
IEs 4 Linux is perhaps the most convenient tool for running Internet Explorer on Linux. Just run the script and it automatically asks which versions you would like to install (6 SP 1, 5.5, and 5.01, with a rough implementation of 7 currently as a hidden beta option), and it downloads and sets everything up on its own. There is no cost involved in the process.
IEs 4 Linux runs using Wine, a Windows compatibility layer for Linux. Because this is essentially a hack, there are some known issues to keep an eye on. For guaranteed perfect emulation, you should use a virtual machine instead, although IEs 4 Linux is usually much more convenient due to its faster performance.
VMware Server is a free tool that allows you to start up a virtual computer in a desktop window. This way you can test Windows-only programs like Internet Explorer from a Linux desktop, with no need to purchase extra computers. You will, however, need to purchase a copy of Windows to install on each virtual machine you plan to use.
Because this emulates an entire working computer, there is usually a noticeable performance impact. The free VMware Tools package, conveniently available from the menu in VMware Server, helps accelerate basic utilities like the mouse and graphics, but it is still recommended that you use a modern computer and disable any performance-impacting effects in the virtual machine.
Here are some useful web development add-ons for the Opera web browser.
The CSS Editor allows live editing of the page's stylesheets. It also provides some context information about the stylesheets, such as the media types and owner node in the DOM.
The DOM Console is a simple DOM inspector tool offering basic DOM navigation with viewing of attributes, computed styles, properties, and element geometry.
DOM Snapshot displays the webpage's generated source — the source HTML as the browser sees it after any modifications from scripts.
Internet Explorer was not designed to allow multiple versions to be installed at once on a single computer. The following tools will help work around this limitation.
Evolt has a collection of stand-alone packages of Internet Explorer. These are hacked distributions that use special tricks to separate most of the program from the central Internet Explorer installation. There are some significant bugs with this method, such as conditional comments not working correctly. See Fixing Stand-alone versions of Internet Explorer to fix the conditional comment issue.
Microsoft has warned against relying on stand-alone builds because of the bugs involved. For guaranteed perfect emulation, you should use a virtual machine instead, although you may find the stand-alone builds more convenient due to their faster performance.
VMware Server is a free tool that allows you to start up a virtual computer in a desktop window. This way you can test multiple versions of Internet Explorer in their proper configurations, with no need to purchase extra computers. You will, however, need to purchase a copy of Windows to install on each virtual machine you plan to use.
Because this emulates an entire working computer, there is usually a noticeable performance impact. The free VMware Tools package, conveniently available from the menu in VMware Server, helps accelerate basic utilities like the mouse and graphics, but it is still recommended that you use a modern computer and disable any performance-impacting effects in the virtual machine.
Here are the actual language specifications. These are the documents that web browser developers attempt to follow when adding support for these features. They are the result of the collaboration of many web browser developers and other leading figures in Web standards.
Be sure to check the status of a specification before relying on it. A Working Draft (WD) is the earliest stage of development, when the specification may change frequently. Candidate Recommendation (CR) status is the first stage at which browsers should begin working on implementations. The specification then moves on to Proposed Recommendation (PR). Finally, the Recommendation (REC) status is when web developers may begin using it on their webpages.
Browser support information for these specifications is available in the Web browser standards support section.
The following translations were provided by third parties and are not endorsed by this site.