4 Ways to Make testing IE with Virtualbox better
An important part of front-end web development is making sure the site works on all the browsers the user would use also know as cross browser testing. For most modern browsers not many issues usually arise from cross browser as they’re pretty evergreen and a user would more likely than not have the latest version with up-to-date features, however for Microsoft’s Internet Explorer which, to my knowledge won’t update anytime soon, produces a handful of issues when I tests sites depending on the version of the browser. Layout issues, with the lack of support for certain CSS properties and JS methods. Not only that, but developers on a Mac and Linux operating system have an additional hurdle to jump over, Internet Explorer is completely unavailable. The easiest test on it is to use a service like Browserstack, the other option is to run Windows on a Virtual Machine.
The former has a lot of cool features and is incredibly quick to set up, but isn’t free. And the cost can rack up depending on how many users you pay for. The latter is free, but requires some level of configuration to become ‘fun’ to use. If you’re like me and are happy to do a bit of tinkering then this is the article for you.
The Setup
Firstly you’ll have to download Virtualbox for your specific OS, in my case it was OS X hosts. Then grab a free copy of windows provided by Microsoft from here, I chose IE11 on Windows 7. Once the large download is complete you can add it to Virtualbox by going to File, then Import Appliance. It’ll take a few minutes to install but once that’s done, you’ll have a fully working Windows operating system on your machine installed with Internet Explorer for testing. There are a few small things however, you can do to make IE testing feel seamless on a Mac.
1. Enabling localhost
Running a local server on your mac and testing it in the browser will most likely have a url that starts with localhost. But you can’t just type the same url into your Virtualbox powered Internet Explorer and expect to see the same results. Let’s change it to do so.
- In Windows, click Start, navigate to Computer on the right panel, open up the C: drive and drill down to the hosts file like this.
C:\Windows\System32\drivers\etc\hosts - Right click on the hosts file, click Open, then open with Notepad
- Add this line to the file somewhere
10.0.2.2 localhostand make sure it doesn’t have a#anywhere on that line.
- Now if localhost works on your Mac browser, it should work in Virtualbox as well
2. Copying and Pasting
By default you can’t copy and paste files from your mac to Virtualbox, and vice versa. Luckily this is an easy problem to solve.
- Open up Virtualbox and before starting windows, click on the yellow settings cog.
- Go to General, click on the Advance tab and make sure both, Shared Clipboard and Drag’n’Drop are both Bidirectional.
3. Using Mac shortcuts
After enabling the ability to copy and paste you’ll quickly realise you’ll have to use different shortcuts for different operating systems, Ctrl+C to copy on Windows and Cmd+C to do the same on Mac. This is a fixable problem but it’s definitely the most fiddly thing to achieve in this article.
- Before starting Windows go to the virtualbox preferences by clicking on the word Virtualbox in the top right hand corner.
- Go to Input, click on the Virtual Machine tab, then for Host Key Combination change it to Right command instead of left. This means that the left one is free to use in windows.
- Now open up windows, download and install a programme called AutoHotkey. This is what enables the custom key mapping.
- Once installed right click on your Desktop, go to New, the AutoHotkey script. Give it a name, then open it in Notepad.
- Copy and paste this code to the bottom and save.
#SingleInstance force
#r::Send ^r ;reload
#z::Send ^z ; undo
#y::Send ^y ; redo
#f::Send ^f ; find inside apps
#c::Send ^c ; copy
#x::Send ^x ; cut
#v::Send ^v ; paste
#t::Send ^t ; new tab, Firefox
#s::Send ^s ; save inside apps
LWin & Tab::AltTab ; the motherlode, alt-tab!
- Right click on the new file you created, click Compile Script. Then double click on the file you created to run it. That should enable the shortcuts, but you don’t want to run it each time you open windows so let’s fix that.
- In Windows press start, then type Run in the textbox available. Then type `shell:startup` in the box that shows up.
- Drag your newly created file into the startup box and you should be good to go.
4. Change homepage to Google (optional)
The final and easiest thing to do is this last step. Personally I’m not a huge fan of the MSN homepage screen I see each time I open up IE, and if you’re the same, we can change that now.
- Open up Internet Explorer and click on the cog in the top right hand corner.
- Click on internet options, and in the General tab change the homepage to your regional Google url.
And that’s it, a short article on how to make Internet Explorer on Virtualbox more seamless/fun to use or more like Browserstack, however you want to see it.
