GitHub - cowchimp/headless-devtools: Lets you perform Chrome DevTools actions fr...
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
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
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK