# Class: Debug

## Phaser .Utils. Debug

Phaser.Utils.Debug

#### new Debug(game)

  A collection of methods for displaying debug information about game objects. If your game is running in WebGL then Debug will create a Sprite that is placed at the top of the Stage display list and bind a canvas texture to it, which must be uploaded every frame. Be advised: this is expenive. If your game is using a Canvas renderer then the debug information is literally drawn on the top of the active game canvas and no Sprite is used.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `game` | Phaser.Game | A reference to the currently running game.

  Source:
    - utils/Debug.js, line 17

### Members

#### baseTexture

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `baseTexture` | PIXI.BaseTexture | Required Pixi var.

  Source:
    - utils/Debug.js, line 37

#### canvas

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `canvas` | HTMLCanvasElement | The canvas to which this BitmapData draws.

  Source:
    - utils/Debug.js, line 32

#### columnWidth

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `columnWidth` | number | The spacing between columns.

  Source:
    - utils/Debug.js, line 63

#### context

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `context` | CanvasRenderingContext2D | The 2d context of the canvas.

  Source:
    - utils/Debug.js, line 52

#### currentAlpha

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `currentAlpha` | number | The current alpha the debug information will be rendered at.

  Default Value:
    - 1
  Source:
    - utils/Debug.js, line 91

#### currentX

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `currentX` | Context | The current X position the debug information will be rendered at.

  Default Value:
    - 0
  Source:
    - utils/Debug.js, line 79

#### currentY

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `currentY` | number | The current Y position the debug information will be rendered at.

  Default Value:
    - 0
  Source:
    - utils/Debug.js, line 85

#### dirty

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `dirty` | boolean | Does the canvas need re-rendering?

  Source:
    - utils/Debug.js, line 96

#### font

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `font` | string | The font that the debug information is rendered in.

  Default Value:
    - '14px Courier'
  Source:
    - utils/Debug.js, line 58

#### game

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `game` | Phaser.Game | A reference to the currently running Game.

  Source:
    - utils/Debug.js, line 22

#### lineHeight

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `lineHeight` | number | The line height between the debug text.

  Source:
    - utils/Debug.js, line 68

#### renderShadow

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `renderShadow` | boolean | Should the text be rendered with a slight shadow? Makes it easier to read on different types of background.

  Source:
    - utils/Debug.js, line 73

#### sprite

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `sprite` | PIXI.Sprite | If debugging in WebGL mode we need this.

  Source:
    - utils/Debug.js, line 27

#### texture

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `texture` | PIXI.Texture | Required Pixi var.

  Source:
    - utils/Debug.js, line 42

#### textureFrame

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `textureFrame` | Phaser.Frame | Dimensions of the renderable area.

  Source:
    - utils/Debug.js, line 47

### Methods

#### body(sprite, color, filled)

  Render a Sprites Physics body if it has one set. Note this only works for Arcade Physics. To display a P2 body you should enable debug mode on the body when creating it.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sprite` | Phaser.Sprite |  |  | The sprite whos body will be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).
  `filled` | boolean | <optional> | true | Render the objected as a filled (default, true) or a stroked (false)

  Source:
    - utils/Debug.js, line 690

#### bodyInfo(sprite, x, y, color)

  Render a Sprites Physic Body information.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sprite` | Phaser.Sprite |  |  | The sprite to be rendered.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 713

#### <protected> boot()

  Internal method that boots the debug displayer.

  Source:
    - utils/Debug.js, line 102

#### cameraInfo(camera, x, y, color)

  Render camera information including dimensions and location.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `camera` | Phaser.Camera |  |  | The Phaser.Camera to show the debug information for.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 256

#### geom(object, color, filled, forceType)

  Renders a Phaser geometry object including Rectangle, Circle, Point or Line.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `object` | Phaser.Rectangle | Phaser.Circle | Phaser.Point | Phaser.Line |  |  | The geometry object to render.
  `color` | string | <optional> |  | Color of the debug info to be rendered (format is css color string).
  `filled` | boolean | <optional> | true | Render the objected as a filled (default, true) or a stroked (false)
  `forceType` | number | <optional> | 0 | Force rendering of a specific type. If 0 no type will be forced, otherwise 1 = Rectangle, 2 = Circle, 3 = Point and 4 = Line.

  Source:
    - utils/Debug.js, line 523

#### geom(object, color, filled)

  Renders a Rectangle.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `object` | Phaser.Rectangle | object |  |  | The geometry object to render.
  `color` | string | <optional> |  | Color of the debug info to be rendered (format is css color string).
  `filled` | boolean | <optional> | true | Render the objected as a filled (default, true) or a stroked (false)

  Source:
    - utils/Debug.js, line 588

