thetransient » Development tools

Test environment for supported browsers using Microsoft’s free virtual pc’s

Erik Phipps — Sun, 01 Mar 2009 23:57:04 +0000

With the release of IE8 RC1, I’ve realized that my supported browser testing environment is sadly lacking. The best way to create a testing environment with all the supported versions of Internet Explorer is to use the free virtual machines supplied by Microsoft themselves. In order get full use out of the virtual machines, I’ve decided to install the browsers that I don’t use on a regular basis (Safari, Opera, etc.) on one of them. No need to clog up my physical machine with extra applications if it can be avoided. One drawback is that the Virtual PC’s are time-bombed, but it doesn’t take much time to re-install the four or so browsers needed.

Here is my setup:

Physical PC

Physical Mac

IE6 Virtual machine

IE6 (comes installed on Virtual Machine)
Google Chrome
Safari
Opera
FireFox 2 (be sure to install with DOM Inspector enabled)
Flock

IE7 Virtual machine

IE7 (comes installed on Virtual Machine)

Notes:

Why IE7 virtual machine? IE8 RC1 has both IE7 and IE8 rendering engines but some differences do exist between the way IE7 renders and the way the IE7 engine embedded in IE8 renders. Therefore, the IE7 Virtual Machine is necessitated.

Virtual machine hosts file. For the virtual machines, you’ll need to add any local development sites to the virtual machine’s hosts file.

192.168.1.103 dev.myblog.com
192.168.1.103 dev.favoriteclient.com
192.168.1.103 dev.someothersite.org

The physical machine’s IP can be found by running ipconfig /all at the command prompt.

IE7 server error. I also had to disable the IE7 add-on named Diagnose Connection Problems in order to hit certain sites in my development environment.

How to reduce FireBug’s memory usage

Erik Phipps — Tue, 27 Jan 2009 06:51:16 +0000

I love FireBug but one day it became a memory behemoth! It was consuming over 800k every hour or so of work. I did a little poking around and found that I had inadvertently set network monitoring, console logging and JavaScript debugging to be on by default. After a little digging, I found the tip below in the FireBug Google Group buried deep inside a lengthy thread.

Click on the Console tab to activate it, then click on the drop-down arrow and select Disabled from the drop-down menu. Repeat this for the Script tab and the Net tab. Now these three features will be disabled by default. When you want to use any one of them, simply activate them on a per-site basis by ticking the tab next to the appropriate feature and clicking the Apply settings for www.site.com button.

Test driving Internet Explorer beta 2 developer tools

Erik Phipps — Fri, 12 Sep 2008 07:15:48 +0000

I’ve been playing with the IE8 developer tools and what at first seemed like a promising new UI utility has revealed itself as rather under-whelming and run of the mill. Sure it has typical features such CSS editing and image highlighting, but where’s the state of the art, move the web forward functionality we were expecting? Maybe I’m being delusional and that’s too much to expect from Microsoft!

The good

The mode switcher is awesome! To have the ability to see how code responds between Quirks Mode and Standards Mode is really handy, especially since IE’s rendering is so different between the two. It’s ironic that the developer tool’s best feature is only there due to its own shortcomings over the years.

Other nice features:

Outline tab indexes and access keys
Outline any element you want
Outline positioned elements based on value

The bad

I’ve only scrutinized the CSS/HTML tools, but many not-so-positive things jump out even after just a few bug fix attempts.

The Select Element by Click option is buried in a drop-down menu. There should be a button or key-command or a right-click menu option (actually, all three!).
CSS style hierarchy pane descends when it should ascend. In the styles pane, the element styles line up from the very top of the cascade hierarchy to the bottom. More often than not, I’m going to want to see the very last styles that are applied to an element first and not the very top level styles on the BODY tag. Every time I select an item I have to scroll all the way to the bottom of the styles pane.
There is no way to delete elements from the html. FireBug offers the ability to delete elements completely and this is a very handy function for bug hunting by using the process of elimination. IE8 dev team should implement this feature.
Edit html changes don’t stick until leaving edit html mode.

It wasn’t my intention to compare it to FireBug, but I couldn’t help it since that is a tool I use quite often.

The buggy

It’s only a beta version but man is it buggy! Usually from anywhere within five to twenty options selected or styles deselected, the tool begins to slowly or dramatically lose functionality. Either the style pane completely goes white or the edits to styles stop showing up in the browser window.

Conclusion

If the developers of the IE8 development tools can fix the bugs in their tool and improve its usability, they’ll have a very handy tool to contribute to the community. If not, then they’ll simply be doing what they’ve always done…take something that they can really shine on and underachieve. I am still pulling for them to blow my socks off, but still have that simmering feeling that they will let me down once again.