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? 🙂
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. 😀
Posted on 9 August 2012, in technical writing and tagged Google Chrome, mobile documentation, technical communication, technical documentation, technical writing, user agent. Bookmark the permalink. 11 Comments.
ffeathers 
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
Very cool. I didn’t know about this Chrome feature. Thanks!
Hallo Arwen
You’re welcome! It’s so cool to be able to share something I’ve just learned from a colleague.
Cheers, Sarah
Very useful! Thanks Sarah!
My pleasure Rosemary. I’m glad it’s useful!
Cheers, Sarah
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
Hallo Matt
Thanks for the list of Mac shortcuts for Chrome. Very useful.
Cheers, Sarah
Yep, we use the user agent feature in Safari – same idea…
Can this be used to generate web help for mobile devices. Any open source tool you can refer to for quick mobile output.
Pingback: A Smattering of Selenium #109 « Official Selenium Blog