https://github.com/evgeniy-polyakov/pixi-inspector
Browsing PixiJS display tree in the context menu and refer objects in the debugger.
https://github.com/evgeniy-polyakov/pixi-inspector
dom inspector pixi pixijs
Last synced: 2 months ago
JSON representation
Browsing PixiJS display tree in the context menu and refer objects in the debugger.
- Host: GitHub
- URL: https://github.com/evgeniy-polyakov/pixi-inspector
- Owner: evgeniy-polyakov
- License: mit
- Created: 2019-02-16T15:31:14.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-03-17T12:44:42.000Z (7 months ago)
- Last Synced: 2025-06-07T15:05:44.569Z (4 months ago)
- Topics: dom, inspector, pixi, pixijs
- Language: TypeScript
- Homepage:
- Size: 426 KB
- Stars: 10
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pixi Inspector
The tool allowing to browse PixiJS display tree in the context menu and refer objects in the debugger.
## Getting Started
Create PixiJS application and the inspector:
```javascript
import * as PIXI from "pixi.js";
import {PixiInspector} from "pixi-inspector";
const app = new PIXI.Application();
const inspector = new PixiInspector(app.stage, app.renderer);
//... add display objects to your app
```
## Browsing Objects
Right-click on the canvas displays context menu with display object tree under the mouse pointer.
* The context menu does not show the whole display tree, only sprites and meshes under the mouse pointer and their ascendants.
* If no display objects are found under the mouse pointer, the default browser context menu is displayed.
* Menu items for objects on the same level in the tree are sorted by z-index ascending.
* Invisible display objects are greyed out. Objects with `worldVisible == false || worldAplha == 0` are considered invisible.
* Custom classes have the proper name in the menu like `Bunny` in the example. The class name is taken from `constructor.name`.
> Note: Using the inspector with minified code will result in short uglified object names.
* Hovering the underlined texture name will show a submenu with that texture. Any object with `texture:PIXI.Texture` property has this feature.
## Editing Objects
Clicking on the menu item will log the corresponding object in the console. It also sets a breakpoint in an anonymous function called on that object. The object itself can be accessed in the debugger
as `this` in local scope. Properties of the object can be viewed and changed directly in the debugger or coding in the console.
> Note: The debugger must be opened in advance. There is no way to open the debugger programmatically.
## Configuration
The third argument of `PixiInspector` constructor is the style of the context menu: `light` or `dark`. If no style is specified, it is detected from the browser theme.
The context menu can be disabled and enabled by using the `enabled:boolean` inspector property.
## Live Demo
[Open](https://evgeniy-polyakov.github.io/pixi-inspector/example/index.html)
## Version History
### 4.x
- pixi.js 8
- collapsable branches in the menu
- support of ES modules
### 3.x
- pixi.js 7
### 2.x
- pixi.js 5,6
- browsing of objects via context menu
### 1.x
- pixi.js 4,5
- browsing of objects in html elements inspector