In the current era, when Internet Explorer is not even in the top 5 browsers list by usage and Microsoft itself moved to Chromium-based browser. I am talking about IE development, at first, it sounds ridiculous but for many enterprise applications, we have to provide the support for IE 11 and even for other Applications we need to keep them available on IE 11.
When you are developing a web application on windows, then you can easily test it on IE periodically and keep it available for IE users, but if you are developing on macOS or Linux then you have to arrange a Windows machine or you can read this article further, where I will talk about tips and tools which can help you to develop and test the web application on MacOs.
The following content is totally based on my experience and steps I followed to achive quick IE testing while using MacOs, if you know better approach, please share your comments for other readers. Readers who are expecting something other than Virtualization will also found this helpful for sure.
Polyfills
Most of the web projects we are working upon these days are using the transpiler like Babel or Compiler for typed languages like Typescript and CoffeeScript. Babel already provides polyfill which covers many features not available in IE 11 and other browsers. If you are not fortunate enough to work on projects that are transpiled, then you can use the service at polyfill.io. This is a great solution because requests via script reference are evaluated on the server, and the only necessary client-side script is downloaded. If you can not include polyfills in your project due to licensing then you have to go through the API reference from MDN or other websites before using any Web, JS API to identify whether that API is available on IE or not. At last, if nothing works, you can use the alternative API or can write your own IE polyfill for that particular API.
There are CSS properties, which are not supported on IE, you can check this reference before using the scarcely used CSS property. There are also some properties values not available on IE like unset so you can avoid such values(currently I am not able to find the reference where all unsupported values are mentioned but I have faced the lot of the issue with unset recently )
So using polyfill or avoiding non-available APIs can keep our application available on IE 11 without much testing. Moreover, you can test it in the later part of your development cycle instead of testing frequently.
FlexBox Layout IE bugs: These days, we extensively use flexbox for all sort of UI development even framework like bootstrap 4 is based on flex, IE 11 has many bugs in flex implementation. Here is the link where you can found the workaround for all flex related bugs without breaking anything on other browsers
philipwalton/flexbugs
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that…
github.com
Simulating Tools
Till now, we talked about how we can take care of a few things during development to avoid the problem on IE without actual testing on IE 11. In this section, I will talk about how we can access IE on macOS.
There are some online simulators which you can use on chrome or other browsers to test your web application, as per my experience they are not providing good performance(because they are running somewhere on the cloud)but enough to see the Quick UI rendering on IE. Another bad news here is the most of them are not free.
IE Tab — Chrome Extension- This extension will add the context menu in your chrome, through which you can simulate your current page in IE. The first few sessions are free, then you have to either pay for this extension or have to wait for few seconds before it will load your page IE
Virtual IE Tab- you can access this simulator without installing any extension, you can access the link for more info on pricing and limitations
LambdaTest- This will let you perform real-time testing of your webpage or application to make sure that it works well irrespective of the platform being used by the user. Behind the scenes, it runs a virtual machine on cloud and gives you access to complete IE, unlike above tools where you cannot debug on IE. It also provides many other features like video recording.
There are other tools also available in the market but I have not used them or explored them enough.
Virtualization With VirtualBox
Making use of the Virtual Box, you can run the Windows operating system on your Mac device, thus helping you to test your website on IE easily. Now coming to licensed windows build, Microsoft provides free builds for testing on IE and edge up to three months for all major Virtualization platform(VMWare, Hypervisor, VirtualBox), I have chosen virtual box considering its open-source nature
Install the latest version of the virtual box, import the VirtualBox based Virtual machine downloaded from above link, keep all setting default coming from downloaded VM, it will take some to set up the VM first time, as per my experience it will be straightforward. If you face any problem, you ask your problem statement in the comment section.
Once everything is done, you can start your Virtual machine from the start menu.
There are many settings under the setting menu, for each setting you can read the official reference but I would recommend:-
- increase the RAM size to 4 GB if you have 8 GB on the host machine and 6GB if you have at least 16GB on the host machine
- keep processer count to 4 at least if you have octa-core processer
- keep the video memory 256 MB at-least for the good performance of Virtual machine.
Now, you might need to install GIT, Node and another development tool in your newly set-up VM if you need to debug your application on IE else you can test your application from UI perspective without any software installation,
In my case, I have to debug the application to fix some critical bugs. So, I have installed all required tools and able to debug the application on VM but great caution, performance-wise IE debugger tools stands nowhere as compared to chrome, it provides all basic need for debugging but it is very poor in terms of performance. What you need here is patience if your web application is quite complex. I have found an IE extension debugbar that provides all major functionality for debugging and even performance-wise it is far better than an inbuilt debugging tool. A word of prudence here, it is not free and you have to spend some bucks, but if you are facing a lot of trouble with default debugging tools then it is worth spending some money
Virtual Machin Resolution
I have faced Resolution related issues on virtual box based windows VM, maybe due to the retina display of Macbook. I have tried everything from scaled mode to fullscreen mode but was not able to run it properly, below is the maximum resolution(1600*1200) I was able to run, which is not good at all for testing forgot about the debugging with this resolution, I have tried everything from installing extension pack to changing different display board option under setting in the virtual box.
Finally, I went for another solution i.e Remote Access. I had enabled remote access setting in both Guest windows machine and Virtual Box set,
Downloaded the Microsoft remote desktop from App store to access the machine remotely. Guess what, voila!! screen resolution problem vanished. Not just this, you can also use VM windows even on 2 or more monitors if you provide the monitor count in a virtual box setting page. Now it feels like I am using a physical windows machine without buying new hardware and my macOS is just a swipe away…
Virtual machine set-up tips
I have found this wiki-how links with step by step guide to set up windows VM on macOS
below are quick setting to access the VM windows machine remotely from the Microsoft remote desktop app
- Set bridge Adapter under network setting, under Name drop-down field, select the internet in-port of a host machine, it could be wifi or thunder port or USB port if you are connected through Ethernet cable
- Enable virtual machine setting on a VM windows machine
- Disabled Firewall on window machine or bypass remote desktop connection port 3389 under firewall setting
- enter the IP address of VM machine and user name as IEUSER in the remote desktop application if you have downloaded one of the testing builds.
Conclusion
In the end, I just want to say, we should move forward and stop providing IE compatible web application because it is a dying browser but sometimes we need to keep the business need first. I hope with my experience sharing I will make your life a bit easier with IE compatible web development on macOS.
If you know a better approach then please share your experience in the comment section I would love to add them in this article.
Originally Published on Medium
