tripwire magazine

No matter how good your website or application looks, how great your content is or how unique your ideas are it wont matter much if you have seriously bad load times or functional errors hiding under the surface. Testing is one of the most important phases in the process of projects of any size involving software development and it should never be underestimated! Users accessing a service or tool on the internet have so many alternative options available with just a single click on the mouse and if something is not working or is too slow they are gone for good…  Testing involves many IT disciplines and of cause depending on the deliverables it typically will involve: functional tests (does it do what the business required), unit testing of code, usability testing and standard conformance validation of front ends, security tests, performance tests and so on… Large projects use a set of tools that most freelancers and smaller companies can’t afford (fx. HP Quality Center or HP LoadRunner) and in most cases they would not fit the purpose anyway. There no one tool for all of the necessary tests but even as a freelancer with a very limited budget there is hope. This post provides a list of more than 40 tools and services that will help you clean out most of the bugs in your web projects. Good for you and your users! What tools are you using already?

Website Performance Checkers

Load Impact

Can your site handle being on the front page of digg? Load Impact is a free tool which tests your site at different load levels and then displays your results in an easy to understand graph. Careful this tool has powerful load generators and may take your site out of business if used unwisely! Load Impact also offers a paid service with more features if you need it!

Pingdom Tools

Pingdom 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 and then displays how long each of those elements took to load using nice visual time bars. This can be very useful when you are trying to improve the efficiency of your site.

YSlow

Use YSlow for Firefox to analyse your template complexity, size and load time from a realistic client. The load time and size can be found in the lower right corner. The Yslow Grade will be covered later in this post but is worth investigating!

Web Page Analyzer
Analyze the page size, download time , page speed and many other things of your website. This is really a great tool that give you a lot of input on what can be optimized.

On-line speed test tool

Very simple test of your website reponse time and response size.

Cross Browser Testing

spoon

Tool for checking your website in different browsers. Xenocode Browsers allow you to lauch IE6, IE7, IE8, Firefox 2, Firefox 3, Google Chrome and Opera directly from the web. The only weak point: The service isn’t available for Macs and GNU/Linux powered PCs.

Browsershots
Check the appearance of your website in different browsers and in different resolutions.

BrowserShots is a free open source service that allows you to make screenshots of any web page available on the Internet (be aware that robots.txt can prevent this service). Most browser types (Firefox, Opera, IE and Safari, Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey etc.) in relevant versions is available and you can also choose between the following Operating System: Linux, Windows, Mac OS and BSD.

You can adjust the width of the screen size (640 – 1600), color depth (8 – 32 bits per pixel) as well as the JavaScript-, Java- and Flash-support. BrowserShots rely on distributed computers that are run by volunteers and the most popular Browsers may be quite busy and it this means that getting your screenshot may take some time. As screenshots become ready they will be available for viewing individually or for download of the full package.

Crossbrowsertesting (free/commerical)

CrossBrowserTesting.com allows website designers to test the cross browser compatibility of their website across different browsers and operating systems. CrossBrowserTesting.com is a commercial service where users buy credits giveng 5 min usage each. Anyone can register and use the service for for free but the free service has a 5 min max length.

CrossBrowserTesting.com lets you log on to a remote session and take control of a operating system with a range of Browsers installed. This gives you the option to test your AJAX and Javascript as well as the layout.

BrowserCamp

BrowserCamp allows you to test the compatibility of your design with Mac OS X browsers. You can quickly enter the URL that you want to test and get a full length screen shot at several different screen widths. Additionally, for full testing you can pay $3 for a two-day subscription, or $99 for a one-year subscription, with a few options in between.

IE Tester (free)

IE Tester from DebugBar s a free web browser that allows you to have the rendering and JavaScript engines of IE8 RC1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

IE Web Renderer (free)

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 8 RC1, 7, 6 or 5.5. The Mixed- and Difference-Views instantly display the differences in site presentation (IE6 vs. IE7) overlaying both screenshots upon each other. This is a nice feature if you need hist for what to needs to be optimized. It is interesting that the service gives access to test IE 8 RC1 as it will allow you to test if your website is likely to be presented correctly in this upcomming browser.

Browsercam

Browsercam, probably the most featurerich screen capture services available. It even offers an extensive browser remote control service giving you access to check javascripts, DHTML, forms and other dynamic functionality on any platform. The number of available browsers, versions and operating systems is permanently growing. 90+ browsers, Linux, Win, Mac and even the presentation in different versions of browsers on mobile devices (BlackBerry, Win Mobile) can be tested. You can also adjust the screen resolution (640×480, 800×600, 1024×768), set up the access to password protected sites and download all screenshots in a .zip-archive.

