How To Emulate Touch Events in Chrome

How To Emulate Touch Events in Chrome

When you're developing for Touch devices, you might want to test interactions directly in your browser.

Google Chrome is a fantastic browser and provides a nice way to achieve this with the Developer Tools.

Activate the Developer Tools with CMD+ALT+i (OSX) or F12 (Windows). Click the cog icon to open up it's settings.

settings

Then switch to the Overrides tab. Make sure Enable is checked and then activate Emulate touch events.

overrides

You're done. Now you can fire touch events by holding down your mouse and draw a gesture. Hold it and drag down to fire a Swipe Down for example.

What about emulating touch events in Firefox?

With the Firefox OS Simulator 4.0 (released this summer), you're able to launch a simulator which allows you to test your mobile websites and applications including touch events. Since it's still an alpha version, you have to expect some glitches and bugs. There's also a bookmarklet you can use to simulate touch events.

Not only for developers

This know-how is also useful, if you're not a developer. For example you can create a touch prototype with Frontify and test it right in your browser. Just define some touch interactions (via Interactions layer) and open up the Viewer (Press View button in the project view). Have Fun!

Further Reading

Multi-Touch Web Development (HTML5Rocks)

Resources

Hammer.js - A JavaScript library for multi-touch gestures (by EightMedia) Touchable JQuery Plugin

Roger Dudler
Roger Dudler
Founder & CEO