❤
npm
Sign UpSign In

yy-debug

1.1.3 • Public • Published

debug.js

debug panels for javascript (designed for game development)

Code Example

const Debug = require('@yy/debug');

// initialize the library
Debug.init();

// send a message to the default panel created in the init()
Debug.log('This is a test message.');

// add an FPS panel and meter
var fps = Debug.add('FPS', {text: '0 FPS', side: 'rightBottom'});
var meter = Debug.addMeter('panel', {side: 'rightBottom'});

// update the FPS
setInterval(function () {
    var FPS = Math.random() * 60;

    // adds a meter line
    Debug.meter(Math.random() * 2 - 1, {panel: meter});

    // replaces all HTML in FPS panel
    Debug.one(Math.round(FPS) + ' FPS', {panel: fps, color: (FPS < 30 ? 'red' : null)});
}, 60);

Debug.add('testing', {text: 'this is another panel.'});

Live Example

https://davidfig.github.io/debug/

see also

Installation

include debug.js in your project or add to your workflow

npm install yy-debug

API Reference

Debug

Kind: global constant

Debug.init([options]) ⇒ HTMLElement

initialize the debug panels (must be called before adding panels) options may also include options for the default debug panel (see Debug.add() for a list of these options)

Kind: static method of Debug
Returns: HTMLElement - div where panel was created

Param Type Default Description
[options] object
[options.padding] number 7 between parent panels
[options.color] string "'rgba(150,150,150,0.5)'" default CSS background color for panels

Debug.changeSide(div, side)

change side of an existing panel

Kind: static method of Debug

Param Type Description
div HTMLElement panel returned by Debug
side string

Debug.remove(div)

remove a debug panel

Kind: static method of Debug

Param Type Description
div object | string or name of panel

Debug.add(name, [options], [style], [text], [parent]) ⇒ HTMLElement

add debug panel

Kind: static method of Debug
Returns: HTMLElement - div where panel was created

Param Type Default Description
name string of panel
[options] object
[options.side] string "'rightBottom'" 'rightBottom' (default), 'leftBottom', 'leftTop', 'rightTop'
[options.expandable] number 0 or percent size to expand
[options.default] boolean false if true then this panel replaces default for calls to debug and debugOne
[options.size] number 0 if > 0 then this is the percent size of panel
[style] object CSS styles for the panel
[text] string starting text
[parent] string attach to another panel (to the left or right, depending on the side of the panel)

Debug.addMeter(name, [options]) ⇒ HTMLElement

creates a meter (useful for FPS)

Kind: static method of Debug
Returns: HTMLElement - div where panel was created

Param Type Default Description
name string of meter
[options] object
[options.side] string "='leftBottom'" 'leftBottom', 'leftTop', 'rightBottom', 'rightTop'
[options.width] number 100 in pixels
[options.height] number 25 in pixels

Debug.meter(percent, [options])

adds a line to the end of the meter and scrolls the meter as necessary must provide either an options.name or options.panel

Kind: static method of Debug

Param Type Description
percent number between -1 and +1
[options] object
[options.name] string of panel to add the line
[options.panel] object div of panel as returned by Debug.add()

Debug.addLink(name, link, [options]) ⇒ HTMLElement

adds a panel with a browser link note: this panel cannot be individually minimized

Kind: static method of Debug
Returns: HTMLElement - div where panel was created

Param Type Default Description
name string
link string
[options] object
[options.side] string "='leftBottom'" 'leftBottom', 'leftTop', 'rightBottom', 'rightTop'
[options.width] number 100 in pixels
[options.height] number 25 in pixels
[options.style] object additional css styles to apply to link

Debug.log(text, [options])

adds text to the end of in the panel and scrolls the panel

Kind: static method of Debug

Param Type Default Description
text Array.<string> | string may be an array or you can include multiple strings: text1, text2, text3, [options]
[options] object
[options.color] string background color for text (in CSS)
[options.name] string of panel
[options.debug] boolean invoke debugger from javascript
[options.panel] HTMLElement returned from Debug.Add()
[options.console] boolean false print to console instead of panel (useful for fast updating messages)

Debug.one(text)

replaces all text in the panel

Kind: static method of Debug

Param Type Description
text Array.<string> | string may be an array or you can include multiple strings: text1, text2, text3, [options]
[options.name] string of panel, defaults to defaultDiv
[options.debug] boolean invoke debugger from javascript
[options.panel] HTMLElement returned from Debug.Add()

Debug.caller([options])

adds a debug message showing who called the function

Kind: static method of Debug

Param Type Description
[options] object (see Debug.debug)

Debug.get(name) ⇒ HTMLElement

returns a panel based on its name

Kind: static method of Debug
Returns: HTMLElement - panel or null if not found

Param Type Description
name string of panel

Debug._checkResize(dir)

Kind: static method of Debug

Param Type Description
dir string to check

Debug.resize()

resize all panels

Kind: static method of Debug

Debug._isLeft(side) ⇒ boolean

Kind: static method of Debug
Returns: boolean - whether on the left side

Param Type Description
side object returned by Debug._getSide

Debug._isBottom(side) ⇒ boolean

Kind: static method of Debug
Returns: boolean - whether on the bottom side

Param Type Description
side object returned by Debug._getSide

Debug._keypress(e)

handler for: ` key used to expand default debug box c/C key to copy contents of default div to clipboard

Kind: static method of Debug

Param Type
e Event

Debug._error(e)

handler for errors

Kind: static method of Debug

Param Type
e Event

Debug.clipboard(text)

copies text to clipboard called after pressing c or C (if input is allowed to bubble down) from http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

Kind: static method of Debug

Param Type
text string

Copyright (c) 2016 YOPEY YOPEY LLC - MIT License - Documented by jsdoc-to-markdown

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.3
    1
    • latest

Version History

Package Sidebar

Install

npm i yy-debug

Repository

github.com/davidfig/debug

Homepage

github.com/davidfig/debug#readme

Weekly Downloads

15

Version

1.1.3

License

MIT

Last publish

Collaborators

  • davidfig
Try on RunKit
Report malware