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:

  1. Open a web page in Chrome.
  2. Press Ctrl+Shift+i to open the developer tools panel at the bottom of the Chrome window.
  3. Click the settings icon (a cog) at bottom right of the developer tools panel.
  4. Click the ‘User Agent’ tab.
  5. Select the ‘Override User Agent’ check box.
  6. Choose a browser and version from the dropdown selection.
  7. 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.
  8. If you want to further tweak the size of the viewport, change the ‘Screen Resolution’ values.
  9. 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? :)

Ha ha, no. The Confluence mobile features are already visible in the beta release notes.

Tsk tsk Google

A very nice feature, but watch those inconsistent caps. :D

About these ads

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 9 August 2012, in technical writing and tagged , , , , , . Bookmark the permalink. 10 Comments.

  1. Very cool!

    I had no idea Chrome could do this.

    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.

    I’ll give this a try!

    Thanks for the tip.

    • Hallo writerdood :)

      I’m so glad it’s helpful. I’ve also found it strangely satisfying, to see a small and neat mobile interface interacting with me on “the big screen”!

      Cheers, Sarah

  2. Very cool. I didn’t know about this Chrome feature. Thanks!

  3. Very useful! Thanks Sarah!

  4. Good reminder! It is a sweet thing.

    > Refresh the screen (press F5)

    Windows only, that. Command R on a Mac

    https://support.google.com/chrome/bin/answer.py?hl=en&answer=165450&topic=25799&ctx=topic

    ~Matt

  5. Yep, we use the user agent feature in Safari – same idea…

  1. Pingback: A Smattering of Selenium #109 « Official Selenium Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,389 other followers

%d bloggers like this: