bfanger / pixi-inspector

Devtools for PixiJS

PixiJS Devtools

Browser extension to debug games and apps written with PixiJS.

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
• Add-ons for Firefox

Usage

PixiJS

In your code find where the PIXI.Application instance is created, it looks like this:

import { Application } from "pixi.js";

const app = new Application(...)

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

globalThis.__PIXI_APP__ = app;

or depending on your TypeScript and ESLint configuration:

(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:

import Phaser from "phaser";

const game = Phaser.Game(...)

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

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:

globalThis.__PIXI_STAGE__ = yourContainer;

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

globalThis.__PIXI_RENDERER__ = yourRenderer;

pixi-inspector's Issues

properties

because of this fix merged 3 days ago

FIX: remove duplicate props #45

most pixi's value won't show anymore ( transform.pivot, transform.position, transform.scale... )

Other browsers ?

Is there a way to inspect within Firefox or Safari on macOS and not Chrome ? I have a number of dynamic buttons and I want confirm each one has its own unique name attribute but I cant tell and really don't want to have to install Chrome

Problem with Webpack and Typescript

I upload my setup for testing here: https://github.com/josemwarrior/problem-setup-pixi-inspector/

I work with Pixi v6.4.2

I've checked the issue #42 and this repo, and read all the comments in the chrome store, all issues, but I don't found a answer.

How can I work with webpack and (especially) typescript?

If you build my project (npm run dev), and check the pixi-inspector tab in Chrome you notice the window turns black, and there is no way back and no way to correct it unless you refresh the page (Making debugging impossible with this tab, even though the objects do appear in the list.)

If you check the "no-webpack-js" branch, where I don't use webpack, loading Pixi via head, and pure javascript in the same file, you can see that everything works fine, with the same version of Pixi (6.4.2).

So there is something in the way webpack converts typescript to javascript, especially the Pixi library, making it unusable for debugging. My knowledge of both the development of this extension and webpack is limited, could someone help me? Thanks.

press Right click + Alt donest work

After enable target device tool bar in chrome dev tools， press Right click + Alt donest work

Triangle in front of highlighted item is too dark in dark mode

As shown in this example

chrome PixiJS devtools in 5 version

I updated pixiJS to version5 (pixi.js-legacy) and PixiJS devtools have stopped work.
maybe anyone knows what`s the reason? It was wery usefull to use this extension.

Need support for Electron

Just managed to load PixiJS devtools inside Electron via https://xwartz.gitbooks.io/electron-gitbook/content/en/tutorial/devtools-extension.html
Panel shows but only Reconnect button appeared.

Resolution issue

The highlight of the nodes is shown at wrong scale, if the resolution of the PIXI.Application is set to 2.

Getting loads of deprecation warnings

Downloaded the pixi-inspector, but it looks like it's still using Pixi v3, and hasn't been updated to Pixi v4. Got a load of deprecation warnings because of it. :<

index.js:27954 Deprecation Warning: The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.
index.js:27954 Deprecation Warning: The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.
index.js:27954 Deprecation Warning: PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT
index.js:27954 Deprecation Warning: PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT
index.js:27954 Deprecation Warning: PIXI.SCALE_MODES.DEFAULT has been deprecated, please use PIXI.settings.SCALE_MODE
index.js:27954 Deprecation Warning: PIXI.SCALE_MODES.DEFAULT has been deprecated, please use PIXI.settings.SCALE_MODE
index.js:27954 Deprecation Warning: PIXI.WRAP_MODES.DEFAULT has been deprecated, please use PIXI.settings.WRAP_MODE
index.js:27954 Deprecation Warning: PIXI.WRAP_MODES.DEFAULT has been deprecated, please use PIXI.settings.WRAP_MODE
index.js:27954 Deprecation Warning: PIXI.GC_MODES.DEFAULT has been deprecated, please use PIXI.settings.GC_MODE
index.js:27954 Deprecation Warning: PIXI.GC_MODES.DEFAULT has been deprecated, please use PIXI.settings.GC_MODE
index.js:27954 Deprecation Warning: PIXI.PRECISION.DEFAULT has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT
index.js:27954 Deprecation Warning: PIXI.PRECISION.DEFAULT has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT
index.js:27954 Deprecation Warning: PIXI.TRANSFORM_MODE.DEFAULT has been deprecated, please use PIXI.settings.TRANSFORM_MODE
index.js:27954 Deprecation Warning: PIXI.TRANSFORM_MODE.DEFAULT has been deprecated, please use PIXI.settings.TRANSFORM_MODE
index.js:27954 Deprecation Warning: You do not need to use a PIXI Stage any more, you can simply render any container.
index.js:27954 Deprecation Warning: You do not need to use a PIXI Stage any more, you can simply render any container.
index.js:27954 Deprecation Warning: DisplayObjectContainer has been shortened to Container, please use Container from now on.
index.js:27954 Deprecation Warning: DisplayObjectContainer has been shortened to Container, please use Container from now on.
index.js:27954 Deprecation Warning: The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.
index.js:27954 Deprecation Warning: The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.
index.js:27954 Deprecation Warning: The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.
index.js:27954 Deprecation Warning: The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.
index.js:27954 Deprecation Warning: The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.
index.js:27954 Deprecation Warning: The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.
index.js:27954 Deprecation Warning: The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.
index.js:27954 Deprecation Warning: The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.
index.js:27954 Deprecation Warning: The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.
index.js:27954 Deprecation Warning: The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.
index.js:27954 Deprecation Warning: The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.
index.js:27954 Deprecation Warning: The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.
index.js:27954 Deprecation Warning: The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.
index.js:27954 Deprecation Warning: The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.
index.js:27954 Deprecation Warning: The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.
index.js:27954 Deprecation Warning: The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.
index.js:27954 Deprecation Warning: The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.
index.js:27954 Deprecation Warning: The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.
index.js:27954 Deprecation Warning: PIXI.SCALE_MODES.DEFAULT has been deprecated, please use PIXI.settings.SCALE_MODE
index.js:27954 Deprecation Warning: PIXI.SCALE_MODES.DEFAULT has been deprecated, please use PIXI.settings.SCALE_MODE
index.js:27954 Deprecation Warning: The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.
index.js:27954 Deprecation Warning: The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.
index.js:27954 Deprecation Warning: The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.
index.js:27954 Deprecation Warning: The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.
index.js:27954 Deprecation Warning: The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.
index.js:27954 Deprecation Warning: The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.
index.js:27954 Deprecation Warning: The math namespace is deprecated, please access members already accessible on PIXI.
index.js:27954 Deprecation Warning: The math namespace is deprecated, please access members already accessible on PIXI.
index.js:27954 Deprecation Warning: The math namespace is deprecated, please access members already accessible on PIXI.
index.js:27954 Deprecation Warning: You do not need to use a PIXI Stage any more, you can simply render any container.
index.js:27954 Deprecation Warning: You do not need to use a PIXI Stage any more, you can simply render any container.
index.js:27954 Deprecation Warning: DisplayObjectContainer has been shortened to Container, please use Container from now on.
index.js:27954 Deprecation Warning: DisplayObjectContainer has been shortened to Container, please use Container from now on.
index.js:27954 Deprecation Warning: The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.
index.js:27954 Deprecation Warning: The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.
index.js:27954 Deprecation Warning: The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.
index.js:27954 Deprecation Warning: The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.
index.js:27954 Deprecation Warning: The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.
index.js:27954 Deprecation Warning: The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.
index.js:27954 Deprecation Warning: The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.
index.js:27954 Deprecation Warning: The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.
index.js:27954 Deprecation Warning: The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.
index.js:27954 Deprecation Warning: The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.
index.js:27954 Deprecation Warning: The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.
index.js:27954 Deprecation Warning: The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.
index.js:27954 Deprecation Warning: The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.
index.js:27954 Deprecation Warning: The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.
index.js:27954 Deprecation Warning: The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.
index.js:27954 Deprecation Warning: The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.
index.js:27954 Deprecation Warning: The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.
index.js:27954 Deprecation Warning: The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.
index.js:27954 Deprecation Warning: The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.
index.js:27954 Deprecation Warning: The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.
index.js:27954 Deprecation Warning: The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.
index.js:27954 Deprecation Warning: The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.
index.js:27954 Deprecation Warning: The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.
index.js:27954 Deprecation Warning: The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.
index.js:27954 Deprecation Warning: The math namespace is deprecated, please access members already accessible on PIXI.
index.js:27954 Deprecation Warning: The math namespace is deprecated, please access members already accessible on PIXI.
index.js:27954 Deprecation Warning: The math namespace is deprecated, please access members already accessible on PIXI.
index.js:27954 Deprecation Warning: AstractFilter has been renamed to Filter, please use PIXI.Filter
index.js:27954 Deprecation Warning: AstractFilter has been renamed to Filter, please use PIXI.Filter
index.js:27954 Deprecation Warning: TransformManual has been renamed to TransformBase, please update your pixi-spine
index.js:27954 Deprecation Warning: TransformManual has been renamed to TransformBase, please update your pixi-spine
index.js:27954 Deprecation Warning: PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS
index.js:27954 Deprecation Warning: PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS
index.js:27954 Deprecation Warning: PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION
index.js:27954 Deprecation Warning: PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION
index.js:27954 Deprecation Warning: PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION
index.js:27954 Deprecation Warning: PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION
index.js:27954 Deprecation Warning: PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES
index.js:27954 Deprecation Warning: PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES
index.js:27954 Deprecation Warning: PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE
index.js:27954 Deprecation Warning: PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE
index.js:27954 Deprecation Warning: PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES
index.js:27954 Deprecation Warning: PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES
index.js:27954 Deprecation Warning: PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX
index.js:27954 Deprecation Warning: PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX
index.js:27954 Deprecation Warning: PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX
index.js:27954 Deprecation Warning: PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS
index.js:27954 Deprecation Warning: PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS
index.js:27954 Deprecation Warning: PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS
index.js:27954 Deprecation Warning: AstractFilter has been renamed to Filter, please use PIXI.Filter
index.js:27954 Deprecation Warning: AstractFilter has been renamed to Filter, please use PIXI.Filter
index.js:27954 Deprecation Warning: TransformManual has been renamed to TransformBase, please update your pixi-spine
index.js:27954 Deprecation Warning: TransformManual has been renamed to TransformBase, please update your pixi-spine
index.js:27954 Deprecation Warning: PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS
index.js:27954 Deprecation Warning: PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS
index.js:27954 Deprecation Warning: PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION
index.js:27954 Deprecation Warning: PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION
index.js:27954 Deprecation Warning: PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION
index.js:27954 Deprecation Warning: PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION
index.js:27954 Deprecation Warning: PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES
index.js:27954 Deprecation Warning: PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES
index.js:27954 Deprecation Warning: PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE
index.js:27954 Deprecation Warning: PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE
index.js:27954 Deprecation Warning: PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES
index.js:27954 Deprecation Warning: PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES
index.js:27954 Deprecation Warning: PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX
index.js:27954 Deprecation Warning: PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX
index.js:27954 Deprecation Warning: PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX
index.js:27954 Deprecation Warning: PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS
index.js:27954 Deprecation Warning: PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS
index.js:27954 Deprecation Warning: PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS

Search tool

Thanks for you pixi js devtools. It is now cool =) But need search by elements.

Cannot detect PIXI elements

The inspector cannot detect any PIXI elements. I use typescript with webpack and PIXI 5.2.0.

pixi-devtools fails to broadcast messages with wrong event sender shape.

Maybe related to #42

Hi, and thanks for making and maintaining this plugin!

In order to get the Pixi.js devtools working with my project (@inlet/react-pixi & Pixi.js v6 & webpack v5), I've only added the following snippet in my code:

import * as PIXI from "pixi.js"; // eslint-disable-line import/no-extraneous-dependencies
// make PIXI global for the Pixi.js devtools plugin to register it on __PIXI_INSPECTOR_GLOBAL_HOOK__
// https://github.com/bfanger/pixi-inspector/blob/master/src/chrome-extension/pixi.content.js#L163
window.PIXI = PIXI;

I can now see the chrome Pixi tab with details about my containers

and clicking on an element will populate the $pixi variable as advertised.

But I'm also being spammed with errors in the Console tab

the broadcast method reads the event, and fails to check if ":" on an integer

I cannot debug this further. I initially assumed this might be due to a lac of support for Pixi.js v6, but it looks more like a conflict between pixi-inspector and recent versions of Chrome...

Using Chrome Version 89.0.4389.114 (Official Build) (64-bit)

Unable to open Inspector while running on IIS, Visual Studio

Hi,

Slightly atypical I think. I'm working to change and older system to work with PIXI.js and have used Inspector for a lot of other projects, finding it invaluable. As such, keen to get it working here as it'll help me and my colleagues, who aren't too familiar with PIXI.

I'm trying to run things using the old set up: so IIS run from Visual Studio that opens up in Google Chrome (version 95). Its a project written in Typescript that appears to get converted to Javascript and run as normal. The issue is that when I try to open the Inspector, PIXI Inspector causes a breakpoint to happen. Then, something intervenes (I think Visual Studio) and resumes the program. It just does this over and over with no obvious errors, preventing me from even touching the Inspector.

I was wondering if this is something you've encountered or would have some better idea on what's wrong.

Thanks

PIXI 5.3.3 Function has non-object prototype 'undefined' in instanceof check

Using PIXI 5.3.3 and got an error:

Uncaught TypeError: Function has non-object prototype 'undefined' in instanceof check
at Function.[Symbol.hasInstance] ()
at i.resolveType (pixi.inspector.bundle.js:formatted:1955)
at i.detectType (pixi.inspector.bundle.js:formatted:1950)
at D.serialize (pixi.inspector.bundle.js:formatted:2538)
at D.detectScene (pixi.inspector.bundle.js:formatted:2481)
at X (pixi.inspector.bundle.js:formatted:2554)
at Renderer.e.render (pixi.inspector.bundle.js:formatted:2606)
at Main.render (index.ts:117)

Tried all the fixes mentioned in previous issues.

filters props

hi, it will be awesome to also have a properties filter, if you can and have time.:)
example if i want compare and check between multiple instance those entries separate by comma [group,alpha,isMask].

Always crash

Every time open the inspector page, it runs a while and then crash with the error out-of-menory.

Redundant root nodes in outliner

As far as I can tell from this part of the source code

pixi-inspector/src/services/InspectorOutliner.js

Lines 140 to 152 in 2210ae0

	detectScene(container) {
	if (this.root.children.indexOf(container) === -1) {
	// container was rendered for the first time?
	this.root.children.push(container);
	this.serialize(container);
	container[outliner].collapsed = false; // Auto expand root level
	this.inspector.emit("TREE", this.serialize(this.root));
	if (!window.$pixi) {
	window.$pixi = container; // autoselect if nothing is selected
	this.inspector.emit("SELECTED", this.serialize(container));
	}
	}
	}

Whenever a container is rendered for the first time, the inspector adds it as a new root node, and never removes it. This could lead to redundant root nodes if

1. The container is later destroyed, or
2. The container is actually in other parts of the tree already (or is added to other parts of the tree later), and it's rendered separately only for special reasons (e.g. by setting its cacheAsBitmap to true)

I suggest that there should be a better mechanism for checking these two cases and remove such nodes from the root.

Pixi inspector not working in Chome Version 94.0.4606.81

As of today, Pixi Inspector has stopped working using the latest Chrome/Edge. I just see the 'Looking for Pixi' screen continuously.

Reproduced in:
Microsoft Edge Version 94.0.992.50
Chrome Version 94.0.4606.81

0.5.0 floods console with PIXI warnings

My project is using pixi 3.0.11, no warnings appear if I disable the extension

The selected node is not available

Very useful tool, although I've been getting an error recently, when selecting a node and typing $pixi in the console I get:
Uncaught ReferenceError: $pixi is not defined
at :1:1
I'm using Pixi 4.6.2 and it is hosted in an iFrame.

Build instructions

readme needs build instructions.

Publish 0.8.0

Please, publish the new version on Chrome Web Store. I couldn't download it from the link in README nor searching for it on the store.

DOMException: Failed to execute 'postMessage' on 'Window': function () { [native code] } could not be cloned

Hi, has anyone ever encountered this issue? My Pixi application works just fine, but the Pixi devtool refuses to work

Step to reproduce:
Just click on the Pixi devtools.

Duplicating properties and devtool stucking

Pixi devtool duplicates some properties of component and got stuck until "reconnect" is pressed. I got issue with duplicating properties in last commit and no devtool stucking.

pixijs v4 compatibility

Hi just tried your excellent tool with the new version of pixijs. It works but no longer shows the transform properties as I'm guessing pixijs have changed the way they store these.
Do you still use this tool yourself?
Are you still developing it?

I will have a look at pixi.inspector.js and see if it's something I can fix.
Thanks
Matt

How the pixi is detected

The real question is how to use it with storybook?
The problem is the storybook content is inside iframe. Exposing pixi to main frame still doesn't work assuming following should work window.PIXI = PIXI; However I believe the extension doesn't look for PIXI variable in main window. So how you detecting the app then?

Pixi v6 support

Hey! Is it possible to run pixi-inspector without global PIXI using pixi v6 with individual package imports?
Maybe it's possible to create pseudo PIXI and inject it through __PIXI_INSPECTOR_GLOBAL_HOOK__.register?

chrome extension 0.9.0 with pixi.js 4.6.2 doesn't work on windows

once the version pixi-inspector version is upgraded to v0.9.0. extension stopped working. i build v0.8.0 as a workaround.

pixi.js: 4.6.2

Outliner doesn't take into account canvas scale

Latest update is drawing outliner without taking into account div scaling.

In this example the canvas has a width and height of 1920x1080, but the div it's inside has dimensions of around 1644, 924.

Is there any plan to support [email protected] version ?

Hi, Is there any plan to support [email protected] version ?

update fieldValue when focusing

• pixi-inspector version: 0.8.1

I saw the isEdit flag to prevent re v-html to the dom from source code. And try to debug the extension locally and not error. But in production, the bug truly existed. Maybe a release required?

Plugins not work when load ?

hi, any tips here ? am trying load extensions folder with args
"chromium-args": "--load extension='./plugins/pixi_devtools_0.9.3_0','./plugins/React_Developer_Tools_4.7.0_0'",
Success to load plugins React but pixi-plugin seem not load at all!

the source show it loaded, but without domain ?

Context look avaible !?

Not inside devTool !

Anybody seem this behavior before ?
no error ! no logs !
Am not sure where start debugging ?
thanks

install for debug with nwjs chromium vscode ?

Hi my friend, did you know how i can add this feature to nwjs sdk chromium inspector ?
I use vsCode to start my nwjs local app.

        "version": "0.1.0",
        "configurations": [
            
            {
                "type": "nwjs",
                "request": "launch",
                "name": "nwjs Node debug",
                "runtimeExecutable": "C:\\Sandbox\\jonle\\RMMV\\drive\\C\\Program Files (x86)\\KADOKAWA\\RPGMV\\nwjs-win-test\\game.exe",
                "runtimeArgs": [
                    "${workspaceRoot}",
                    "--remote-debugging-port=9222"
                ],
                "webRoot": "${workspaceRoot}",
                "port": 9222,
                "reloadAfterAttached": false,
                "sourceMaps": false
            },
            {
                "type": "nwjs",
                "request": "attach",
                "name": "Attach to NWjs",
                "port": 9222,
                "webRoot": "${workspaceFolder}",
                "reloadAfterAttached": true,
            },
        ]
}

Did you have directive to install this to my projet ?
thank you so much for this awesome tool.

Add dark theme.

Hi, I'm using Brave and I don't know if it is normal but when I open the PIXI devtools, they are in a white theme which is difficult to read.

It would be very great to have a dark theme matching the Chrome devtools theme.

It does not work in webpack

It does not work in webpack

can't support mobile?

can't support mobile?

Pixi Inspector is showing empty for Pixi V4 version

Pixi Inspector is showing empty for Pixi V4 version

debug app on remote device

I'm able to debug without problems on chrome but i'm not able to debug app on remote device
Pixi window is always empty

Originally posted by @xyzdevelopment in #35 (comment)

Devtools darkmode

Hi,

Chrome recently introduced an official dark theme for devtools; I was just wondering what it would take to add support for it to this plugin?

It works great, but I can barely read the purple / red text.

Trouble with webpack build

Plugin can't detect Phaser (based on Pixijs) bundled from webpack.
how can I inspect with this?

it seems not support [email protected]?

I have the same configuration as version 5.0 and it doesn't work properly

is pixi v6 supported?

it seems not working.
I use vite to create empty nodejs project and try to register PIXI, but failed. I don't know the exact reason, pixi version,chrome version, or vite?

Chrome version:Version 106.0.5249.119
Pixi version: 6.5.6

Pixi.js not detected in iFrames

Hi there! What do I need to do to make this work?

I have a Canvas
<canvas width="1472" height="1536" style="width: 736px; height: 768px;"></canvas>
and the pixi script embedded like this
<script type="text/javascript" src="lib/pixi.dev.js"></script>

Getting events from the inspector where inspector has been injected

Could there be support for listening for events like element clicked in the TreeView from the page where inspector has been injected?

names not showing in hierarchy

name property is not picked up
https://www.dropbox.com/s/917w3xfy6j6ty75/Screenshot%202015-11-05%2016.07.09.png?dl=0

Unchecked runtime.lastError: The message port closed before a response was received

This extension is spamming console with the messages:
Unchecked runtime.lastError: The message port closed before a response was received.

I found similar issues caused by chrome changes to cross-origin requests
https://support.google.com/chrome/thread/2047906/unchecked-runtime-lasterror-the-message-port-closed-before-a-response-was-received?msgid=2556826

This issue reproduced for any pixi content in modern browsers.

Problems using PIXI.Application

Hello, I've run into this problem. What if I don't use PIXI.Application ?

When will v5 be supported

When will v5 be supported

Not all properties is shown in the properties panel

There is no way to show ALL the properties of the pixi component like "..." or "show all", only 1 way to "Log to console" and set object as global variable(not very handy). Also will be great if nested objects become expandable
PS: It's unreal even to check the components size or sprite source(sizes is very useful)

PixiJS: 5.2.1
Environment: MacOS Venture 13.1
Browser: Microsoft Edge Version 108.0.1462.54

editable properties

high priority for future ;)