The service offers everything you might ever need. Browsercam if not free but it has different price plans; the price varies bettween 20 and 1000$ per month. There is also a 24 hours free test evaluation which requires the registration on Browsercam.

Litmus

Litmus provides testing on all major browsers and also produces bug reporting to help you identify and correct any errors. Once the testing is complete you can produce a compatibility report to share with clients. In addition to website testing, Litmus also offers testing of HTML emails in all major email clients, and also runs your messages through spam filters and identifies any problems so you can get more of your messages read.

Validation Tools

Site Check

Enter a URL and it runs HTML and stylesheet validators, accessibility assessment, link check, load time check, and more using free online web test tools.

W3C MarkUp Validator
All documents that are in HTML,XHTML, SMIL, MathML, etc format go through their markup validation through this check. The validator look up for any code that is not complying the rules set by W3C and report it to the user. I was chocked that google.com has so many errors?

W3C CSS Validator
This validator will validate the site you type in and show you the validation errors in HTML with CSS or in CSS only.

W3C Links Validator
This validation service helps you to check the anchors or links of web pages and gives you a list of any dead links.

MobileOK Checker
Check the level of mobile friendliness of your website or a particular web page.

W3C Universal Conformance Checker
W3C universal error checker. It gives you a brief description of the errors running in your website and also .

W3C RSS Feed Validator
This is a service to check the syntax of the Atoms or RSS feeds.

WDG HTML Validator
The WDG HTML validator checks through your web pages for errors so as to make them more accessible.

Accessibility & Evaluation Tools

Web Accessibility Inspector

Web Accessibility Inspector examines the accessibility of a website and points out any important problem that affects mainly the elderly and visually disabled people. With the addition of the Chinese and Korean versions, the software will serve in many countries around the world.

Section 508 Web Accessibility Checker

Find out if your website is following section 508 standard or not. Section 508 is a US Law with the purpose to provide access to and use of Federal executive agencies’ electronic and information technology (EIT) by individuals with disabilities.

Adobe PDF conversion
Convert your PDF files which are in any European Language to text or HTML.

IBM aDesigner
A disability simulator that helps Web designers ensure that their pages are accessible and usable by the visually impaired.

ColorDoctor
ColorDoctor is software for Windows that simulates the display content according to grayscale and color characteristics.

WebAIM Wave
This is a great visual tool for improving accessibility! Instead of generating reports on errors it shows you the error spots on your webpage.

Functional Accessibility Evaluator
It evaluates the smooth functionality of your web page.

WebXM
Use this Online Risk Management tool to check the accessibility, quality, privacy, security, brand and compliance issues across corporate web properties

Colour Blindness Simulator
See the difference in the display of colors to your users affected with color blindness.

Colour Contrast Analyser
Use W3C Colour Contrast algorithm and check the contrast between colors.

Accessibility-Checker
This is an accessibility checker and it checks the conformance of the web pages according to the accessibility standards.

Access Color
This checks the color contrast and brightness for the website and makes sure that the people with visual impairment also access the website with same ease.

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Functional Testing

JSUnit

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. Test online

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. This is probably one of the most widely used web developer tools out there. If you don’t have it, get it now!

MeasureIt

A great Firefox plugin that lets you draw out a ruler to get the pixel width and height of any elements on a webpage.

Web Developer Toolbar

An extremely useful Firefox plugin which provides many tools which web developers use on a daily basis. Great for quickly validating your XHTML or inspecting HTTP header information.

Badboy

Provides an enhanced browser interface to aid in building and testing dynamic applications. Combines capture/replay ability with performance testing and diagnostic features to allow developers to closely monitor and understand the interactions between the browser and the server. Free for small users.

SimpleTest

It is a PHP unit test and web test framework. Users of JUnit will be familiar with most of the interface. The JWebUnit style functionality is more complete now. It has support for SSL, forms, frames, proxies and basic authentication. The idea is that common but fiddly PHP tasks, such as logging into a site, can be tested easily.

actiWATE

Freeware web application testing environment. actiWATE Framework is written in Java and Java is used for writing tests.

Canoo WebTest

Canoo WebTest is a free open source tool for testing of web applications. It calls pages and verifies the results, giving comprehensive reports on success and failure.

Looking for more?

Check this resource listing hundreds of test tools.

Related posts

1. Business Tools for Improving Freelancer Efficiency I have already posted a few lists of Freelancer...
2. Essential tools for optimizing you website appearance What your visitors see when they visit your web pages...
3. 35 Extremely Useful Free Online Tools for Web Developers and Designer Creating Web Sites is not a simple task at...
4. 30 Essential Tools for Web Designers For designers nothing can be more handy than effective...
5. 30+ Essential Freelancer Tools for Expense Tracking, Billing and Invoicing Recently I posted a list of Freelancer Tools for...

Please remember to share this post!