163

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?

0

3 Answers 3

218

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

9
  • 34
    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
    Commented Apr 7, 2016 at 21:17
  • 23
    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
    Commented Jun 29, 2018 at 19:24
  • 10
    This is deprecated. The virtual keyboard is not more supported. developers.google.com/web/tools/chrome-devtools/device-mode/… Commented May 9, 2019 at 8:52
  • 13
    Im using chromium v79 and can confirm the keyboard IS available for Nexus 5s
    – Marcin
    Commented Jan 31, 2020 at 19:16
  • 18
    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. Commented Nov 29, 2021 at 6:28
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.

4
  • 1
    Works! Not exactly the same as a default keyboard but looks great. Thanks! Commented Oct 1, 2015 at 18:13
  • This is now a dead link, which is a great shame. Exactly what I need too! Grr argh.
    – JPollock
    Commented Aug 31, 2016 at 1:55
  • 1
    This question is close enough: stackoverflow.com/questions/38386215/…
    – JPollock
    Commented Aug 31, 2016 at 2:00
  • 1
    @BryanRayner, nice when links are resurrected. Added redirect.
    – AnthonyVO
    Commented Dec 6, 2016 at 16:43
21

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.

2
  • So what should we do if we don't want to use real phone ?
    – Sky
    Commented Oct 6, 2023 at 14:17
  • Responsively app is a nice free open-source software - responsively.app Not a real emulator, but a real good way to test responsive design. Else you have some paid emulators like mobiletest.me (a free trial is available)
    – migli
    Commented Oct 7, 2023 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.