Inspector’s Device Mode – render pages as mobile devices will

I recently stumbled upon a feature in Chrome’s Inspector Tools which is extremely handy for web developers.

Previously, I had been resizing my browser window to mimic what each web page would look like on mobile devices to see how my responsive design was working.

However, there’s a much better way. If you click on the mobile phone icon, a new display comes up showing the size of a mobile device display and how the page will look on that device.

Inspector Tools' Mobile view option

It comes with several presets for about 40 of the most common mobile devices, including iPhones, iPads and the Samsung Galaxy series of phones.

If you want to be really fancy, you also have the option of modeling how the page will load over certain network conditions, like EDGE, 3G and 4G, to get a feel for how it might feel to your readers trying to load your site.

I’ve found this to be a really useful tool in my web development work, so if you do any sort of work with websites, this is a really handy tool to know about.

Read more from Chrome’s Devtools

By Dave

Dave is the proud father of Ellie and Jack. There's nothing that makes him happier than spending time with his incredible wife and their amazing children. He's a civil/mechanical engineer and he also builds and maintains WordPress websites.

One comment

  1. Hey Dave, great and timely article, especially considering Google’s roll-out of the “mobile friendly” tag on search results. I noticed the mobile device feature as well a couple of weeks ago. This should be in every site developer’s main toolbox. :D

Leave a Reply