How to Preview Google AMP Pages in Chrome for Mac/Windows

This quick tutorial is targeted towards non-developers (designers, publishers, editors, product managers) in an organization building Google AMP pages.

In building AMP-compliant pages, you’ll want to test the output. Unless you keep a drawer full of different devices for testing, here’s a quick and easy way to simulate the experience on a desktop in Chrome.

You can also use this method for helping executives and other non-technical stakeholders preview your work.

Step 1: Open Chrome and enter Developer Mode

Either use the View > Developer > Developer Tools menu or hit Option-Command-I.

Step 2: Make Sure you’re in Device Mode

Click the little mobile icon in the right pane or Command-Shift-M. You may need to refresh the page.

Step 3: Select the device you’d like to simulate

Step 4: Go to the desired URL

If you’re just playing around and want to see what the AMP experience will be like, go to http://g.co/ampdemo and search for a recent event like “Apple earnings”.

The AMP cards (pictured under “Top Stories” above), are all AMP pages. Swipe left and right or tap on one.

Step 5: Scroll up/down and left/right

You can scroll left and right among search results very quickly, or up/down within an actual article.

And that’s it!


601am is a digital agency working with publishers, media companies and brands that act like publishers, providing user experience design, development, marketing and support. Learn more about us at 601am.com or contact us to talk.