Emulating devices with Chrome

4 years ago from

Maybe a lot of people know of this already, but I definitely only found out about this this past week, so I thought I'd share.

There's a really easy way to emulate devices / browser sizes, so you don't have to manually resize the browser, or download some extension to do spoofing, and is a viable alternative to iOS simulator.

Open up Chrome's inspector tool, click the gear icon, and turn on 'Show 'Emulation' view in the console drawer'.

Then, open up the console, and switch to the emulation tab, where you can emulate devices / user agents, set resolutions, even set the pixel ratio.

Hope this helps some people.

20 comments

  • Jeff Shin, 4 years ago (edited 4 years ago )

    Oops. Fucked up the image embedding.

    3 points
  • Colm TuiteColm Tuite, 4 years ago

    I can't figure out who I love more, you or Chrome.

    3 points
  • Adam WAdam W, 4 years ago

    awesome. now if chrome could emulate decent font rendering, we will be set!

    3 points
  • Will FroelichWill Froelich, 4 years ago

    Something to point out is that this doesn't also mean all fonts and browser quirks are emulated properly. This definitely helps you work quickly without having to keep a bunch of browsers open but don't count on it for accuracy.

    2 points
    • Ian GoodeIan Goode, 4 years ago (edited 4 years ago )

      This. I used it to quickly prototype a relatively simple game recently and learned two things:

      1. There are still lots of things the Chrome emulator doesn't replicate. I ran into issues with typography sizing and relative element sizing (%, em, etc)
      2. You have to bear in mind that the Chrome emulator is running on a more powerful machine than a smartphone, and likely with a better internet connection.

      It's still a great tool though and a massive timesaver. Really nice addition to your mobile toolset. Wouldn't use it as an alternative just yet.

      0 points
  • Vladislav ArbatovVladislav Arbatov, 4 years ago

    This is amazing. Much thanks & upvote.

    1 point
  • Andy LeeAndy Lee, 4 years ago

    Mind...blown. Thanks so much for this!!!

    1 point
  • Matt SharpeMatt Sharpe, 4 years ago

    Thank you nice sir, this is definitely something I'm going to use in the future!

    1 point
  • Alec MolloyAlec Molloy, 4 years ago

    Damn. When did this happen? I've been emulating user agents using the developer tools, but this is a whole different level of cool.

    1 point
  • Simon EvansSimon Evans, 4 years ago

    Really useful, little gems like this are what makes this place great!

    1 point
  • Brian BehrendBrian Behrend, 4 years ago

    Good overview. Been using it for a while and it's very helpful. Though I still test responsive sites mostly in just a narrow window rather than emulation view. On my Windows 7 PC, emulation view either has memory leaks or some other issue that cause freezing/crashing.

    0 points
  • David BroderickDavid Broderick, 4 years ago (edited 4 years ago )

    I must be doing something wrong. Whenever I emulate a device, it doesn't scale down properly. It makes the window smaller but leaves the content as is, give or take some random glitches.

    pic: https://app.box.com/s/cq1oibrokl87rfu1dmpf

    0 points
    • Jared KennedyJared Kennedy, 4 years ago

      Was having the same problem

      While in the 'Emulation' tab click 'Screen' and unselect 'Emulate Viewport'

      0 points
      • David BroderickDavid Broderick, 4 years ago

        Awesome! This worked—thanks so much

        0 points
      • Nathan CooperNathan Cooper, 4 years ago (edited 4 years ago )

        This worked for me, but it only solved the problem in emulation, but not on an actual device. I discovered I was missing a meta tag in the head, i.e.,

        meta name="viewport" content="width=device-width, initial-scale=1.0"

        With that tag, you can check 'Emulate Viewport' and get the expected result in emulation, but more importantly, you get the expected result on a device.

        0 points
    • Jared KennedyJared Kennedy, 4 years ago

      https://developers.google.com/chrome-developer-tools/docs/mobile-emulation/viewport-emulation.gif

      0 points
    • Nathan CooperNathan Cooper, 4 years ago

      I was encountering this issue as well and discovered I was missing a necessary meta tag in the head, i.e.,

      meta name="viewport" content="width=device-width, initial-scale=1.0"

      If you don't have it in your's, trying adding it and see if it works for you too. That should solve the problem, in both emulation and on a device.

      0 points