Responsive web design testing made easy with Chrome

by Dime Pashoski.

Recently Google made a big addition to their developer tools with the responsive design emulator, currently available only via Chrome Canary.

Google introduced the responsive design emulator in Chrome Canary 38 and made a huge step forward in chross-device testing.

Siyelo screenshot

To bring up the emulator just click the mobile phone icon in the code inspector. Additionally you can bring up the console and go to Emulation.

Some of the great features it offers:

  • Device screen emulation: easily choose a device to emulate from a large list of real phones, tablets and few generic laptop monitors, or you can resize the preview window manually. Another great feature is setting the pixel density to simulate retina or AMOLED screens.

  • Network emulation: to round up the authentic testing we have the option to simulate network speeds and see how long your site will load on 3G or fiber.

  • Media Queries debugging: test and debug your media queries individually, without the hassle of chasing your breaking points manually. The tool is smart enough to catch all queries and group them by the breaking points you defined in your code.

Chrome Canary is a standalone browser that offers the newest Chrome features and tools, and is aimed mainly towards developers.