AMPBench, an AMP URL Validation and Troubleshooting Application

Debug AMP pages with AMPBench, an open source app from the AMP Project.

Pieter Greyling
Oct 26, 2016 · 4 min read

What does AMPBench do?

AMPBench is an open source web application and service that validates AMP pages and their associated Structured Data at a user provided page URL.

The source code for the service is open for contributions on GitHub at:

A live instance of AMPBench is currently hosted on a Google Cloud Platform Node.js App Engine Flexible Environment at:

https://ampbench.appspot.com/

The latter can be used by the community for ad-hoc testing of AMP pages on the Web. Later in this article I will document how to run (or host) a development or production instance of AMPBench. This documentation is also available on the AMPBench README at GitHub.

AMPBench is written in JavaScript (ES6/2015) with Node.js, is licensed under the Apache 2.0 LICENSE, is not an official Google product, and is part of the open source AMP Project.

During AMP URL validation, AMPBench builds referable, support-friendly, sharable URLs such as the following:

https://ampbench.appspot.com/validate?url=https://ampbyexample.com/

Validation checks point to relevant, contextual documentation

Each section of the AMPBench user interface attempts to guide users to helpful documentation that is relevant for the particular aspect of the AMP URL that is being verified.

Material Design UI

The user interface of AMPBench is built with Material Design Lite.

Responsive results tables support troubleshooting on the move

In order to allow wide format validation results to be comfortably viewed on mobile devices, AMPBench renders output with the Bootstrap framework in responsive, scrollable tables. This means all results can be inspected by simply scrolling the viewport horizontally.

Getting the code and running it on your system (or host)

Install Node.js on your system. This can be done by downloading or by using a package manager or by using NVM. Then do the following from a terminal command-line session:

$ git clone https://github.com/ampproject/ampbench.git
$ cd ampbench
$ npm update
$ npm run start

Or, to watch code changes and automatically restart the server in development mode:

$ npm run monitor

Then try navigating to these links from your web browser:

http://localhost:8080http://localhost:8080/versionhttp://localhost:8080/validate?url=https://ampbyexample.comhttp://localhost:8080/api?url=https://ampbyexample.com

And try these from the command-line:

$ curl http://localhost:8080/version
$ curl http://localhost:8080/raw?url=https://ampbyexample.com
$ curl http://localhost:8080/api?url=https://ampbyexample.com
$ curl http://localhost:8080/api2?url=https://ampbyexample.com

Experimental AMPBench JSON APIs

AMPBench supports some simple, experimental JSON APIs.

Try these from your web browser:

https://ampbench.appspot.com/api?url=https://ampbyexample.comhttps://ampbench.appspot.com/api2?url=https://ampbyexample.com

Or from the command-line:

$ curl https://ampbench.appspot.com/api?url=https://ampbyexample.com
$ curl https://ampbench.appspot.com/api2?url=https://ampbyexample.com

These should produce output similar to the following:

Requesting an AMPHTML Validator reload

The AMPHTML validator is cached at https://cdn.ampproject.org/v0/validator.js.

AMPBench loads a locally cached copy of this file into memory using the amphtml-validator Node.js npm package which supports a validation API.

With the ../command_force_validator_update command we can ask AMPBench to update the locally cached validator source file from the official cache location and then reload the validator code into memory. It will check if a different version, based on a checksum of the contents, is available before doing this.

It can be invoked like this:

http://localhost:8080/command_force_validator_update

Or, from a terminal session like this:

$ curl http://localhost:8080/command_force_validator_update

Utilities

AMPBench includes some useful debug utility commands that can in some cases help with troubleshooting, such as when a full validation fails on a URL by returning unexpected server responses.

The /debug… commands attempt to follow fetch requests and display relevant request and response details in a similar spirit to the curl -I [ — head]… utility.

Use these as follows in the browser:

https://ampbench.appspot.com/debug?url=https://ampbyexample.com

and:

https://ampbench.appspot.com/debug_curl?url=https://ampbyexample.com

Or, with the command-line compatible _cli equivalents, in a terminal session:

$ curl https://ampbench.appspot.com/debug_cli?url=https://ampbyexample.com

and:

$ curl https://ampbench.appspot.com/debug_curl_cli?url=https://ampbyexample.com

The /debug and /debug_cli versions use a smartphone HTTP User Agent, whilst the /debug_curl and /debug_curl_cli variants use the curl (desktop and server-side) User Agent. The applied User Agent string is displayed in the output and can be seen in the resulting HTTP request headers as in the following examples.

For /debug…:

{“User-Agent”:”Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2725.0 Mobile Safari/537.36",”host”:”ampbyexample.com”}

and for /debug_curl…:

{“User-Agent”:”curl/7.43.0",”host”:”ampbyexample.com”}

An example of /debug_curl_cli output can be seen here:

AMPBench is open for contributions

Like the AMP Project as a whole, AMPBench welcomes GitHub Issues and Pull Requests, or any other contributions the community deems useful.

Pieter Greyling

Written by

Senior Developer Advocate and Partner Engineer @ Google (the views expressed here are not those of my employer)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade