Browser Testing Tools

Blog post image

There are lots of browsers in existence today.  Some are very popular, some are rarely used. Many of the popular browsers strictly follow the standards set by the World Wide Web Consortium (W3C), but there are quite a few that don’t.  It is our job, as web designers and developers, to make sure that the websites we make function correctly and look consistently across a multitude of browsers regardless whether they follow or don’t follow the web standards.

So we’ll be looking at some tools which will make the testing and debugging easier (Note: Primarily for Microsoft Windows).  This list is by no means a Top 10 or anything like that these are just some of the tools I wanted to share with you that I use every day for my work which make my life much easier as a web developer.

I’m sure “Internet Explorer” (IE) by Microsoft is known to almost everyone who uses a PC, and probably known by most Macintosh users as well.  Not only this browser has 3 widely used versions today (IE6, IE7, IE8), all the different versions interpret the web standards in their own way, with IE6 being the worst offender, and IE8 being the least problematic.  So a website which was fully tested on IE8 doesn’t necessarily look right and function well on IE7 and IE6.  But you can only install one version of the IE browser on your PC.  So testing all the different versions is a little bit troublesome if you don’t have the right tools.

This brings us to our first tool called IETester.  This is a browser which has 4 built in versions of IE: IE5.5, IE6, IE7 and IE8.  Also IETester comes with a DebugBar which you can use to inspect various elements on the page.  Although it’s not as good as similar Firefox extensions available, it’s certainly better than going purely by “View Source” when it comes to debugging IE issues.  It also has few bits of extra functionality on top of giving you access to all IE browsers, such as a simple button for disabling the caching, disabling JavaScript, disabling images and more so you can do so much more on it rather than just debugging IE, however I think there’s better tools available for those jobs.

This brings us to the next tool called the Web Developer Toolbar, currently only available for Firefox and Chrome browsers. Probably most web designers and developers are familiar with this tool as it’s very popular. This toolbar gives you access to various tools and added functionalities for your browser to make life easier as a web designer/developer. There are too many functionalities to go through on Web Developer Toolbar, however the core functionalities include:

–          A quick overview of Errors, Warnings and Information regarding the webpage

–          Option to disable/view/manipulate various elements on the page on the fly such as JavaScript, media, CSS, forms, cookies

–          Various visual guides to help with designing/theming the website such as visual guide rulers, grids, outlines.

–          Quick CSS/Feed/Markup/Link/Accessibility validation shortcuts

This toolbar really does bring almost all functionality that a web developer/designer would need to fully test modern websites.

However a web developer’s arsenal won’t be complete without Firebug, which is the last tool we’ll be looking at today but not the least in any case. Firebug is a very versatile tool that other tools such as PageSpeed or YSlow can hook on to, however the core functionality of Firebug is to act as a bridge between the code and the rendered version of the website. This gives developers and designers an ability to change the code on the fly and instantly see the results on the browser, without really committing the changes to the source code. It also has an amazing JavaScript console which gives very detailed information about various JavaScript errors, and the console itself also has an ability to track XmlHTTPRequests which is a great help in debugging various AJAX functions.

I will be covering other tools in the next article, however I hope this article has been useful to you and gave you insight, even if little, into the wide variety of tools available to make website design/development easier.