choo-devtools
v3.0.4
Published
Console devtools for Choo
Downloads
349
Readme
choo-devtools
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 returntrue
(the event will be logged) orfalse
(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.