Skip to content

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

Notifications You must be signed in to change notification settings

cowchimp/headless-devtools

Repository files navigation

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

Related projects

License

MIT

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published