Friday, March 7, 2014

Google Chrome and Chrome Canary side-by-side

Chrome Stable
The Google Chrome browser is my prefered browser for surfing and developing.

I like the included developer tools that make it quit funny to inspect CSS, debug JavaScript and trace network connections.

Chrome Canary
Besides the great offerings in the standard version there is also a nightly build of Chrome called Chrome Canary. If you are developing for the mobile, there are some nice additional development tools included.

It is possible to install both versions side-by-side, so you can get the best of both worlds.

Now let us come to the benefits.


Mobile Device Emulation


Mobile Device Emulation Settings

Inside the Chrome Canary development tools there is a special section for developing and testing HTML on mobile devices. You can simulate different devices like "Apple iPhone 5" where the screen area dynamically resizes to aspect ration of the used device. Your mouse cursor will be a mid sized dot to reflect the touch area of your fingertip. You can create touch events instead of normal browser click events.

Trying this on a UI5 app you can directly feel the difference between scrolling using the mouse wheel or using momentum scrolling with your emulated finger touch.

You can try different screen sizes and user agents and also simulate native device sensors to test your app against the accelerometer or geolocation coordinates.

Chrome Canary Sensor Settings

The mobile device emulator feature itself should be a good reason to give Chrome Canary a try.

Update!
The current Chrome release 33.x natively supports the Emulation settings, but you have to enable this feature inside settings:

Settings/General/Appearance/Show 'Emulation' view in console drawer

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.