Devtools Timeline Exporter

A really small utility to extract images from Chrome Timeline.

Installation

yarn global add devtools-timeline-images
# or NPM
npm i -g devtools-timeline-images

Usage

As of v2 CLI includes and alias for the name, dte (Devtools Timeline Export). This has been changed as in the future there is a plan to export videos, not only images.

Image

dte images <input> [options]

Generate sequence of images.

Options:
  --version     Show version number                                    [boolean]
  --output, -o  Path to JSON file generated by Chrome.       [string] [required]
  -h, --help    Show help                                              [boolean]

Also you can generate images with an alias i, like this: dte i <input> [options].

Video

With a video command you can instantly generate a slowdown video of the loading progress.

dte video <input> [options]

Generate slowdown video from the timeline export.

Options:
  --version     Show version number                                    [boolean]
  --output, -o  Video file name to export.                   [string] [required]
  -h, --help    Show help                                              [boolean]

Also you can generate a video with an alias v, like this: dte v <input> [options].

Options

• -o or --output - Specify the output folder.

Note: If the output directory does not exist the CLI will create it.

Example

dte i ./example-site.json -o ./images

Save a recoding

More information at Google Developer Docs