Emulating devices with Chrome

over 3 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 ShinJeff Shin, over 3 years ago (edited over 3 years ago )

    Oops. Fucked up the image embedding.

    3 points
  • Colm TuiteColm Tuite, over 3 years ago

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

    3 points
  • Adam WAdam W, over 3 years ago

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

    3 points
  • Will FroelichWill Froelich, over 3 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, over 3 years ago (edited over 3 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, over 3 years ago

    This is amazing. Much thanks & upvote.

    1 point
  • Andy LeeAndy Lee, over 3 years ago

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

    1 point
  • Matt SharpeMatt Sharpe, over 3 years ago

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

    1 point
  • Alec MolloyAlec Molloy, over 3 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, over 3 years ago

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

    1 point
  • Brian BehrendBrian Behrend, over 3 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, over 3 years ago (edited over 3 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