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.


gChromeDevTools

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


gChromeDevToolsMenu

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


gChromeDevToolsMobile

Now lets dive deeper into the mobile options:


gChromeDevToolsMOpt

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


Rotate

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.


gChromeDevToolsLiveEdit

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