Documenting a mobile interface using Chrome’s user agent setting

I’m documenting the new mobile interface for the upcoming release of Confluence 4.3. At first, I kept grabbing my iPhone to get screenshots. Then a colleague pointed out that I can use the “user agent” setting in Google Chrome to emulate a mobile device. Very handy indeed!

With Chrome’s user agent setting, you can make your desktop browser pretend that it’s something else. It can masquerade as Internet Explorer (and everyone wants to do that 😉 ), Firefox, iPhone, iPad, Android, and other devices.

Here’s how:

Open a web page in Chrome.

Press Ctrl+Shift+i to open the developer tools panel at the bottom of the Chrome window.

Click the settings icon (a cog) at bottom right of the developer tools panel.

Click the ‘User Agent’ tab.

Select the ‘Override User Agent’ check box.

Choose a browser and version from the dropdown selection.

Make sure the ‘Override device metrics’ check box is also selected. This allows Chrome to control the size of the viewport, based on the user agent defaults.

If you want to further tweak the size of the viewport, change the ‘Screen Resolution’ values.

Refresh the screen (press F5) to make sure all the new settings take effect.

Now you can interact with the web page as usual. The web app will think that you are using a mobile device, and will offer the corresponding options.

This is perfect for me. I want to use my desktop to develop content, while documenting a mobile interface. I’ve set the user agent to ‘iPhone – iOS 5’ and tweaked the screen resolution to get good sized images.

This screenshot shows the Chrome developer tools panel at the bottom. The top section contains a web page, viewed as if from a mobile device:

Here’s another screenshot, showing the same developer tools panel at the bottom. I’ve moved to the flyout menu offered by the website when accessed by mobile devices, as you can see in the top part of the Chrome window:

“Upcoming release” – does that mean I’m letting the cat out of the bag? 🙂

I’ve been documenting several mobile interfaces in raw HTML, and I’ve been resizing the browser window to simulate the phone. I test it on the phones too, of course, but when I’m putting it together and don’t want to mess with any of the emulators, Chrome is easy.