Using Chrome Developer Tool for Responsive Design Testing

By: Slav Kurochkin

In my current project we reached the point when we trying to present ourself everywhere iOS, Android and of cause Web. But wait what if I want navigate web application throw mobile browser how would it works, well it is depend how Responsive your website. But then i need so many devices mobile, tablets, iOS, Android. Screw it, it is going to take half day just open web site on all available devices. So what is the solution? I like Chrome and developer tool they providing and then that "Device Mode & Mobile Emulation" is great and easy to understand.

First off all lets open it:

Now enable emulation

First thing I would recommend to do it is customize settings for you brake points. For example in our project one of the parameters was tablet with resolution 1024x641. Instead of typing all the time values, you can save your own custom settings. So every time you need to make sure that Chrome rendering properly page for that side you just select in drop down, here is how to do it:

First pull Emulation bar, by click on the menu icon located in the top right conner. Sometimes bar is hiding so you need kind of pull it up and there we go you ready to make your fist customization.

Specify resolution in my case it was 1024x641 and click "Save as" button, then you will able to find it in the list of available devices

Also you can rotate screen and by unselecting "fit" checkbox you can actual size

Another pretty handy fetcher you can throttle network and replicate different network speed, so you can see how fast your page rendering while loading.

You can find more information in documentations provided by Chrome Developers.

View Comments

Leave a Comment

Use markdown or basic HTML and be nice.