Debug with the extension


Once we have set up our pattern library we can use the browser extension to start debugging real-life production pages.

Pick a debugging target #

For the purposes of this tutorial, our first "real-life production page" to debug is rather simple:

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

This page can be hosted anywhere and it could even be just a file on your computer. It contains a single button and some styles - just enough to maybe cause a problem with regards to the color palette. Did you spot it? Let's see if Warhol can.

Use the extension to find bugs #

Open the page in Chrome, open the DevTools, navigate to the "Warhol" Tab and log in 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. The results are shocking: it appears that there is something not quite right with our project!

To find out what's wrong we can click the tab with the title “1 report” in the devtools or click the red overlay on the button itself (which sadly only works when the devtools panel is open). This takes us to the detailed error report:

We used white on the button's color property, which is not allowed by the pattern library - hence the error. Once we change the color property to #EEEEEE (or any other CSS color value that computes to the same RGB result), the error is gone:

To get a better idea of all the design bugs that are not there, we can tick the checkbox labeled “OK”. This sets up the report filters to display not only error reports, but also list all the elements that are positively confirmed to follow the pattern library:

And this is how you use Warhol's browser extension to find even small design errors on your production web page! Time to up the ante and define some real components and not just a color palette.

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.