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)

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