1.1.3 • Published 4 years ago

yy-debug v1.1.3

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

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

ParamTypeDefaultDescription
optionsobject
options.paddingnumber7between parent panels
options.colorstring"'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

ParamTypeDescription
divHTMLElementpanel returned by Debug
sidestring

Debug.remove(div)

remove a debug panel

Kind: static method of Debug

ParamTypeDescription
divobject | stringor 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

ParamTypeDefaultDescription
namestringof panel
optionsobject
options.sidestring"'rightBottom'"'rightBottom' (default), 'leftBottom', 'leftTop', 'rightTop'
options.expandablenumber0or percent size to expand
options.defaultbooleanfalseif true then this panel replaces default for calls to debug and debugOne
options.sizenumber0if > 0 then this is the percent size of panel
styleobjectCSS styles for the panel
textstringstarting text
parentstringattach 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

ParamTypeDefaultDescription
namestringof meter
optionsobject
options.sidestring"='leftBottom'"'leftBottom', 'leftTop', 'rightBottom', 'rightTop'
options.widthnumber100in pixels
options.heightnumber25in 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

ParamTypeDescription
percentnumberbetween -1 and +1
optionsobject
options.namestringof panel to add the line
options.panelobjectdiv 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

ParamTypeDefaultDescription
namestring
linkstring
optionsobject
options.sidestring"='leftBottom'"'leftBottom', 'leftTop', 'rightBottom', 'rightTop'
options.widthnumber100in pixels
options.heightnumber25in pixels
options.styleobjectadditional 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

ParamTypeDefaultDescription
textArray.<string> | stringmay be an array or you can include multiple strings: text1, text2, text3, options
optionsobject
options.colorstringbackground color for text (in CSS)
options.namestringof panel
options.debugbooleaninvoke debugger from javascript
options.panelHTMLElementreturned from Debug.Add()
options.consolebooleanfalseprint to console instead of panel (useful for fast updating messages)

Debug.one(text)

replaces all text in the panel

Kind: static method of Debug

ParamTypeDescription
textArray.<string> | stringmay be an array or you can include multiple strings: text1, text2, text3, options
options.namestringof panel, defaults to defaultDiv
options.debugbooleaninvoke debugger from javascript
options.panelHTMLElementreturned from Debug.Add()

Debug.caller(options)

adds a debug message showing who called the function

Kind: static method of Debug

ParamTypeDescription
optionsobject(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

ParamTypeDescription
namestringof panel

Debug._checkResize(dir)

Kind: static method of Debug

ParamTypeDescription
dirstringto 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

ParamTypeDescription
sideobjectreturned by Debug._getSide

Debug._isBottom(side) ⇒ boolean

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

ParamTypeDescription
sideobjectreturned 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

ParamType
eEvent

Debug._error(e)

handler for errors

Kind: static method of Debug

ParamType
eEvent

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

ParamType
textstring

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

1.1.3

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago