yy-counter

In-browser console to watch changeable values like counters or FPS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
yy-counter
2.1.05 years ago5 years agoMinified + gzip package size for yy-counter in KB

Readme

yy-counter
In-browser counter to watch changeable values like counters or variables watches

Rationale

While console.log is helpful for debugging, it does not work well for watching values that change quickly, like counters, (x, y) coordinates, or FPS. That's where console-counter comes in.
console-counter.js quickly and easily creates an in-browser console and attaches it to a corner of the screen. It also stacks mulitple counters

Code Example

const Counter = require('yy-counter')

const counter = new Counter({side: 'top-left'})

let n = 0
setInterval(() => counter.log(n++), 250)

Live Example

https://davidfig.github.io/counter/

Installation

npm i yy-counter

API Reference

class ConsoleCounter

/**
 * @param {object} [options]
 * @param {side} [options.side='rightbottom'] side to place the panel (combination of right/left and bottom/top)
 * @param {number} [options.padding=7]
 * @param {string} [options.color=white]
 * @param {string} [options.background=rgba(150,150,150,0.5)]
 * @param {string} [options.parent=document.body]
 * @param {string} [options.position=fixed]
 * @param {number} [options.zIndex=1000]
 * @param {*} {options.xxx} where xxx is a CSS style for the div
 */
constructor(options)

/**
* replaces the innerHTML of the console
* @param {string|number} text-1
* @param {string|number} [text-2]
* @param {string|number} ... [text-n]
*/
log(text-1, [text-2], ... [text-n])

/**
* appends to the innerHTML of the console
* @param {string|number} text-1
* @param {string|number} [text-2]
* @param {string|number} ... [text-n]
*/
append(text-1, [text-2], ... [text-n])

license

MIT License
(c) 2017 YOPEY YOPEY LLC by David Figatner