# Plugin: addIndicators

This plugin was formerly known as the ScrollMagic debug extension.

It enables you to add visual indicators to your page, to be able to see exactly when a scene is triggered.

To have access to this extension, please include `plugins/debug.addIndicators.js`.

Source:
  - plugins/debug.addIndicators.js, line 4

### Controller Constructor Extension

#### new ScrollMagic.Controller(options)

  Every ScrollMagic.Controller instance now accepts an additional option.
  See `ScrollMagic.Controller` for a complete list of the standard options.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `options` | object | <optional> | Options for the Controller. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `addIndicators` | boolean | <optional> | false | If set to `true` every scene that is added to the controller will automatically get indicators added to it.

  Source:
    - plugins/debug.addIndicators.js, line 139

  ##### Example

      // make a controller and add indicators to all scenes attached
      var controller = new ScrollMagic.Controller({addIndicators: true});
      // this scene will automatically have indicators added to it
      new ScrollMagic.Scene()
                     .addTo(controller);

### Scene Control Methods

#### Scene.addIndicators(options)

  Add visual indicators for a ScrollMagic.Scene.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `options` | object | <optional> | An object containing one or more options for the indicators. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `parent` | string | object | <optional> | undefined | A selector, DOM Object or a jQuery object that the indicators should be added to. If undefined, the controller's container will be used.
  `name` | number | <optional> | "" | This string will be displayed at the start and end indicators of the scene for identification purposes. If no name is supplied an automatic index will be used.
  `indent` | number | <optional> | 0 | Additional position offset for the indicators (useful, when having multiple scenes starting at the same position).
  `colorStart` | string | <optional> | green | CSS color definition for the start indicator.
  `colorEnd` | string | <optional> | red | CSS color definition for the end indicator.
  `colorTrigger` | string | <optional> | blue | CSS color definition for the trigger indicator.

  Source:
    - plugins/debug.addIndicators.js, line 83

  ##### Example

      // add basic indicators
      scene.addIndicators()

      // passing options
      scene.addIndicators({name: "pin scene", colorEnd: "#FFFFFF"});

#### Scene.removeIndicators()

  Removes visual indicators from a ScrollMagic.Scene.

  Source:
    - plugins/debug.addIndicators.js, line 121

  ##### Example

      // remove previously added indicators
      scene.removeIndicators()