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.

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.