https://github.com/davidfig/counter

In-browser counter to watch changeable values like counters or variables watches
https://github.com/davidfig/counter

counter debug javascript watch

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/davidfig/counter
• Owner: davidfig
• License: mit
• Created: 2017-10-09T00:31:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-24T06:31:07.000Z (over 7 years ago)
• Last Synced: 2025-02-17T02:04:53.641Z (3 months ago)
• Topics: counter, debug, javascript, watch
• Language: JavaScript
• Size: 825 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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](https://yopeyopey.com/) by [David Figatner](https://twitter.com/yopey_yopey/)