https://github.com/ilicmarko/devtools-timeline-images

Extract images from Chrome DevTools report.
https://github.com/ilicmarko/devtools-timeline-images

chrome devtools extract images

Last synced: about 1 year ago
JSON representation

Extract images from Chrome DevTools report.

• Host: GitHub
• URL: https://github.com/ilicmarko/devtools-timeline-images
• Owner: ilicmarko
• License: mit
• Created: 2019-03-29T09:26:30.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-22T16:42:36.000Z (almost 4 years ago)
• Last Synced: 2025-04-03T21:19:48.567Z (about 1 year ago)
• Topics: chrome, devtools, extract, images
• Language: JavaScript
• Size: 98.6 KB
• Stars: 46
• Watchers: 1
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


Devtools Timeline Exporter




    



A really small utility to extract images from Chrome Timeline.

## Installation

```bash

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

```bash

dte images  [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  [options]`.

### Video

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

```bash

dte video  [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  [options]`.

## Options

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

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

## Example

```bash

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

```

## Save a recoding

![Save recoding](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/imgs/save-profile.png)

More information at [Google Developer Docs](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#save)