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