https://github.com/bfanger/pixi-inspector

Devtools for PixiJS
https://github.com/bfanger/pixi-inspector

Last synced: 1 day ago
JSON representation

Devtools for PixiJS

• Host: GitHub
• URL: https://github.com/bfanger/pixi-inspector
• Owner: bfanger
• License: mit
• Created: 2015-06-22T22:02:44.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-11-27T16:44:36.000Z (about 1 month ago)
• Last Synced: 2024-12-28T20:04:01.249Z (8 days ago)
• Language: TypeScript
• Homepage: https://chrome.google.com/webstore/detail/pixi-inspector/aamddddknhcagpehecnhphigffljadon
• Size: 3.46 MB
• Stars: 397
• Watchers: 14
• Forks: 65
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Roadmap: docs/roadmap.md

Awesome Lists containing this project

• awesome - bfanger/pixi-inspector - Devtools for PixiJS (TypeScript)
• awesome - bfanger/pixi-inspector - Devtools for PixiJS (TypeScript)

README

        
# PixiJS Devtools

Browser extension to debug games and apps written with [PixiJS](http://pixijs.com/).

## Features

- Show the scene graph

- View and edit properties

- Double-click in the outliner to console.log a node

- Outline the active node in the viewport.

- The active node is available in the developer console as `$pixi`

- Right-click (or alt click) in the viewport to activate a node

## Installation

Install PixiJS Devtools from:

- [Chrome Web Store](https://chrome.google.com/webstore/detail/pixi-inspector/aamddddknhcagpehecnhphigffljadon)

- [Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/pixijs-devtools/)

## Usage

### PixiJS

In _your code_ find where the `PIXI.Application` instance is created, it looks like this:

```js

import { Application } from "pixi.js";

const app = new Application(...)

```

Expose that `app` to the **PixiJS Devtools** by adding the line:

```js

globalThis.__PIXI_APP__ = app;

```

or depending on your TypeScript and ESLint configuration:

```ts

(globalThis as any).__PIXI_APP__ = app; // eslint-disable-line

```

### Phaser

In _your code_ find where the `Phaser.Game` instance is created, it looks like this:

```js

import Phaser from "phaser";

const game = Phaser.Game(...)

```

Expose that `game` to the **PixiJS Devtools** by adding the line:

```js

globalThis.__PHASER_GAME__ = game;

```

## Custom setup?

If you don't use a `PIXI.Application` or `Phaser.Game`?

you can specify the root-node manually with:

```js

globalThis.__PIXI_STAGE__ = yourContainer;

```

And to enable highlighting and selecting the nodes in the viewport add:

```js

globalThis.__PIXI_RENDERER__ = yourRenderer;

```