---
title: "Generating filmstrip using puppeteer for better debugging"
description: "Generating filmstrip using puppeteer for better debugging"
canonical_url: "https://www.bigbinary.com/blog/generating-filmstrip-using-puppeteer-for-better-debugging"
markdown_url: "https://www.bigbinary.com/blog/generating-filmstrip-using-puppeteer-for-better-debugging.md"
---

# Generating filmstrip using puppeteer for better debugging

Generating filmstrip using puppeteer for better debugging

- Author: Rohit Kumar
- Published: May 24, 2018
- Categories: Misc

We are writing a lot of automation tests using
[Puppeteer](https://github.com/GoogleChrome/puppeteer).

Since puppeteer scripts execute so fast certain tests fail when they should be
passing. Debugging those tests can be a challenge.

Chrome devtools comes with
[filmstrip feature](https://www.youtube.com/watch?v=r1LVAu1BB8Y). In
"Performance" tab we can see screenshots of the site as they change over time.

We wanted puppeteer to generate similar filmstrip so that we can visually
identify the source of the problem.

It turns out that puppeteer makes it very easy. Here is the full code.

```javascript
import puppeteer from "puppeteer";

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 1024 });

  await page.tracing.start({ path: "trace.json", screenshots: true });

  await page.goto("https://www.bigbinary.com");
  await Promise.all([
    page.waitForNavigation(),
    page.click("#navbar > ul > li:nth-child(1) > a"),
  ]);

  await page.tracing.stop();

  await browser.close();
})();
```

If we execute this script then it will generate a file called `trace.json`. This
file has images embedded in it which are base64 encoded.

To see the filmstrip drag the `trace.json` file to "Performance" tab in the
Chrome devtool. Here is a quick video explaining this.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/hZGTIyc3Xak"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

## Links

- [Human page](https://www.bigbinary.com/blog/generating-filmstrip-using-puppeteer-for-better-debugging)