Tip #1111: Fake mobile devices

When Scott “Mr Ribbon Workbench” Durow was delivering his “Typescript or Die” presentation at CRMUG EMEA last month, he stunned the audience by showing his phone right on the screen without any pairing.

He tricked everyone, of course; I don’t believe he even has an iPhone. Turns out, Google Chrome has a not-so-obvious menu when you render things for a predefined form factor.

  • Open a site in Chrome
  • Press Ctrl-Shift-I to get developer tools (or F12)
  • Press Ctrl-Shift-M to get a mobile toolbar. You should see something like this:
    Site in iPhone in Google
  • Click on triple-dot menu (have no idea how is it called but it’s not a waffle or burger. Waffger? Burfle?), then click on Show Device Frame
    Show device frame
  • You now have an iPhone!
    iPhone frame in Chrome

I was hoping for custom frames for all the devices but seems that this art form is reserved for the fruity family.

6 thoughts on “Tip #1111: Fake mobile devices

  1. JohnSmith says:

    You can also use Firefox for that since their developer tool is really good (I find it better than Chrome). You can even simulate how good is the data (2G, 3G, 4G etc.)

  2. Chris says:

    HAAAAHAHAHA THATS AWESOME!!!

  3. EY Kalman says:

    The 3 dots menu button is called an ellipse 🙂

  4. Joe says:

    This is neat. However, “Show device Frame” is greyed out on my machine. Any reason for that you can imagine?

Leave a Reply

Your email address will not be published. Required fields are marked *