Daniel Oviedo on September 13, 2019

Testing the Visuals of IE11 & Microsoft Edge on a MAC OS using VirtualBox

As developers one of our duties is to ensure consistency in how content is displayed in a variety of browsers. If your web development project involves testing the visuals on IE11 or Microsoft Edge and don’t know how because you are using MacOS, then this post is for you! Note that you do not need a serial number or purchase anything in order to install Windows 10.

I‘ll expose a fairly simple and popular way to operate Bill Gates’ giant having Steve Jobs as host using Oracle’s VirtualBox. The steps are as follows:

1. Install Oracle’s VirtualBox.
2. Install Microsoft 10 using a .iso file in VirtualBox.
3. Testing your project with IE11 and Microsoft Edge.

Let’s dive into the details of each step:

1. Install Oracle’s VirtualBox

Go to https://www.virtualbox.org/wiki/Downloads and under “VirtualBox 6.0.12 platform packages” label (as of today the current version is 6.0.12), click on “OS X hosts”

image

After the download finishes click the installer and follow the steps. You’ll be likely asked to grant accessibility features for VirtualBox in System Preferences. This may be relevant to avoid future problems when running the virtual machine, so make sure to allow it.

2. Now we need to download Windows 10 .iso file and install it in VirtualBox. There are two main sub-steps:

2.1 - Downloading Windows 10:

Go to https://www.microsoft.com/en-us/software-download/windows10ISO. Under “Select edition” tab, select Windows 10 (Latest is 10 May 2019 as of today). Click on Confirm. Now select the language and click again on Confirm.

image

Download 32-bit or 64-bit version. I’m sticking with 64-bit version, but feel free to choose what best fits your setup. If your internet is not so speedy you might sit a while and wait until the download finishes.

image

2.2 - Installing Windows 10 in VirtualBox:

Open VirtualBox and click on “New”, then enter a name for the virtual machine. I use “Windows 10 - 64bit”. Make sure “Type” is set to “Microsoft Windows” and in “Version” select “Windows 10 (64 bit)”. Click on continue.

image

In this step you need to allocate enough RAM. I assigned it 2GB since I have 8GB RAM in my iMac and I don’t want to run into performance issues in my host machine. Have in mind that x86 (32-bit) version requires a minimum of 1GB RAM and x64 version requires 2GB RAM at least. Click on “Continue”.

image

You need to create a Virtual Hard Disk. The default selected option is fine (Create a virtual hard disk now), click on “Create”. Select “VDI (VirtualBox Disk Image)” and choose “Fixed Size HDD”. Microsoft requires 16GB at least for 32-bit version and 20GB for 64-bit version. I’ll set mine to 50GB.

image

Make sure to allocate enough video resources to your guest OS. You can check those options in “Settings” then “Display” tab. If you’re not sure, leave default and adjust later.

Go to “Settings”, click on the “Storage” tab, click on the blue “Empty” disk and click the blue disk to the right of “SATA Port 1”, click on “Choose Virtual Optical Disk Drive” and look for your Windows 10 .iso file.

image

Start your Windows 10 virtual machine and follow the installation instructions. As I mentioned earlier, don’t worry about the serial number, just select you don’t have one and it will anyway let you install.

image

After finishing installation you should have your Windows 10 up and running.

3. Testing your project with IE11 and Microsoft Edge

The default settings should be fine to let communication happen between host OS and guest OS. To know which IP address to point inside Windows 10, open the Command Prompt or the Powershell and run the following command:

ipconfig

The Default Gateway is the IP address we should use to connect with MacOS host, in my case is 10.0.2.2.

image

If you’re already serving a project in MacOS go ahead and test in IE11 or Microsoft Edge. For example I just created and deployed locally in my host machine a Vue.js app using Vue’s CLI and it listens on port 8080:

image

That’s it folks! Now you’re ready to see the looks of your project with IE11 and Microsoft Edge within MacOS. Also, feel free to experiment with Windows 10 as you need.


Back to all posts