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!