npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

devtools-timeline-model-custom

v1.4.1

Published

Parse raw trace data into the Chrome DevTools' structured profiling data models

Downloads

5

Readme

devtools-timeline-model Build Status

Unsupported.

Now we recommend you use another library for parsing traces.. See https://github.com/jlfwong/speedscope/blob/main/src/import/chrome.ts and https://github.com/saucelabs/tracelib and https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/lib/tracehouse

Cheers


Parse raw trace data into the Chrome DevTools' structured profiling data models

If you use something like big-rig or automated-chrome-profiling you may end up with raw trace data. It's pretty raw. This module will parse that stuff into something a bit more consumable, and should help you with higher level analysis.

Install

$ npm install --save devtools-timeline-model

NPM devtools-timeline-model package

Usage

var filename = 'demo/mdn-fling.json'
var events = require('fs').readFileSync(filename, 'utf8')

var DevtoolsTimelineModel = require('devtools-timeline-model');
// events can be either a string of the trace data or the JSON.parse'd equivalent
var model = new DevtoolsTimelineModel(events)

// tracing model
model.tracingModel()
// timeline model, all events
model.timelineModel()
// interaction model, incl scroll, click, animations
model.interactionModel()
// frame model, incl frame durations
model.frameModel()
// filmstrip model, incl screenshots
model.filmStripModel()

// topdown tree
model.topDown()
// bottom up tree
model.bottomUp()
// bottom up tree, grouped by URL
model.bottomUpGroupBy('URL') // accepts: None Category Subdomain Domain URL EventName

// see example.js for API examples.

image

These objects are huge. You'll want to explore them in a UI like devtool. image

Dev

npm i
brew install entr
gls index.js lib/*.js | entr node example.js

Sandboxing WebInspector for Node

Requiring the DevTools frontend looks rather straightforward at first. (global.WebInspector = {}, then start require()ing the files, in dependency order). However, there are two problems that crop up:

  1. The frontend requires ~five globals and they currently must be added to the global context to work.
  2. utilities.js adds a number of methods to native object prototypes, such as Array, Object, and typed arrays.

devtools-timeline-model addresses that by sandboxing the WebInspector into it's own context. Here's how it works:

index.js
// First, sandboxed contexts don't have any globals from node, so we whitelist a few we'll provide for it.
var glob = { require: require, global: global, console: console, process, process, __dirname: __dirname }
// We read in our script to run, and create a vm.Script object 
var script  = new vm.Script(fs.readFileSync(__dirname + "/lib/timeline-model.js", 'utf8'))
// We create a new V8 context with our globals
var ctx = vm.createContext(glob)
// We evaluate the `vm.Script` in the new context
var output = script.runInContext(ctx)
(sandboxed) timeline-model.js
// establish our sandboxed globals
this.window = this.self = this.global = this

// We locally eval, as the node module scope isn't appropriate for the browser-centric DevTools frontend
function requireval(path){
  var filesrc = fs.readFileSync(__dirname + '/node_modules/' + path, 'utf8');
  eval(filesrc + '\n\n//# sourceURL=' + path);
}

// polyfills, then the real chrome devtools frontend
requireval('../lib/api-stubs.js')
requireval('chrome-devtools-frontend/front_end/common/Object.js')
requireval('chrome-devtools-frontend/front_end/common/SegmentedRange.js')
requireval('chrome-devtools-frontend/front_end/platform/utilities.js')
requireval('chrome-devtools-frontend/front_end/sdk/Target.js')
// ...
index.js
// After that's all done, we pull the local `instance` variable out, to use as our proxy object
this.sandbox = ctx.instance;

Debugging is harder, as most tools aren't used to this setup. While devtool doesn't work well, you can have it run lib/devtools-timeline-model.js directly, which is fairly succesful. The classic node-inspector does work pretty well with the sandboxed script, though the workflow is a little worse than devtool's.

License

Apache © Paul Irish