Simulating touch events on a PC browser

javascript ipad html google-chrome touch
eshalev picture eshalev · Feb 7, 2011 · Viewed 49.9k times · Source

I am developing an HTML application for the iPad. As such it utilizes touch events and webkit-CSS animations.

Up until now I have used chrome as my debugging environment because of it's awesome developer mode.

What I would like is to be able to debug my Html/JavaScript using Google-Chrome's debugger on my PC while simulating touch events with my mouse.

My site does not have any multi-touch events and no mouse events (no mouse on iPad).

I am not actually interested in seeing the applications layout, but more in debugging its behavior.

Is there some plugin to get mouse events translated into touch events on a desktop browser?

Answer

Simon Sarris picture Simon Sarris · Apr 14, 2012

As of April 13th 2012

In Google Chrome developer and canary builds there is now a checkbox for "Emulate touch events"

You can find it by opening the F12 developer tools and clicking on the gear at the bottom right of the screen.

on Chrome v22 Mac OS X

For now (Chrome ver.36.0.1985.125) you can find it here: F12 => Esc => Emulation. console

Related questions

HTML Mobile -forcing the soft keyboard to hide

I am developing the front end site for a coupon company, and I have a page where the user only needs to input phone number and $$ spent. We came up with a fun on-screen keyboard built in Javascript, that is …

Read More
Auto-Full Screen for a Youtube embed

I have a Youtube video embeded on a webpage. Is it possible to have the video go full screen when the user presses play, using the HTML5 iframe with Youtube's API? Using the Chromeless player is not an option as …

Read More
Detect iPad Mini in HTML5

Apple's iPad Mini is a smaller clone of the iPad 2 in more ways than we'd want. In JavaScript, the window.navigator object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have …

Read More