Skip to main content

Getting Started with DevTools​

The PixiJS DevTools extension is a powerful tool that allows you to inspect and debug your PixiJS applications directly in the browser. It provides a user-friendly interface to visualize the structure of your PixiJS scenes, view properties of display objects, and monitor performance.

We have created an extension for this library that allows you to inspect the layout of your PixiJS application in real-time.

Installation​

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

Usage​

Once installed, you need to add the following to your PixiJS application:

import '@pixi/layout/devtools';

// ... rest of your code

This will enable the DevTools extension to communicate with your PixiJS application and provide you with the necessary debugging capabilities.

Features​

DevTools
  • Inspect Layout: View the layout properties of your PixiJS display objects in real-time.
  • Visual Helpers: ⬥ indicates a layout object and the flash button will flash the object on/off to help you find it in the scene.
  • Reset Layout: Press the reset button to set the object to its default values.