AMP’s validation framework is an essential ingredient to ensuring your pages are truly as fast as AMP can make them. Because of this, keeping an eye on the validation status as you develop and deploy AMP pages is a must for any AMP developer. The AMP library provides a built-in validator, but perhaps your fingers have already grown tired of typing “#development=1” as you expand your AMP coverage. Fret no more! Today we’re happy to announce a Chrome extension to assist you in your embrace of a better and faster mobile web through AMP.
AMP Validator Chrome Extension
With the new AMP Validator Chrome extension, you can quickly notice and debug invalid AMP HTML pages. As you browse, it will automatically validate each AMP page visited and give an indication of the validity of the page.
[Editor’s update: We have released a similar extension for Opera. Check it out here.]
When there are errors within an AMP page the extension’s icon shows in a red color and displays the number of errors encountered, like this:
When there are no errors within an AMP page, the icon shows in a green color and displays the number of warnings, if any exist:
When the page isn’t AMP but the page indicates that an AMP version is available, the icon shows in a blue color with a link icon, and clicking on the extension will redirect the browser to the AMP version.
Easily see what errors or warnings the page has by clicking on the extension icon. Every issue will list the source line, source column, and a message indicating what is wrong. When a more detailed description surrounding the issue exists, a “Learn more” link will take you to the relevant page on ampproject.org. For those familiar with “#development=1”, you’re right, this is exactly the same information you would see in the console but more easily accessible and pretty too.
Posted by David Sedano, Software Engineer, Google