72

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?

gariepy
  • 3,576
  • 6
  • 21
  • 34
eshalev
  • 3,033
  • 4
  • 34
  • 48
  • 1
    There's no substitute for debugging your site on a real device (especially if you ever decide to support multi-touch). Fortunately, debugging in Chrome mobile is [very easy](https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en) now, you can debug remotely via your PC. You can connect to ADB via Wi-Fi, too, no USB cable needed. – rustyx Dec 28 '15 at 11:07
  • check here http://www.freakyjolly.com/how-to-test-touch-behavior-in-google-chrome/ – Code Spy Oct 31 '18 at 06:14

5 Answers5

97

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

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • no checkbox for me. chrome 18.0 osx lion. clicked on the small gear but there's no checkbox for that! –  May 07 '12 at 13:29
  • 1
    *Emulate touch events* is in Chrome 19 and above. – Sam Dutton May 15 '12 at 18:48
  • 15
    What does "emulate touch events" actually mean? –  Jul 18 '12 at 13:11
  • You can "use" those touch events when holding the mouse button and moving the mouse like you would move your finger. To be honest, this is not really well implemented and only works for ONE finger, as ... well ... we only have one mouse cursor (or you have a multi-touch-point laptop touchpad) – Sliq Apr 09 '13 at 15:32
  • saved me trying to integrate alot of unnecessary libraries – Obi Dec 28 '13 at 20:31
  • I was able to simulate a pinch-to-zoom touch event by holding down shift, left-clicking, and then sliding my finger up and down on the trackpad. This is different than the docs which say "Hold Shift while dragging the mouse to emulate a pinch gesture." That didn't do anything for me. – Josh Dec 11 '14 at 16:16
  • Supposedly [multi-touch events can be simulated](https://developer.chrome.com/devtools/docs/device-mode#device-sensors) on "devices that support multi-touch input, such as laptops with trackpads." I have a Dell M4800 with multi-touch trackpad, and it's not working for me on [Paul Irish's demo](http://www.paulirish.com/demo/multi). – Josh Dec 11 '14 at 16:21
7

The desktop browser can simulate touch events by importing additional JS + CSS. Take a look at:

  1. addTouch
  2. Phantom Limb
Vlad
  • 736
  • 1
  • 7
  • 11
  • @weird... thumbs.js presents touch events that have none of the touch fields I would expect (such as "touches")! – Michael Feb 18 '18 at 05:08
3

Another way to simulate multi touch on a desktop browser is the Touch Emulator of Hammer.js

Corne
  • 646
  • 1
  • 6
  • 19
2

We use this script: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ It will allow all mouse events in your application to be triggered by touch events instead. So, since we already had a web application that used right-clicking, drag-n-drop etc. it allowed us to perform all of the same functionality with touch.

I know it's almost the reverse of the simulation you were looking for (you will have to script your application to primarily be used by a mouse) but I hope it helps anyway.

bishbashbosh
  • 359
  • 1
  • 11
0

If you're targeting Webkit specifically (iPad and all), you can rely on normal event handler code (add/removeEventListener). With that in mind, you probably need to just branch on a few events - e.g, 'ontouchstart' becomes 'onclick' based on the environment.

Offhand I don't know of any libraries providing this level of branching, though. Pretty easy to do yourself.

Ryan McGrath
  • 2,042
  • 14
  • 23
  • Thanks, this is what I am doing now. But..., alot of my code has to do with writing engaging custom controls, which means that each control has it's own unique behaviour when touched. So I am looking for a piece of javas-cript that can do this once at the document level (while maintaining independent OnTouch for each different document element.). Or maybe a browser plugin. It seems like a generic enough requirement (debugging mobile web-sites from a desktop browser...) – eshalev Feb 07 '11 at 13:56