PixiJSに開発用のChrome機能拡張があるのを今日知った その２

Pixi.js開発用機能拡張には同じ名前の機能拡張が２種類あり、こちらのほうが高機能。
Chrome ウェブストアでの見分け方はDevToolsのTが大文字。

大文字の機能拡張のほうが、より詳細なプロパティの検査と編集や、アセットの中身を確認、パフォーマンスのモニタリングができます。
PixiJS v7, v8 のデバッグをサポート。

まずは機能拡張のインストール

インストールすると、開発者コンソールにPixiJS DevToolsというタブが出現する

パッケージをインストールする場合

TypeScriptのサポートが必要な場合こちらを使う。
プロジェクトに@pixi/devtoolsパッケージをインストールする

npm install @pixi/devtools

Pixi.jsを初期化した後に以下のコードを追加する

import { initDevtools } from "@pixi/devtools"; // ← 追加！

const app = new PIXI.Application(...) // Pixi.jsを初期化

initDevtools({ app }); // ← 追加！

パッケージをインストールしない場合

Pixi.jsを初期化した後に以下のコードを追加する

const app = new PIXI.Application(...) // Pixi.jsを初期化

window.__PIXI_DEVTOOLS__ = { app }; // ← 追加！

できること

• 要素の表示非表示
• 要素のプロパティを変更
• 要素をダブルクリックすると、コンソールドロワーに要素を追加できる
• 要素を選択してからコンソールドロワーで$pixiと入力すると要素のプロパティにアクセスできる

高機能版でさらにできること

• 要素を直接クリックして検査
• より詳細なプロパティの検査と編集
• アセットの中身を確認
• パフォーマンスのモニタリング

その他詳細はこちら

前の記事はこちら