Mobile site debugging using Google Chrome as an iPhone browser

Here’s a little trick to help you debug and test mobile sites in Google Chrome.

This tip is mainly useful for sites that offer different behaviours dependent on your browser. I also like to use Chrome as I often need to use some proprietary Chrome extensions for my daily work.

Get Chrome to tell the server it’s an iPhone

  1. Open the site in Chrome
  2. Open Developer Tools (Ctrl+Shift+I)
  3. Click the Settings cog in the bottom right
    Google Chrome Developer Tools Settings Cog
  4. Select “Override User Agent” and select the desired OS from the list
    Google Chrome Custom User Agent dropdown
  5. Refresh the page

The site you are looking at will now think you are browsing it using an iPhone with iOS5.

You’re not limited to iOS, there’s Android, Blackberry and others in there. Curiously no Android 4 yet.

Still, happy mobile debugging :-)