On-screen logging utility.
Monkey-patches and chains the browser's
Functionality is driven by
window.ticker, and keyboard chords starting with
This module facilitates an interactive-style of development/non-production logging.
Play with ticker-log: http://jonbri.github.io/ticker-log/
node_modules/ticker-log/dist/ticker.min.js and press
t to see a ticker log.
h to show the quick-help reference.
In your source code, execute:
log function accepts ticker-log invocations (passing in the
` character as the first argument).
Switch console "channel"
log you could listen to the
<tab> a few times until you see "listening to warn..." and now only invocations of
console.warn('`', '...') will be printed.
To show all output to the current channel press
b, and to show all output from all channels use
Execute ad-hoc testing code with keyboard "macros"
watch a variable:
var a = 0;;// do complicated things with "a"...
Usage of ticker-log is best suited for one-off, quick debugging situations, with any api code remnants removed before pushing to production.
Displaying on-screen logging output reduces browser debugger juggling (dev-tools, Firebug, etc) while you exercise your application.
It can also be valuable to target a specific sub-set of logs both statically (in your code) as well as at run-time using keyboard chords.
- a better approach to "throw an
- developing on non-desktop devices (difficult to access console)
- debugging timing issues that involve user interaction
- "special-event" emitting (listening and firing)
- Configurable via API and URL parameters
- Swap log view with textarea for easy copy/pasting
- Lightweight, no dependencies
- Macro system for run-time, on-demand, static function execution
- Regex log filtering
npm install ticker-log
To write to Ticker's "ticker tape" simply pass in a back-tick (
`) as a first argument to
console's logging functions (
All actions can be driven by keyboard shortcut chords. Every key-combination starts with the back-tick key (
Increase and decrease the speed of the ticker with
Move the horizontal position of the logs with
Change the vertical starting position with
Pause movement with
p (or on-click) and remove all with
Show the current ticker log in a textarea (useful for copy/pasting) with
o. Show all the accrued log output with
l. Reverse contents with
Embed the current configuration settings in the browser-window's url with
For the full list of actions, show the help screen with
A configuration object is maintained, of which most properties (if they differ from their default) can be expressed as a JSON object url parameter.
- whether to show line numbers (default=true) (
- speed logs travel up the screen (
- starting position of logs (
- flush to left or right of screen (
consolechannel to listen to (
- don't trail previous log (default=true) (
Return a copy of the current config settings by invoking the
config API with no arguments:
var alignment = windowtickeralign;
Set a configuration property by passing an object into
Configuration settings take this format when embedded as a url parameter:
Most on-screen actions can be scripted by using the global
window.ticker.help(); # show help screen window.ticker.config(); # return config object clone window.ticker.config(o); # o overlays configuration object window.ticker.increaseSpeed(); # increase speed window.ticker.decreaseSpeed(); # decrease speed window.ticker.moveUp(); # make starting position a little higher window.ticker.moveDown(); # make starting position a little lower window.ticker.moveLeft(); # move logs to the left of the screen (the default) window.ticker.moveRight(); # move logs to the right of the screen window.ticker.pause(); # pause ticker log movement window.ticker.kill(); # remove all ticker logs from screen window.ticker.output(); # show current on-screen logs in textarea window.ticker.outputAll(); # show _all_ accrued logging in textarea window.ticker.flip(); # reverse order of textarea text window.ticker.dump(); # show all configuration
Additional API is covered in the following sections.
Channels allow you to control which logs are printed to the screen:
- log (default)
By default, within the current channel,
console invocations that are given
` as the first argument are printed.
To print all calls to the current channel set the
requireBacktick configuration property to
To show all
console logging (regardless of channel) using the
listenToEverything api function.
Macros are bits of code you want to run at ad-hoc times. There are 10 "slots" stored in keys 0-9.
Macros 0-8 are reserved for api-driven macros:
var variableToTrack;windowticker;// code exercises "variableToTrack"...// invoke macro by pressing `-0
Macro 9 is reserved for an on-screen editing option. Press
evaled and press
m again to "register" the macro.
Filter all log output by string:
Pair filtering with
listenToEverything to broadly filter:
Custom action key
Use a custom key rather than the default
` key for keyboard chords:
// additionally use the 'z' key as a modifierwindowticker;
- "save" action (
- "save" action (
- api namespace
consoleoverrides are reverted when applicable (such as when changing channels)
Reset to default state:
npm installnpm test # run test suite (qunit, phantomjs)npm run lint # eslintnpm run serve #npm run package # build and populate dist