Normal Programming Mistake

    headless-devtools

    2.0.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i headless-devtools

    DownloadsWeekly Downloads

    3

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    4.48 MB

    Total Files

    46

    Last publish

    Collaborators

    • cowchimp