Pixi.js開発用機能拡張には同じ名前の機能拡張が２種類あり、こちらは簡易版。
Chrome ウェブストアでの見分け方はDevtoolsのtが小文字。
まずは機能拡張のインストール
インストールすると、開発者コンソールにPixiJSというタブが出現する
コードに追記
Pixi.jsを初期化した後に以下のコードを追加する
const app = new PIXI.Application(...) // Pixi.jsを初期化
globalThis.__PIXI_APP__ = app; // ← 追加！
できること
- 要素の表示非表示
- 要素のプロパティを変更
- 要素をダブルクリックすると、コンソールドロワーに要素を追加できる
- 要素を選択してからコンソールドロワーで
$pixiと入力すると要素のプロパティにアクセスできる
その他詳細
この記事の続き