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

Chrome’s Inspector Tools has a really useful tool for web developers which emaulates what a site will look like on various mobile devices, allowing you to debug the site and get it looking right with ease.

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

Author: Dave

Dave is many things. Most importantly, he's a husband and a father to Ellie and Jack. Almost as important, he's British (though he lives in Florida). Following on from there, he's a WordPress developer and civil engineer, has an unhealthy love of hummus, is vegan, likes cider, wants to travel to Iceland and Japan, loves solving puzzles and is a realist.

1 thought on “Inspector’s Device Mode – render pages as mobile devices will”

  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