Today I’d like to show you how to test your web apps on Internet Explorer by binding a Virtual Machine running Windows with Mac OS X. I’ve learned to do this by experience and I thought some people might find it useful.

What I will cover:

If you’ve just recently switched from PC to Mac, you’ve probably noticed that instead of Internet Explorer or Edge that you’re used to, Mac has its own proprietary browser called Safari. In fact if you try searching for “download Internet Explorer for Mac” you’ll quickly realize that the exact IE equivalent on Mac doesn’t exist.

1. What you will need. IExplorer; An iPhone, iPad, or iPod; USB cable to connect your iPhone, iPad, or iPod; A Mac or PC with iTunes installed; Before you begin. If you don't already have iExplorer installed download it by clicking the button below. For more detailed installation instructions, click here.
2. Now you can download Internet Explorer, Edge and any number of web or app-based Microsoft products. When you want to go back to running software on macOS, remember to close the virtual machine and revert to your Mac how it usually is.
3. A great tool for web developers, application users can easily see web pages displayed in Internet Explorer with just one click and then easily switch back to Firefox. IE Tab is currently available for download as a freeware. You may visit the Tom's Guide for the Best free Google Chrome Add-ons.
4. Being a Mac user whose PC runs on OS X, you do not have access to Microsoft software for your Mac PC. Well, good news you can now download the Internet Explorer on your Mac. Internet Explorer On How To Install And. Find out how in this post as we are going to how to install and use the Microsoft Internet Explorer on your Mac PC in a simple method.

1. Binding the Virtual Machine with Mac OS X
2. Testing once you have setup VirtualBox.
3. Fixing CSS3 and HTML5 compatibility

So, let’s get started…

Binding the Virtual Machine with Mac OS X

