Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bring up mobile keyboard in chrome dev tools?

I'm trying to test which keyboard type comes up by default for certain inputs on iOS and Android. Is there a way to bring up the on screen keyboard in Chrome devtools phone simulator?

So far I have tested the iOS version of my website by running the xcode simulator and pointing to my website but it would be really convenient to use devtools.

like image 243
Javed Ahamed Avatar asked Jul 15 '16 00:07

Javed Ahamed


People also ask

How do I open the mobile keyboard in Chrome?

Open Chrome, navigate to the debug host page for your keyboard, and press F12. Back in the debug host page, select the appropriate device from the mobile emulation toolbar, then press F5 to reload and enable the touch mode.

Can you use Chrome dev tools on mobile?

Developer Tools are pre-installed in every Safari (on iOS) and Chrome (on Android) browser. There's no need to acquire the right devices, plug in the USB, or modify any settings. Simply pick your preferred deviceā€”or switch devicesā€”and debug instantly.


1 Answers

Update: šŸ™ Virtual keyboard support is deprecated in Chrome 68+; this answer no longer works.


Original answer

You can view the standard keyboard for the Nexus 5X device for the portrait or landscape view:

DevTools Nexus 5X Keyboard

However, you can't interact with it, nor does it change based on the context it is called from. I found by inspecting DevTools that it is simply an image file overlayed onto an SVG. There's nothing smart going on with these profiles. It's just useful to look at how the app responds to the reduced space.

DevTools Keyboard Inspect

To test the proper behaviour of keyboards with context, I would just recommend using XCode and Android emulators, or better still use real devices.

See: Test Responsive and Device-specific Viewports

like image 72
Gideon Pyzer Avatar answered Oct 12 '22 04:10

Gideon Pyzer