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

choo-devtools

v3.0.4

Published

Console devtools for Choo

Downloads

349

Readme

choo-devtools stability

npm version build status downloads js-standard-style

Console devtools for Choo. Useful for inspecting the state of applications, tuning performance, and quick iteration. No installation needed means it works in all browsers and Electron! :sparkles:

Usage

var choo = require('choo')

var app = choo()
if (process.env.NODE_ENV !== 'production') {
  app.use(require('choo-devtools')())
}
app.mount('body')

API

var devtoolStore = require('choo-devtools')(opts)

This module exposes a function that return a choo store. The function accept a single option argument, with the following properties:

  • filter: A function to filter events for the devtools logger. The filter function accept three arguments eventName, data, timing and should return true (the event will be logged) or false (the event wont be logged).

Commands

choo.help

Print out information about all commands.

❯ choo.help

choo.state

Log out the Choo state object.

❯ choo.state

choo.debug

Log all state modificiations using object-change-callsite. Logs out the key, value, and stack trace for the change. Useful when you're dealing with unexpected values in your state. Especially useful when enabling asynchronous stack traces in the devtools.

// Enable debugging
❯ choo.debug

// Disable debugging
❯ choo.debug = false

choo.storage

Log out information about the browser's storage capabilities.

❯ choo.storage

choo.log

Log out the last 150 events that occured in Choo. Useful during debugging to quickly figure out which sequences of events were responsible for the current state.

❯ choo.log

To enable state snapshots on each event, call choo.debug. Be warned that this may severely impact performance – it's recommended to only use this for debugging state.

choo.copy([selector])

Serialize the current state to JSON and copy it to the clipboard. Can be passed a selector (such as href) to do a partial copy. Useful if you want to create a test based on the current application state.

// Copy all of state.
❯ choo.copy()

// Copy `state.href`.
❯ choo.copy('href')

choo.routes

Get an array with the registered routes.

❯ choo.routes

choo.perf[type]

Log out performance metrics for Choo. There are different types of entries we can show:

  • choo.perf.all Log out all data.
  • choo.perf.core Only log out data about Choo's built-in methods.
  • choo.perf.events Only log out information about the event bus.
  • choo.perf.components Only log out information about components.

License

MIT