1. Install virtual box on mac (https://www.virtualbox.org/wiki/Downloads)
2. Create the partition and install Windows in your VirtualBox machine, this is going to be your Guest OS (Windows). You can follow this guide to see how to do it.I recommend assigning 4GB of RAM to your VM if possible, otherwise it could run very slow.
3. You need to be sure that your Guest Machine’s network adapter is attached to the NAT and to do so, go to your VirtualBox app in the Host OS (Mac OSX) and then click on “settings”, after that click on “network”. Make sure that NAT is selected in ‘attached to’ field.

There are two ways to check the address of the application:

Using Pow

This is the the approach you have to follow if using domains and subdomains is a requirement in your app.

1. Install Powder gem in order to link your projects and navigate on the browsers as “real” domains. Open your terminal and go to your project and code “gem install powder” then “powder link”. Now your application is available at http://your-app.dev/ finally open your application with “powder open”
2. In order to see the application with the “real” domain you have to add an item to the hosts file. Go to your Guest’s OS and add the host to the list.Here’s how: http://www.rackspace.com/knowledge_center/article/how-do-i-modify-my-hosts-file

Without Using Pow (two ways)

You can use your Host OS’ IP address directly to configure your Virtual Machine doing this:

Using the IP directly

1. Go to your “terminal” in your Host OS (Mac OS X) and type “ifconfig” in order to get the ip (copy the ip next to the “inet” word in the “en1” block).
2. Copy the ip in the address browser with the port that you are using. For example: http://192.168.1.212:3000 (where 192.168.1.212 is the IP address and 3000 is the port where my app is running).

Assigning a static ip to the guest OS (recommended)

I recommend this option to avoid having to look at your IP address every time you are running your Virtual Machine.

Can We Download Ie On Mac

1. Follow instructions on this link. If you don’t find the vboxnet0, check how to fix it on this link, and if you have an error trying to add the vboxnet0 network then execute this in your Mac terminal: sudo /Library/StartupItems/VirtualBox/VirtualBox restart.
2. Now check that your Guest OS is linked to your Host OS by typing the next IP address in your Guest OS browser’s address bar: 192.168.56.1. If everything worked you should see your Host OS’ localhost (make sure your localhost is running in your Host machine).
3. As a fancier option, you can do this: in your Guest OS click on the Windows icon and then do right click on Notepad; select Run as administrator. In Notepad click on the File menu and then Open, after that paste C:WindowsSystem32driversetc in Notepad’s address bar. Once you are in etc select the All files option so you can see the host file. Select host file and click open. Add an alias for 192.168.56.1, that way you can use domains in the Guest OS’ browsers instead of using the IP address. Don’t forget to specify the port right after the new URL in your browser, e.g. http://mylocalhost.com:3001.

As a final tip, pay attention to browser’s address bar if you are working on a project that is composed by several apps using the same domain. You have to make sure that you remain always under the same domain (the one you added on your host file in your Guest OS), otherwise communication between your apps will break. In my experience, I was working on a project that apparently was not working, but that was because requests from myapp.com:3000 were not being delivered correctly to myapp.com:3001 and the issue was that myapp.com:3000 was sending requests to anotherdomain.com:3001.

Testing after setting up VirtualBox

Testing and fixing styling issues is not that hard. Next I’m going to mention some libraries and tips that will help you to fix cross-browsing issues.

1. Install utilu, which allows to have multiple standalone versions of the IE browser. Also install IE9 on your Guest OS.

2. Open the website on IE and Google Chrome then make a comparison between them. Try to identify two main things (navigate through the application page by page), functionality and styling. Functionality could be video playing function, clicking a button and seeing what happens, styling could be that the buttons are in the wrong place, the border looks different, etc.

3. Navigate through the application page by page and take screenshots of the issues that you find in the revision if they are styling issues. It there are functionality issues then write a description about what the bug is and how to reproduce it (it could be an issue related to Javascript for example).
4. When you are navigating page by page start the debugging mode on IE, pressing F12 and then selecting the “script” tab. Look for errors related with Javascript that could break your loading page. Also, can check the HTML, CSS and network outputs in order to see if something is wrong.
5. If you already detected the differences, I recommend you to write them down so you can track them. Since I use pivotal what I do is to open a new ticket for each issue I find.
6. If you already tested the application on IE9 you can also check the application on “compatibility mode”, to simulate the IE8 version with IE9 by selecting “document mode: IE8 standards” and “browser mode: IE8’. Those options are in the developer tools window (see screenshot).

Now you can test your application on IE7 to IE8, just one thing to keep in mind: what you will see is not an exact copy of what you would see if you installed IE8 or IE7. It is only an approximation. It can help you detect some bugs in a easy and fast way. It’s better and recommended to install the real version or each browser and test the application there.

Fixing CSS3 and HTML5 compatibility

1. If you detect that some elements (buttons, inputs, text) are in the wrong place, you could check the HTML code using “developer tools” from IE browser (pressing F12).

2. Inspect the element that is malfunctioning and see the HTML code, check that the code is correct. Remember IE8 doesn’t support HTML5 tags. Like this one:

This is the code that you expect:

<header>I’m Header Text</header>

This is the code that you really have on IE8:

</header>

To solve this problem you can include HTML5 Shivlibrary inside of your <head> tags.

<!--[if lt IE 8]>

<script src=”html5shiv.js”></script>

<![endif]>

The next example shows how the site looks when you are and when you are not using this library.

Difference between Shiv and Pie

Can I Download Ie On A Mac

3. The next step is checking the CSS3 properties. As you probably know, IE8 doesn’t have the same rules as Moderns browsers, IE8 doesn’t support css3 properties. The solution to fix this kind of issue is installing Pie as a JavaScript library (same as the shiv library inside of <head> tags). In this way we are going to be able to use properties like border-radius, box-shadow, etc.

NOTE: bear in mind that those libraries help to improve the style of your website and make your site more compatible with IE, but there are some little variants. For instance, in the box-shadow tag it is not possible to add alpha transparency because it is not supported by the library.

How To Get Internet Explorer On Mac

The left image shows how the site would look with the Shiv and Pie libraries.

4. Speaking of functionality, you have to check the behavior of your application and make a comparison and fix one issue at the time. Try to be patient and get help from the “developer tools” that IE provides.

Some notes:

1. Look for errors in the “script” console of the developer tools.
2. Remember that IE does not support some Javascript methods because it runs an old JS version.
3. Remove “console.log”, it could break your code.
4. If you are working with videos you can use video.js in order to make videos compatible with IE, using fallbacks. Remember, use a link when flash is not installed instead of an image.
5. Test your application and make comparisons about the missing elements, and also test in modern browsers because you could break your code without noticing.

Well, that’s it! I know it was long but I think it can help someone out there. Please let me know if you have any feedback in the comments section below.

Download Ie On Mac

Special thanks to Jaime Gonzalez, who contributed with the creation of this article.