Menu
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?
550
Activate the Developer Tools with CMD+ALT+i (OSX) or F12 (Windows). Click the cog icon to open up it's settings. Then switch to the Overrides tab. Make sure Enable is checked and then activate Emulate touch events.
While on Chrome, press F12 to toggle Developer Mode. Then, you can switch between devices at the top. This will mimic touch gestures made by a real device.
The Chrome Browser integrates a nice feature to simulate multiple mobile devices or a touch screen. Now close the settings and press the ESC (Escape Key) and switch to the "Emulation" Panel (2). The "Sensors" menu (3) let's you enable the "Emulate touch screen" (4) checkbox. That's it!
Add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree). Add touchmove , touchend and touchcancel event handlers within the touchstart . The target touch element or node should be large enough to accommodate a finger touch.
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.
For now (Chrome ver.36.0.1985.125) you can find it here: F12 => Esc => Emulation. 
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
