How to simulate pinch zoom in Google Chrome?

Question

I'm developing a pinch zoom feature for a mobile app written in javascript and I want to test this in Google Chrome with the mobile device emulation feature. But I cannot find a way to test a pinch gesture.

I tried everything I could find on the internet (pressing Shift and moving the mouse, pressing Alt and moving the mouse), but none of this worked. Is there even a "native" way in Google Chrome to simulate a pinch zoom gesture?

btw I'm using the MacOs version of Google Chrome version 59.0.3071.86

Solution 1

Shift + mouse click & drag across the viewport

Works for me. Only problem is that the touchstart event will return 1 for originalEvent.touches

Solution 2

On Chrome v.71.x.x, you can pinch zoom pressing 'Toggle Device toolbar' at dev tools and after hold SHIFT and click-drag your mouse.

Solution 3

Pinch gestures have different listeners in different browsers but there is an outstanding lightweight library named hammer.js which handles pinch,swipe and .... pretty easy and fine in all browsers, Unfortunately it does not support Desktop Chrome, so you can not debug your web-mobile codes easily,

Shift-Mouse click&dragging on Desktop Chrome with hammer library also does not work fine, it activates hammer's Pan event instead of pinch and works just once!, after that it keeps calling Pan event when you move your mouse through your viewport which is quite annoying and makes the debug impossible.

Solution : The only convenient way, that I know, to test your gestures on a mobile browser is to use either Safari to Safari connection on ios/osx devices or Chrome to Chrome connection for android devices.

I use to debug my JavaScript codes with Chrome DevTools but in web-mobile projects I use Safari Web Inspector, because I have an iphone and a Mac!. you also can not debug your ios device with Desktop Chrome.

Take a look at this article to find out how to setup your Safari Web Inspector.

Note: you need to connect your iphone to your mac using usb-cable and enable Web Inspector on your iphone (Settings-> Safari -> Advanced -> Web Inspector) If you are unable to see Develop menu on your Safari, Go to Preferences and in Advanced tab check "Show develop menu in menu bar". the rest are explained in the above mentioned article.

Update

It is not possible to debug an ios device on a Windows Desktop Safari.

Solution 4

On Chrome 66, while in device simulation mode, double-click-drag up/down zooms out/in.

Solution 5

If you have a mobile device on hand, you can connect the device to your desktop compute and use the Remote Devices feature to debug your phone on your desktop.

For Android:

1. Enable Developer Mode and USB Debugging.

2. On your desktop go to DevTools and click on More Tools > Remote Devices under the three dot menu

3. Check the Discover USB Devices option. You'll see an authorization popup on your phone. Allow it and continue.

4. Open Chrome on your phone and you should be able to inspect all the tabs on your phone. As a bonus you can use port forwarding to forward your desktop localhost to the device's localhost so if you're running a dev application on your desktop you can debug it on mobile.

For iPhones: I'm not too familiar with the details here because I haven't been able to try it out myself but I believe you can enable it through chrome://inspect and Start Logging.

Source: https://dev.to/dev0x0/using-google-chrome-console-on-any-mobile-device-9ec

View more solutions

Comments

[Philip Claren]

I don't want to zoom the website, I want to test the two-finger-pinch-zoom-gesture for mobile devices.

[Juangui Jordán]

Sorry, guy, I downvoted and it was an issue with the website that I was testing. You are right, and if it helps, here it is a list of other shorcuts: anti-code.com/devtools-cheatsheet

[nnyby]

This isn't working for me on Chrome 72. Has something changed?

[Josh Powlison]

@nnyby That's odd, it's working for me on Chrome 72 on Windows 10.

[darKnight]

@vsync : shift + mouse click and drag does not work on tocuhpad of Apple Macbook Pro. Any suggestions for this?

[darKnight]

@vsync - I am not sure what you mean? Macbook is not a touch enabled device! I want to test iPad behaviour on my Macbook using Chrome Dev Tools.

[vsync]

@maverick - Macbooks supposed to have multi-finger trackpad gestures.

[darKnight]

@vsync - Yes, but the gestures have no effect on the webpage when viewed through the Chrome Dev Tools emulator..

[vsync]

@maverick - Try following this guide, maybe it will solve it

[darKnight]

@vsync: The guide seems to be for older versions of Chrome, as I can't see the options given there in the latest Chrome version.

[Sukhpreet Singh Alang]

Weird thing is this seems to zoom in even when the viewport meta tag is set to user-scalable=no

[vsync]

@catamphetamine - just tried and it works. You need to make sure you're in device-mode

[MacK]

It does not work as the people intend to use it, the shift click emulates only the document zoom gesture. That means it wont work with custom javascript to detect a pinch zoom on, for example, a WebGL canvas or a specific DOM element or any other non-standard ways the gesture is implemented in your frontend project.

[Phil]

... which sucks because you might have an auth provider allowing only localhost redirect url and not the IP of your common network (Wifi) for Mobile and PC, which is used for debugging

[Iman Nia]

@Phil Can’t agree more

[Andrew Scott]

This is a nice & simple idea, especially if you're using your own libs to control the touch[start|move|end] || pointer[down|move|up] event handlers. Plus the pseudo point doesn't need to be at 0,0 either, it's trivial to setup a alternative position via some modified.

[Sfili_81]

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. link-only-answers