How to simulate pinch zoom in Google Chrome?

chrome simulate pinch zoom
chrome pinch zoom
chrome dev tools pinch zoom
chrome simulate zoom
show device frame chrome not working
chrome simulate touch zoom
chrome mobile pinch zoom
chrome emulator online

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

Shift + mouse click & drag across the viewport

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

How to simulate pinch zoom in Google Chrome?, zoom pressing 'Toggle Device toolbar' at dev tools and after hold SHIFT and click-drag your mouse. Run it and it'll immediately disable pinch to zoom gesture in Google Chrome browser. If you want to re-enable pinch to zoom gesture, right-click on EXE file icon in Taskbar notification area and select Exit option. PS: Since its a portable utility, you'll need to launch it every time you restart Windows. If you want it to automatically start with Windows, you can add its shortcut to Windows startup list.

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.

How to disable the pinch-zoom gesture on Windows laptops, 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. Google has enabled pinch-to-zoom in the Chrome Canary channel for Windows. The feature works in both the desktop and metro experiences on Windows 8 as well as Windows 8.1. The addition was first

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

Touch Event Emulation with Chrome, No more 2 finger gestures on device emulator. View entire discussion ( 3 comments). More posts from the webdev community. 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

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.

How to simulate pinch zoom in Google Chrome?, Google Chrome is a fantastic browser and provides a nice way to achieve this with the Developer Tools. Activate the Developer Tools with CMD+ALT+i (OSX) or  Google Chrome is a fantastic browser and provides a nice way to achieve this with the Developer Tools. 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. You're done.

The last answer has five negative votes, but what I want to say is that the latest chrome browser(78) on Android platform does not have the function of zoom. You may have some problems with your understanding of viewport. The scale of viewport is pinchzoom. If you set it like this, your web page cannot trigger pinchzoom.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Your can set this way in your webpage

<meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes">

The other answers have already said that shortcuts for pinch zoom.

Is there a way to simulate a pinch zoom in a browser? (ie in Chrome , 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. A quick look at how to enable Chrome's useful new Emulation Mode to emulate dozens of mobile devices. your mouse to emulate pinch iPhone or iPad but will not attempt to simulate the

How To Emulate Touch Events in Chrome, So, I know that Chrome on touch screen devices (like Android phones that I believe is called pinch zoom, which is different from the conventional to enable that feature without using the Device simulation, with flags or an  Zoom the viewport. Use the Zoom list to zoom in or out. Figure 15. Zoom Throttle the network and CPU. To throttle the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list. Figure 16. The Throttle list Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal.

Simulate Mobile Devices with Device Mode in Chrome DevTools, Chrome has made debugging Touch possible and easier on the desktop mouseup , and mousedown – Google Chrome allows us to emulate  je développe une fonction pinch zoom pour une application mobile écrite en javascript et je veux le tester dans Google Chrome avec la fonction d'émulation de l'appareil mobile. Mais je ne peux pas trouver un moyen de tester un geste de pincement.

How to simulate pinch zoom in Google Chrome?, Pinch and Zoom on mobile works well. However it is also possible to use pinch and zoom on desktop (my setup: Mac trackpad + Chrome).

Comments
  • 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
  • This isn't working for me on Chrome 72. Has something changed?
  • @nnyby That's odd, it's working for me on Chrome 72 on Windows 10.
  • @vsync : shift + mouse click and drag does not work on tocuhpad of Apple Macbook Pro. Any suggestions for this?
  • @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.
  • I don't want to zoom the website, I want to test the two-finger-pinch-zoom-gesture for mobile devices.