81

GitHub - cowchimp/headless-devtools: Lets you perform Chrome DevTools actions fr...

 6 years ago
source link: https://github.com/cowchimp/headless-devtools
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

  • 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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK