Lets you perform Chrome DevTools actions from code by leveraging Headless Chrome+Puppeteer.
Chrome DevTools is great for getting valuable information about your app 🕵️♂️.
Using headless-devtools you can automate this process 🤖.
One use-case is to collect this data over time 📈, which can help you keep your app in good health 👩⚕️.
Some tools that provide similar metrics work by executing right after the page loads. This can lead to a skewed perception because these metrics don't mean much unless the user has interacted with the page (some CSS rules weren't applied, JS wasn't executed, etc.).
To fix this, headless-devtools lets you mimic the user interacting with the page before\during when data is collected.
If you'd like to learn more about why this kind of tool is useful and how it works, check out this blogpost.
- calcUnusedCss - Calculates the percentage of unused CSS of a webpage after user interaction
- takeHeapSnapshot - Takes a snapshot of a webpage's JS heap
- Suggest more features by opening up an issue! 🎉
Calculates the percentage of unused CSS of a webpage.
Notice in the example how you can use Puppeteer to mimic user interaction and trigger CSS rules.
const puppeteer = require('puppeteer');
const { calcUnusedCss } = require('headless-devtools');
(async function() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const interactionCallback = async function(page) {
const url = 'https://unused-css-example-site-qijunirqpu.now.sh';
await page.goto(url);
await page.click('.tab.type2');
await page.click('.tab.type3');
await page.click('.tab.type4');
};
const unusedCSS = await calcUnusedCss({ page, interactionCallback });
console.log(`${unusedCSS}% of your CSS is unused`); // 15% of your CSS is unused
await browser.close();
})();If you don't care about mimicking user interaction, use this simplified notation:
const { calcUnusedCss } = require('headless-devtools');
(async function() {
const unusedCSS = await calcUnusedCss('https://unused-css-example-site-qijunirqpu.now.sh');
console.log(`${unusedCSS}% of your CSS is unused`); // 55% of your CSS is unused
})();DevTools Protocol API: CSS.startRuleUsageTracking
Takes a snapshot of a webpage's JS heap.
The raw snapshot data is available for further analysis. Just save rawSnapshotData to file, open up regular DevTools in your browser and right-click on the left hand side of the Memory panel, and choose "Load...".
const { takeHeapSnapshot } = require('headless-devtools');
const prettyBytes = require('pretty-bytes');
const fs = require('fs');
const heapSnapshot = await takeHeapSnapshot('https://google.com');
console.log(prettyBytes(heapSnapshot.totalSize)); // 8.96 MB
fs.writeFileSync('homepage.heapsnapshot', rawSnapshotData.rawSnapshotData, 'utf8');DevTools Protocol API: HeapProfiler.takeHeapSnapshot
headless-devtools requires Node.js 7.6 or greater because it relies on async\await.
Run tests with npm test
- Paul Irish's automated-chrome-profiling
MIT