How to simulate touch gestures in browser, preferably chrome?

Question

The purpose of this question is to learn how to test JS event listeners for touch events on mobile devices.

Solution 1

While on Chrome, press F12 to toggle Developer Mode.

Then, on the top-left of the developer partial, you will see a small icon saying "Toggle Device Mode" (Ctrl/CMD + Shift + M)

Then, you can switch between devices at the top.

This will mimic touch gestures made by a real device.

Solution 2

If you go into Developer Tools (F12), enter responsive design mode (Ctrl + Shift + M) and select a touch-enabled device, you can change it so it triggers touch events when you interact with the page (rather than mouse events).

Solution 3

Open up the devtools and on the topleft corner there's an icon with a screen behind a phone. Click it to enable phone mode. You will know you are in phone mode because the page will be smaller and a circle will appear where your cursor was. Clicking will simulate a touch event.

Solution 4

I would recommend Hammerjs's touch emulator. It gets you touch events like Chrome, but also multitouch events (pinch in particular). It's easy to install on your page while developing. I'm using it to test stuff written in Fulcro (React). Works perfectly.

View more solutions

Comments

[mzmm56]

Sorry didn't mean to downvote - finger slipped :/ will reverse it when the question becomes unlocked

[Gabor]

I have just came across a situation when the functionality is working with the in-built touch emulator in Chrome, but it doesn't work in a real Android device, and I just wanted to point out this isn't replacing the actual mobile testing. The issue: stackoverflow.com/questions/37251486/…

[Ramtin]

Note that Safari has a responsive design mode which allows you to use the framework of an iPhone or iPad. However, Safari, even in the responsive design mode, always registers a mouse event. visit here to detect the touch or mouse events on a web page.