Debug with PixiJS Devtools?

[kaloyan-manev-ph]

Hi,

Today I tried to link the Chrome Extension Devtools https://pixijs.io/devtools/ with my react app. However, it was really difficult, is this the right way to do it?

Here's how I did it (this works):

const application = useApplication();
(globalThis as unknown as {__PIXI_APP__: Application<Renderer>}).__PIXI_APP__ = application.app;

Here's what I tried but it didn't work, (I also tried multiple other combinations e.g. without useEffect):

const application = useApplication();
useEffect(() => {
    initDevtools({ app: application.app});
}, [application.app]);

I expect that the second piece of code should work but I had to rely on globalThis... Is this how it is supposed to be?

[vs-jdefting]

The easiest way I found to do this was to use the onInit Application prop.

<Application
  onInit={(app) => {
    initDevtools({ app });
  }}
>
  // ...
</Application>

[thejustinwalsh]

onInit is a nice touch. I've been using this in a lazy loaded component that I only load when running in development along with my other custom dev tools for my project.

declare global {
  var __PIXI_APP__: Application;
}

export default function DebugStuff() {
  const {app} = useApplication();
  useEffect(() => {
    globalThis.__PIXI_APP__ = app;
  }, [app]);
  // ...
  return <React.Fragment key="DebugStuff" />
}

If you don't want to install the devtools package, this should do the trick as well, re: @vs-jdefting's method above.

<Application
  onInit={(app) => {
    globalThis.__PIXI_APP__ = app; // or window.__PIXI_APP__ if you prefer
  }}
>
  // ...
</Application>