Tuesday, April 24, 2012

Simulate a Mobile Browser using Chrome

When I first started down the road of mobile Web development, I asked around, Googled, and found some wacky, some nice mobile browser simulators that various enterprising individuals slapped together.  Then I discovered that the easiest way to simulate a mobile browser was right in front of my face.  If you already use Chrome, you're just a step away.  All you need to do is override the "User Agent" to instruct the browser to use an agent specific to a device, either by selecting it from a list, or entering the user agent string directly.  Steps:

0. Get Chrome if you don't already have it

1. Click the wrench icon on the top right

2. Goto Tools -> Developer Tools

3. Click the gear icon on the bottom right

4. Find the setting "Override User Agent", check it, and select the browser/device you want to emulate

5. Refresh your page and inspect it.  This is how it will look on the device you chose.  (You'll have to re-size the browser to a phone-ish size if you've selected a mobile phone device)

Don't see the user agent string you're looking for in the list?  Look here (http://www.useragentstring.com/pages/useragentstring.php) for an extensive list of user agent strings you can copy and paste into the free-form textbox.

No comments:

Post a Comment