#### inputInfo(x, y, color)

  Render debug information about the Input object.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 397

#### key(key, x, y, color)

  Renders Phaser.Key object information.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `key` | Phaser.Key |  |  | The Key to render the information for.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 376

#### <protected> line()

  Internal method that outputs a single line of text split over as many columns as needed, one per parameter.

  Source:
    - utils/Debug.js, line 197

#### lineInfo(line, x, y, color)

  Renders Line information in the given color.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `line` | Phaser.Line |  |  | The Line to display the data for.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 484

#### pixel(x, y, color, size)

  Renders a single pixel at the given size.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `x` | number |  |  | X position of the pixel to be rendered.
  `y` | number |  |  | Y position of the pixel to be rendered.
  `color` | string | <optional> |  | Color of the pixel (format is css color string).
  `size` | number | <optional> | 2 | The 'size' to render the pixel at.

  Source:
    - utils/Debug.js, line 503

#### pointer(pointer, hideIfUp, downColor, upColor, color)

  Renders the Pointer.circle object onto the stage in green if down or red if up along with debug text.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `pointer` | Phaser.Pointer |  |  | The Pointer you wish to display.
  `hideIfUp` | boolean | <optional> | false | Doesn't render the circle if the pointer is up.
  `downColor` | string | <optional> | 'rgba(0,255,0,0.5)' | The color the circle is rendered in if down.
  `upColor` | string | <optional> | 'rgba(255,0,0,0.5)' | The color the circle is rendered in if up (and hideIfUp is false).
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 295

#### preUpdate()

  Internal method that clears the canvas (if a Sprite) ready for a new debug session.

  Source:
    - utils/Debug.js, line 127

#### quadTree(quadtree, color)

  Visually renders a QuadTree to the display.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `quadtree` | Phaser.QuadTree | The quadtree to render.
  `color` | string | The color of the lines in the quadtree.

  Source:
    - utils/Debug.js, line 650

#### soundInfo(sound, x, y, color)

  Render Sound information, including decoded state, duration, volume and more.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sound` | Phaser.Sound |  |  | The sound object to debug.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 225

#### spriteBounds(sprite, color, filled)

  Renders the Sprites bounds. Note: This is really expensive as it has to calculate the bounds every time you call it!

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sprite` | Phaser.Sprite | Phaser.Image |  |  | The sprite to display the bounds of.
  `color` | string | <optional> |  | Color of the debug info to be rendered (format is css color string).
  `filled` | boolean | <optional> | true | Render the rectangle as a fillRect (default, true) or a strokeRect (false)

  Source:
    - utils/Debug.js, line 417

#### spriteCoords(sprite, x, y, color)

  Renders the sprite coordinates in local, positional and world space.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sprite` | Phaser.Sprite | Phaser.Image |  |  | The sprite to display the coordinates for.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 458

#### spriteInfo(sprite, x, y, color)

  Render debug infos (including name, bounds info, position and some other properties) about the Sprite.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sprite` | Phaser.Sprite |  |  | The Sprite to display the information of.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 436

#### spriteInputInfo(sprite, x, y, color)

  Render Sprite Input Debug information.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `sprite` | Phaser.Sprite | Phaser.Image |  |  | The sprite to display the input data for.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 355

#### <protected> start(x, y, color, columnWidth)

  Internal method that resets and starts the debug output values.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `x` | number | <optional> | 0 | The X value the debug info will start from.
  `y` | number | <optional> | 0 | The Y value the debug info will start from.
  `color` | string | <optional> | 'rgb(255,255,255)' | The color the debug text will drawn in.
  `columnWidth` | number | <optional> | 0 | The spacing between columns.

  Source:
    - utils/Debug.js, line 142

#### <protected> stop()

  Internal method that stops the debug output.

  Source:
    - utils/Debug.js, line 179

#### text(text, x, y, color, font)

  Render a string of text.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `text` | string |  | The line of text to draw.
  `x` | number |  | X position of the debug info to be rendered.
  `y` | number |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | Color of the debug info to be rendered (format is css color string).
  `font` | string | <optional> | The font of text to draw.

  Source:
    - utils/Debug.js, line 619

#### timer(timer, x, y, color)

  Render Timer information.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `timer` | Phaser.Timer |  |  | The Phaser.Timer to show the debug information for.
  `x` | number |  |  | X position of the debug info to be rendered.
  `y` | number |  |  | Y position of the debug info to be rendered.
  `color` | string | <optional> | 'rgb(255,255,255)' | color of the debug info to be rendered. (format is css color string).

  Source:
    - utils/Debug.js, line 276