August 26, 2009
by Justin
This article will start with Internet Explorer, since that's the browser that often requires the most amount of debugging, but follows with details on how to run multiple versions of Firefox. Developer techniques have reached a sufficient stage now where there should be no need for old-fashioned css or html hacks to be used.
IE has supported Conditional Comments for a long time now. Conditional comments enable you to write additional css styles to cater for different versions of IE and should definitely be your only method for dealing with IE inconsistencies. For other browsers or platforms (e.g. iphone) you can use browser sniffing techniques to identify how a visitor is viewing your site, using the $_SERVER['HTTP_USER_AGENT'] string for instance, and, if absolutely necessary, write alternative code accordingly.
For those who wish to get right down to it I've attached readme style text files for IE and Firefox at the end of this article. These will provide straightforward step by step instructions without all the chaff.
Internet Explorer
For years it's been a bitter irony that the browser requiring the greatest need for debugging - Microsoft's infuriatingly flawed Internet Explorer - has been the one that least lends itself to debugging. Until recently there was no simple way to install any useful tools (unlike Firefox) and the only way to get multiple versions to run was to install a virtual machine. This would require installing an entire operating system, and setting up a VM for each version of IE - all of that simply to correct something that Microsoft should have been doing correctly right from the outset.
However, Microsoft has gone a long way towards atoning for past sins with IE8. Not only does IE8 adhere more closely to web standards than any previous version it also comes with built in debugging tools. If you haven't already installed IE8 then do it right now: http://www.microsoft.com/windows/internet-explorer/default.aspx
Done? Good. The first thing you'll want to do is load up your website then hit F12. This loads up the developer tools window. If you've ever used Firebug and/or Firefox's excellent Web Developer Toolbar you'll find yourself in more or less familiar territory here. Right off the bat one of the most useful things you can do is choose to view your site in either IE8, IE7 or IE8 compatibility mode. Selecting either one of these will instantly show you how your site will render in IE7 or IE8 (note that you can also adjust your ‘document mode' to use standards or quirks mode).
There's a wealth of tools available here that will enable you to test and manipulate almost any aspect of your site - far more than be adequately covered in this tutorial. For my money the HTML and CSS tabs are the most useful - using these you will be able to test out basic html and css edits to your site and see the changes immediately reflected in your browser window. Any changes that work correctly can be copied to your production version.
What about earlier versions of IE? While anyone still using IE6 or (shudder) lower should rightly be beaten with a stick there is at last a tool available for debugging these earlier versions. IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) works like a basic browser, but lets you choose to view your site in anything from IE5.5 to IE8. Not only invaluable, but compelling for those masochistic enough to see how IE5.5 can mangle your finely crafted code.
One last IE trick work mentioning is the new X-UA-Compatible meta-tag. While there's no substitute for correctly debugging your code - if you do have a site that renders perfectly well in IE7, but seems to fall over in IE8 and you're unable to identify the cause you can add the X-UA-Compatible meta-tag to your head section to force IE8 browsers to display the site in a different mode. For instance the following will cause your page to render as if the user was browsing with IE7:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
Note that this is only supported by IE8 and should be placed above any linked files, such as css style sheets or scripts.
read on for Firefox...
Firefox
As a rule Firefox has always done a far better job of rendering web pages according to standards. This means that if you code your pages correctly you should have few problems with Firefox. However, there are css attributes that are deprecated between one version and another, differences that might crop up between Firefox 2 and Firefox 3, and so on. In short there's still every reason to debug in different versions of Firefox.
Unlike IE it has always been possible to run multiple versions of Firefox on your PC. That doesn't mean to say it's necessarily been easy to do so. However, it's now just a matter of setting up a few additional profiles and amending a few shortcuts.
First you'll need to download some old versions of Firefox (let's assume you've already got the latest version installed as your default browser. You do, right?!) - you can get these here: http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ in a variety of flavours depending on your platform and language.
You can install as many versions as you like (though you should really only need the ‘latest-2.0', ‘latest-3.0' and ‘latest-3.5' installs). However, be sure to install each version in its own folder, e.g. C:Program FilesMozilla Firefox 2.0 and C:Program FilesMozilla Firefox 3.0.
Next step is to set up profiles for each version. The following will enable you to run each version side by side and, furthermore, set up different bookmarks, extensions and the rest for each browser. First launch the Firefox Profile Manager by going to Start -> Run and typing:
"C:Program FilesMozilla Firefoxfirefox.exe" -no-remote -ProfileManager
Mac users should go to Terminal and type:
/Applications/Firefox.app/Contents/MacOS/firefox -profilemanager
(obviously you might need to change the path if your main Firefox install is located somewhere other than the default.) Incidentally, Mac users might also want to investigate the MultiFirefox tool available at: http://davemartorana.com/multifirefox/
All you need to do is click on Create Profile and enter a name - do this for each profile you want - just ensure that the names don't have spaces in. It's worth noting that by default Firefox will launch using whichever profile is highlighted in the window, so you will want to ensure that your default profile is highlighted when you hit Exit. Also, unless you want to be hassled each time you start Firefox you'll want to check Don't ask at startup.
The last step is to set up shortcuts for each Firefox install making sure that each version of the browser loads up using the correct profile. First create your shortcuts as usual (if the installation process hasn't already done so for you), ensuring they have distinctive names. Now right click on each shortcut in turn and select Properties. Go to the Shortcut tab and edit Target so it reads something like:
"C:Program FilesMozilla Firefox 2.0firefox.exe" -P Firefox2 -no-remote
"C:Program FilesMozilla Firefox 3.0firefox.exe" -P Firefox3 -no-remote
"C:Program FilesMozilla Firefoxfirefox.exe" -P default -no-remote
The -P attribute tells the shortcut to load the named profile, while the -no-remote bit lets you run different versions side by side. Obviously this will only work for the shortcuts you've just set up. If you want to launch Firefox from your start menu/desktop/quick launch toolbar you'll need to amend those shortcuts in the same manner.
NOTE: You might prefer to leave your default Firefox shortcut unaltered in order to avoid getting 'Firefox is already running...' error messages.
Read on for a list of handy Firefox tools and details for accessing developer tools in Safari and Chrome.
Firefox Tools
It's worth mentioning a couple of useful Firefox Add-Ons for web developers:
Web Developer - hands down the best developer tool, Web Developer gives you access to a massive suite of tools and enables you to do things like tweak CSS on the fly and see the results rendered immediately in your browser window.
Firebug - another essential tool for serious developers providing a slightly different bag of tricks than Web Developer.
ColorZilla - if you ever need to quickly identify the hex or RGB value of a color on a web page then this is for you. Additional tricks include a colour picker, palette browser and page magnifier.
Font Finder - select any text on a web page, right click and you'll have access to complete style information for that sample of text including font-family, font-size, colour, spacing and more.
MeasureIt - provides the ability to measure any selection on a web page in pixels - surprisingly useful!
Safari
At this time I don't have any information on running multiple versions of Safari under windows (although there are a number of web pages concerning running multiple Safari installs on a Mac such as http://michelf.com/projects/multi-safari/).
However, developers should at least switch on the developer menu. To do this open Preferences, navigate to the Advanced tab and check Show Develop menu in menu bar. You might need to ensure the menu bar is showing by selecting Show Menu Bar under the tools icon.
Chrome
Google's Chrome browser has a very similar, if not identical, set of developer tools. These can be accessed quite simply by right clicking on any element on the web page and select Inspect Element. More information can be found here: http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95691
And that's it - if you have any other tips, tricks, corrections or updates please leave a comment.
Posted:
August 26, 2009 at 13:01
Permalink
Filed under:
Web Design
Author:
Justin (contact)
Last edit:
August 26, 2009 - 13:02
