DevToolsPlugin

Defined in: plugins/DevToolsPlugin.ts:61

Developer tools plugin for enhanced PIXI.js debugging and inspection.

Integrates the official PIXI.js developer tools browser extension, providing visual debugging capabilities, scene graph inspection, and performance monitoring directly in the browser’s developer tools panel.

Features:

• Scene graph visualization and navigation
• Real-time property inspection and editing
• Performance metrics and rendering statistics
• Texture atlas and asset inspection
• Interactive debugging tools

Example

// Plugin is typically initialized automatically in development builds
// Manual initialization example:
const devToolsPlugin = app.plugins.get<IDevToolsPlugin>('DevToolsPlugin');
if (devToolsPlugin && process.env.NODE_ENV === 'development') {
  devToolsPlugin.initializeDevTools(pixiApp);
}

// The devtools will then be available in browser developer tools
// Look for the "PIXI" tab in Chrome/Firefox developer tools

Remarks

• Should only be enabled in development environments
• Requires the PIXI DevTools browser extension to be installed
• May impact performance and should be disabled in production builds
• Provides comprehensive debugging capabilities for PIXI.js applications

Extends

• Plugin

Implements

• IDevToolsPlugin

Constructors

Constructor

new DevToolsPlugin(id): DevToolsPlugin

Defined in: plugins/Plugin.ts:48

Parameters

id

string = 'Plugin'

Returns

DevToolsPlugin

Inherited from

Plugin.constructor

Properties

__dill_pixel_method_binding_root

__dill_pixel_method_binding_root: boolean

Defined in: plugins/Plugin.ts:39

Inherited from

Plugin.__dill_pixel_method_binding_root

---

id

readonly id: "DevToolsPlugin" = 'DevToolsPlugin'

Defined in: plugins/DevToolsPlugin.ts:63

Plugin identifier for framework registration

Implementation of

IDevToolsPlugin.id

Overrides

Plugin.id

Accessors

app

Get Signature

get app(): A

Defined in: plugins/Plugin.ts:53

Returns

A

Implementation of

IDevToolsPlugin.app

Inherited from

Plugin.app

---

options

Get Signature

get options(): O

Defined in: plugins/Plugin.ts:44

Returns

O

Implementation of

IDevToolsPlugin.options

Inherited from

Plugin.options

Methods

addSignalConnection()

addSignalConnection(…args): void

Defined in: plugins/Plugin.ts:79

Add signal connections to the container.

Parameters

args

…SignalConnection[]

The signal connections to add.

Returns

void

Implementation of

IDevToolsPlugin.addSignalConnection

Inherited from

Plugin.addSignalConnection

---

clearSignalConnections()

clearSignalConnections(): void

Defined in: plugins/Plugin.ts:85

Returns

void

Implementation of

IDevToolsPlugin.clearSignalConnections

Inherited from

Plugin.clearSignalConnections

---

destroy()

destroy(): void

Defined in: plugins/Plugin.ts:57

Returns

void

Implementation of

IDevToolsPlugin.destroy

Inherited from

Plugin.destroy

---

initialize()

initialize(): Promise<void>

Defined in: plugins/DevToolsPlugin.ts:75

Initializes the DevTools plugin. Sets up the plugin for later DevTools activation when needed.

Returns

Promise<void>

Example

// Called automatically by the plugin system
// No manual initialization required

Implementation of

IDevToolsPlugin.initialize

Overrides

Plugin.initialize

---

initializeDevTools()

initializeDevTools(app): void

Defined in: plugins/DevToolsPlugin.ts:103

Initializes and activates PIXI DevTools for the specified application. Connects the application to the browser’s PIXI DevTools extension for debugging.

Parameters

app

Application

The PIXI Application instance to enable debugging for

Returns

void

Example

// Typically called conditionally based on environment
const pixiApp = new PIXI.Application();
const devToolsPlugin = app.plugins.get<IDevToolsPlugin>('DevToolsPlugin');

if (devToolsPlugin && process.env.NODE_ENV === 'development') {
  devToolsPlugin.initializeDevTools(pixiApp);
  console.log('PIXI DevTools enabled - check browser developer tools');
}

Remarks

• Should only be called in development environments
• Requires the PIXI DevTools browser extension to be installed
• Once initialized, debugging tools will be available in the browser’s developer tools
• The extension provides a “PIXI” tab with comprehensive debugging features

Implementation of

IDevToolsPlugin.initializeDevTools

---

postInitialize()

postInitialize(_app): void | Promise<void>

Defined in: plugins/Plugin.ts:68

Parameters

_app

IApplication

Returns

void | Promise<void>

Implementation of

IDevToolsPlugin.postInitialize

Inherited from

Plugin.postInitialize