实现利用Headless Chrome + Puppeteer从代码执行Chrome DevTools 操作
实现利用Headless Chrome + Puppeteer从代码执行Chrome DevTools 操作
Node.js HTTP工具
共534Star
详细介绍
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
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
- Paul Irish's automated-chrome-profiling and devtools-timeline-model
- Lighthouse tracehouse
License
MIT