149

I'm debugging a mobile version of our website through Chrome's Mobile Emulation tool, but cannot figure out how to have an on-screen keyboard pop up when selecting a text field.

I have clicked on the text box, but no keyboard pops up. If I do this on a mobile device, the default input method (keyboard) pops up and allows me to type.

Is there a way to replicate this?

Aaron Hellman
  • 1,741
  • 2
  • 14
  • 16

3 Answers3

209

Chrome developer tools has limited support for emulating different device states:

  • Default browser UI
  • With Chrome navigation bar
  • With opened keyboard

According to the documentation, such feature is only available when emulating “supported devices like the Nexus 5X”.

The complete list of emulated devices that support this feature can be found at Chromium devtools-frontend source-code (mirror on GitHub). Currently, it is only supported by:

  • Nexus 5
  • Nexus 5X

Note that the emulated keyboard and navigation bar are just static pictures (as you can see at the source-code directory) and don't contain any interactive behavior. It is a good enough way to simulate the screen size, but it is not a perfect emulation.

Screenshot of Chrome Developer Tools

Maksim Nesterenko
  • 5,661
  • 11
  • 57
  • 91
Denilson Sá Maia
  • 47,466
  • 33
  • 109
  • 111
  • This works almost perfectly. The keyboard does not use my cursor's location and instead defaults to the navigation bar of the webpage, but the compression of the page works well enough. - Thanks – Aaron Hellman Mar 14 '16 at 18:54
  • 28
    Note that this still does not model the behavior of the keyboard (does not bring up keyboard when selecting an input, does not adjust scroll position). – dlsso Apr 07 '16 at 21:17
  • Note that it won't select the number keyboard if the input type is set to "number". – Guy Feb 26 '17 at 04:44
  • 20
    This appears to have been removed in Chrome 68+ :( No that it would have helped me debugg the Spell check delay bug I'm trying to fix. – Ray Foss Jun 29 '18 at 19:24
  • 8
    This is deprecated. The virtual keyboard is not more supported. https://developers.google.com/web/tools/chrome-devtools/device-mode/#orientation – Rafael S. Fijalkowski May 09 '19 at 08:52
  • 13
    Im using chromium v79 and can confirm the keyboard IS available for Nexus 5s – Marcin Jan 31 '20 at 19:16
  • 3
    Still present in Chrome 93 as of August 2021. And I don't see any indication of it being deprecated at the reference noted above. Rumors of its demise may be exaggerated. ;) – Royce Williams Aug 04 '21 at 15:24
  • 15
    Like many of you, I was confused by this answer; when I click the orientation icon , it just rotated the phone from portrait/landscape. **You have to emulate Nexus 5, which is disabled by default.** Click Dimensions→Edit, check "Nexus 5", then select "Nexus 5" under "Dimensions" menu, and _then_ the orientation icon will show a menu. – Dan Fabulich Nov 29 '21 at 06:28
  • Still works on Nexus 5/5X, but is pretty useless for my purposes. Like @dlsso mentioned, the keyboard doesn't show up / hide in relevant cases like it does on a real mobile. So it doesn't help to debug a whole class of issues. It's only useful for checking how apps/sites handle viewport resizing. Which can also be done by just using the Responsive device. – Gene Pavlovsky Feb 24 '23 at 08:58
21

The closest I have come is using the virtual keyboard extension from: "Chrome Virtual Keyboard"

Note: I had to set it to use the touch events when using it with a Sencha Touch app I was working on.

There are a number of others so just search for "virtual keyboard" in the chrome extensions area and pick what you like.

AnthonyVO
  • 3,821
  • 1
  • 36
  • 41
13

It seems that keybooard emulation is no more available (July 2021)

And the Chrome extensions I tested just add a keyboard but they don't simulate at all any mobile rendering.

migli
  • 2,692
  • 27
  • 32