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
- https://davidfig.github.io/update/
- https://davidfig.github.io/animate/
- https://davidfig.github.io/renderer/
- https://davidfig.github.io/viewport/
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
- .changeSide(div, side)
- .remove(div)
- .add(name, [options], [style], [text], [parent]) ⇒
HTMLElement
- .addMeter(name, [options]) ⇒
HTMLElement
- .meter(percent, [options])
- .addLink(name, link, [options]) ⇒
HTMLElement
- .log(text, [options])
- .one(text)
- .caller([options])
- .get(name) ⇒
HTMLElement
- ._checkResize(dir)
- .resize()
- ._isLeft(side) ⇒
boolean
- ._isBottom(side) ⇒
boolean
- ._keypress(e)
- ._error(e)
- .clipboard(text)
- .init([options]) ⇒
HTMLElement
Debug.init([options]) ⇒ 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 |
HTMLElement
Debug.add(name, [options], [style], [text], [parent]) ⇒ 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) |
HTMLElement
Debug.addMeter(name, [options]) ⇒ 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() |
HTMLElement
Debug.addLink(name, link, [options]) ⇒ 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) |
HTMLElement
Debug.get(name) ⇒ 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
boolean
Debug._isLeft(side) ⇒ Kind: static method of Debug
Returns: boolean
- whether on the left side
Param | Type | Description |
---|---|---|
side | object |
returned by Debug._getSide |
boolean
Debug._isBottom(side) ⇒ 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