Skip to main content

Installation

PixiJS Support

This extension is designed to work with PixiJS v7/v8 applications.

Extensions​

Install the PixiJS Devtools extension through the Chrome Web Store, or download the latest release from GitHub.

Application Setup​

To use the extension, you need to set up the devtool in your application. There are a couple of ways to do this:

Automatic Setup​

The preferred method for setting up the devtool is to install the @pixi/devtools package.

npm install @pixi/devtools

To enable the devtool, you need to configure it with your PixiJS application. This is done by setting the app property in the configuration object, or you can pass the stage and renderer properties directly if you are not using the Application class.

import { initDevtools } from '@pixi/devtools';

initDevtools({ app });
// or
initDevtools({ stage, renderer });

The benefit of using the @pixi/devtools package is that you get TypeScript support for extension development, and the package will automatically import pixi.js dynamically if you do not provide pixi in the configuration.

Manual Setup​

Alternatively, you can manually set up the devtool by configuring the window.__PIXI_DEVTOOLS__ object directly.

window.__PIXI_DEVTOOLS__ = {
  app
};

If you are not using the PixiJS Application class, you can set the stage and renderer properties directly.

window.__PIXI_DEVTOOLS__ = {
  stage,
  renderer
};

LastRenderedObject​

If you do not provide a stage then the devtool will use the last rendered object as the root of the tree. This is less accurate than providing the stage directly, so it is recommended to provide the stage if possible.

window.__PIXI_DEVTOOLS__ = {
  renderer
};

Unofficial Setup​

Before the PixiJS team released our extension, there was an unofficial pixi-inspector extension available. Due to the popularity of this extension we have made an effort to make the same setup work with the our extension.

The setup below is not recommended but is still available for those who are using the other extension.

window.__PIXI_APP__ = app;
// or
window.__PIXI_STAGE__ = yourContainer;
window.__PIXI_RENDERER__ = yourRenderer;