Simple examples of how Google Developer Tools can aid Mobile Development

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.

a1

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

a2

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

a3

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

a5

 

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

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

a6

 

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

a7

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)

a8

 

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🙂

 

One thought on “Simple examples of how Google Developer Tools can aid Mobile Development

  1. There are several terms which show the growing as vessel as of sensex. These terms permit industry analysis, stocks and shares. When someone talks nigh stockpile industry, then it is must to mouth nigh the BSE sensex. In fact, it has metamorphose virtually a to mouth nigh the BSE sensex stocks these . The collection which is produced on the fundament of deliberate acquire of stockpile industry, BSE sensex directs all the strategies.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s