Five things to love about modern.IE

You might be surprised to learn that the browser testing resources website, modern.IE (provided by Microsoft) is not just about Internet Explorer. Although some of the features are geared solely toward IE testing, some are browser-agnostic and can be very useful when developing websites. Here are a few of the things modern.IE can do for you.

Virtual Machines

Download virtual machines

Working on websites often means debugging using different browser variants. Unless you are exceedingly lucky, that will include older versions of Internet Explorer. While services like BrowserStack are invaluable for testing, they cost money and are not always responsive enough for productive debugging. Instead, I have found virtual machines (VM) to be much more useful.

Microsoft has been making VM's available for Internet Explorer testing via the website modern.IE for quite some time now. You can download VM's for whatever development platform you have, whether it is OS/X, Windows, or Linux.

Available versions of Internet Explorer
Available versions of Internet Explorer
Select virtual machine platform
Select virtual machine platform

Azure RemoteApp

If you want to test your work against the latest Internet Explorer in Windows 10 and you do not want to download a virtual machine, or are working from an unsupported device, Azure RemoteApp is for you.

Azure RemoteApp

All you need is a Microsoft Live ID and you can login and test with the latest IE for free.

Browser Screenshots

Browser Screenshots

Just want to check what your site looks like across various browsers and devices? The Browser Screenshots feature of modern.IE will give you screenshots across nine common browsers and devices. Somewhat surprisingly (at least to me), this includes more than just Internet Explorer; at the time of writing, you get:

  • Internet Explorer 11.0 Desktop on Windows 8.1
  • Opera 12.16 on Windows 8.1
  • Android Browser on Samsung Galaxy S3
  • Android Browser on Nexus 7
  • Mobile Safari on iPhone 6
  • Safari 7.0 on OS X Mavericks
  • Chrome 36.0 on Windows 8.1
  • Firefox 30.0 on Windows 8.1
  • Mobile Safari on iPad Air

Not only will it give you the screenshots, but you can share them with others, generate a PDF, and more.

Site Scan

This scan checks for common coding practices that may cause user experience problems. It will also suggest fixes when it can. Not only that, but the source is available on GitHub so that you can run scans independently of modern.IE and the Cloud.

Site Scan

I ran this against my blog and it took just over seven seconds to return the results.

Compatibility Report

Compatibility Scan

This feature will scan a given site for patterns of interactions that are known to cause issues in web browsers.  The first time I tried to run this, it did not work. However, a second attempt gave me results.

Debugging IIS Express website from a HyperV Virtual Machine

Recently, I had to investigate a performance bug on a website when using Internet Explorer 8. Although we are fortunate to have access to BrowserStack for testing, I have not found it particularly efficient for performance investigations, so instead I used an HyperV virtual machine (VM) from modern.IE.

I had started the site under test from Visual Studio 2013 using IIS Express. Unfortunately, HyperV VMs are not able to see such a site out-of-the-box. Three things must be reconfigured first: the VM network adapter, the Windows Firewall of the host machine, and IIS Express.

HyperV VM Network Adapter

HyperV Virtual Switch Manager
HyperV Virtual Switch Manager

In HyperV, select Virtual Switch Manager… from the Actions list on the right-hand side. In the dialog that appears, select New virtual network switch on the left, then Internal on the right, then click Create Virtual Switch. This creates a virtual network switch that allows your VM to see your local machine and vice versa. You can then name the switch anything you want; I called mine LocalDebugNet.

New virtual network switch
New virtual network switch

To ensure the VM uses the newly created virtual switch, select the VM and choose Settings… (either from the context menu or the lower-right pane). Choose Add Hardware in the left-hand pane and add a new Network Adapter, then drop down the virtual switch list on the right, choose the switch you created earlier, and click OK to accept the changes and close the dialog.

Add network adapter
Add network adapter
Set virtual switch on network adapter
Set virtual switch on network adapter

Now the VM is setup and should be able to see its host machine on its network. Unfortunately, it still cannot see the website under test. Next, we have to configure IIS Express.

IIS Express

Open up a command prompt on your machine (the host machine, not the VM) and run ipconfig /all . Look in the output for the virtual switch that you created earlier and write down the corresponding IP address1.

Command prompt showing ipconfig
Command prompt showing ipconfig

Open the IIS Express applicationhost.config file in your favourite text editor. This file is usually found under your user profile.

notepad %USERPROFILE%\documents\iisexpress\config\applicationhost.config

Find the website that you are testing and add a binding for the IP address you wrote down earlier and the port that the site is running on. You can usually just copy the localhost binding and change localhost to the IP address or your machine name.

You will also need to run this command as an administrator to add an http access rule, where <ipaddress>  should be replaced with the IP you wrote down or your machine name, and <port>  should be replaced with the port on which IIS Express hosts your website.

netsh http add urlacl url=http://<ipaddress>:<port>/ user=everyone

At this point, you might be in luck. Try restarting IIS Express and navigating to your site from inside the HyperV VM. If it works, you are all set; if not, you will need to add a rule to the Windows Firewall (or whatever firewall software you have running).

Windows Firewall

The VM can see your machine and IIS Express is binding to the appropriate IP address and port, but the firewall is preventing traffic on that port. To fix this, we can add an inbound firewall rule. To do this, open up Windows Firewall from Control Panel and click Advanced Settings or search Windows for Windows Firewall with Advanced Security and launch that.

Inbound rules in Windows Firewall
Inbound rules in Windows Firewall

Select Inbound Rules on the left, then New Rule… on the right and set up a new rule to allow connections the port where your site is hosted by IIS Express. I have shown an example here in the following screen grabs, but use your own discretion and make sure not to give too much access to your machine.

New inbound port rule
New inbound port rule
Specifying rule port
Specifying rule port
Setting rule to allow the connection
Setting rule to allow the connection
Inbound rule application
Inbound rule application
Naming the rule
Naming the rule

Once you have set up a rule to allow access via the appropriate port, you should be able to see your IIS Express hosted site from inside your VM of choice.

As always, if you have any feedback, please leave a comment.

  1. You can also try using the name of your machine for the following steps instead of the IP []