Using the Windows 8 Simulator & VS 2012 to debug the IE10 touch events & your responsive design on the web

By  |   Email     Print  Post a comment

6/20/13

 

by David Rousset

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:

- Touch Input for IE10 and Metro style Apps
-
Handling Multi-touch and Mouse Input in All Browsers
-
Go Beyond Pan, Zoom, and Tap Using Gesture Events

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: