In this article I will show some simple examples of how Google Developer Tools can be used to help in mobile (responsive) development.

Introduction

Google Developer Tools (F12) within Chrome is one of those things which you *know* is way more powerful that you have ever cared to look at but this week I was introduced to a very cool new feature – thanks to @simonreid123. The ability to control the veiwport and size of the viewing window, as well as being able to throttle the speed of page load has helped me better design a site for mobile. This does not obviously replace real testing on aa real device, but definitely helps !!

The Mobile button in Developer Tools

In this example we are going to look at the BBC website from today. In a normal browser it looks like this.

Bringing up developer Tools (F12) we can see a mobile button on the toolbar

Clicking on that brings up a new view of the page.

Once I do that I can select a “Device” from the menu

 

After then refreshing the page (as it tells me to) I can see the page as if it were an iPad.

I then chose iPhone 4 and got a smaller screen

Across the top you can see the screen width and markers – and in orange the media queries (as specified by the style sheet) where there are going to be changes

 

Dragging the tab to resize the browser you can see the changes on the orange lines

Throttling

Another nice feature is the ability to arbitrarily slow the page load down as if we were on a slow network (more like a phone)

 

Conclusion

This is a very useful and cool feature I was not aware of. I *know* there are many many many other things I do not know about developer tools….it’s all a great learning experience 🙂