Debug with the extension


Once we have set up our pattern library we can use the browser extension to start debugging real-live production pages. For the purposes of this tutorial, our "real-live production page" is rather simple:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Production</title>
<style>
button {
  background: navy;
  color: white;
}
</style>
<button>Click!</button>

This page can be hosted anywhere and if could even be just a file on your computer. It contains just a single button and some styles. Lets see what Warhol thinks about the use of the color palette in this page!

Open the page in chrome, open the DevTools, navigate to the "Warhol" Tab ad log with your Warhol Account. Once logged in, you will find yourself on the "Collections" tab inside the Warhol DevTools Panel. The extension will automatically update the list of available pattern libraries - if this does not happen or you want to manually trigger an update, try the button labeled "reload list". If all goes well, you should see your pattern library now:

The button "download and activate" loads the actual pattern library data into the extension and instantly triggers the first run.