hd

headless-devtools

Lets you perform Chrome DevTools actions from code by leveraging Headless Chrome+Puppeteer

Showing:

Popularity

Downloads/wk

3

GitHub Stars

545

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

46.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

node npm

headless-devtools

Lets you use Chrome DevTools from code.

npm install headless-devtools

Motivation

Chrome DevTools is an indispensable tool for analyzing your Web application.
headless-devtools lets you automate the process of using DevTools.
This is useful for gathering data over time, writing tests, etc.

Usage

headless-devtools is designed to be used together with Puppeteer.
See examples below

API

  • getPerformanceModel - Extracts the data model used the render a trace file in the DevTools Performance Tab
  • getHeapSnapshot - Extracts the data model used to render a Heap Snapshot in the Memory tab
  • Suggest more features by opening up an issue!

getPerformanceModel

Extracts the data model used the render a trace file in the DevTools Performance Tab.
It's useful for calculating your animation's frame-rate programmatically.

const performanceModel = await getPerformanceModel(trace);

const frames = performanceModel.frames();
console.log(`FPS: ${1000 / average(frames.map(x => x.duration))}`);
console.log(`Slowest frame: ${max(frames.map(x => x.duration))} ms`);

// FPS: 43.01310441575974
// Slowest frame: 360.7630000114441 ms

See complete example

getHeapSnapshot

Extracts the data model used to render a Heap Snapshot in the Memory tab.
It's useful for avoiding memory leaks.

const heapSnapshot = await getHeapSnapshot(chunks);

console.log(filesize(heapSnapshot.totalSize));

// 1.59 MB

See complete example

High Level Design

As the Readme for the DevTools codebase states:

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES2015 modules, so consuming this package in other tools may require some effort.

headless-devtools does a bunch of monkey patching in order to make the DevTools frontend code run smoothly in Node.js.

Changelog

2.0.0

  • Add getPerformanceModel.
  • Remove calcUnusedCss. CSS & JS Coverage info is now available in Puppeteer (more info).
  • Remove Puppeteer as a dependency.

Running tests

Run tests with npm test

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100