Using the Windows 8 Simulator & VS 2012 to debug the IE10 touch events & your responsive design on the web
I’m currently working around the touch events of IE10 and even if I’m lucky enough to have a Windows 8 tablet, I was looking for a simpler way to do basic tests on my classical laptop without switching to the tablet each time. While looking for that, I’ve discovered several tips & tricks that may help you debugging the IE10 touch events in your code without even using a touch device. Nice side effect: the same approach will also help you to test & debug your responsive web design!
Pre-requisites: to follow this tutorial, you need first to:
1 – Download & install Windows 8 Release Preview on your machine: http://preview.windows.com
2 – Download & install Visual Studio 2012 RC Express for Windows 8: http://msdn.microsoft.com/en-us/windows/apps/br229516
The touch events model of Internet Explorer 10
If you don’t know yet how our touch implementation works, you should first read these 3 articles:
As a complement resource, you may have a look to the Pointer.JS library that mimics the IE10 model for the other browsers.
The Windows 8 Simulator to simulate touch
The Windows Simulator is installed with the development tools and is normally designed to help you testing & debugging your Metro Style Apps. You may learn a bit more details here: First look at Windows Simulator
Still, nothing prevents us to use it for debugging web applications running inside IE10 in the simulator. Let me show you how.
1 – Launch the simulator by launching the Microsoft.Windows.Simulator.exe located inside “Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\11.0”
And click on the desktop icon.
2 – Launch IE10, navigate to the “Internet Options” and “Advanced” tab. Check that both “Disable script debugging (Internet Explorer)” & “Disable script debugging (Other)” are not checked:
3 – Navigate to the URL you’d like to test and/or debug. For instance, let’s test this demo: Finger Painting from the IE Test Drive. Using the simulator, you can simulate classical mouse input and/or touch switching modes using this 2 buttons:
First, you’ll think you’ll get the exact same results: