Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

README.md

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

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.