Google Chrome Development Tools for Web Apps

I have been doing some web app coding recently and thought I would share some of the helpful development tools that are available in Google Chrome. Especially when coding for multiple devices. I will skip over the basic things that have been in all browsers for a long time like viewing source and get to the goods.

Hit Ctrl+Shift+I if your a Hot Key Ninja or got to options in the upper right hand corner and navigate to More Tools -> Development Tools and you should see this appear on the right hand side of your page.

Now lets go from my favorite feature on down first view on mobile device just click the phone icon

and it will nicely display your web app as it would be viewed on a mobile device

Now lets dive deeper into the mobile options:

Device: Select from a long list of Apple and Android devices to test your mobile application on.

Network: Select different bandwidth simulations to test your app against to see load times

Clicking this will rotate the screen 180 degrees.

Now lets say some items or not lining up correctly and its time to trouble shoot it. The development tools allows you to inspect elements of the page and edit attributes so you can see what effects changes will have on your application user interface in real time.

These development tools should be helpful to anyone developing web apps for todays multi-device world.