devtools-timeline-images
Version:
Simple utility to transform exported Chrome devtools timeline json to images.
72 lines (46 loc) • 2.11 kB
Markdown
<p align="center"><img src="https://marko.ilic.ninja/dte.svg" alt="logo" width="450"></p>
<h1 align="center">Devtools Timeline Exporter</h1>
<p align="center">
<a href="https://www.npmjs.com/package/devtools-timeline-images"><img alt="npm" src="https://img.shields.io/npm/v/devtools-timeline-images.svg"></a>
</p>
A really small utility to extract images from Chrome Timeline.
```bash
yarn global add devtools-timeline-images
npm i -g devtools-timeline-images
```
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.
```bash
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]`.
With a video command you can instantly generate a slowdown video of the loading progress.
```bash
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]`.
- `-o` or `--output` - Specify the output folder.
*Note: If the output directory does not exist the CLI will create it.*
```bash
dte i ./example-site.json -o ./images
```
More information at [Google Developer Docs](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#save)