State Inspector、現在のページ上でRedux、Zustand、PiniaおよびVuex stores検出し、その状態をライブ ツリーとして表示し、デバッガーを開かずにアクションをディスパッチしたり、状態をパッチしたり、storeアクションを呼び出したりできるようにします。
フロントエンドのバグはマークアップではなく状態に存在することが非常に多く、反転しないフラグ、古い項目を保持するリスト、インターフェイスが期待するフィールドが欠落しているユーザー オブジェクトなどです。フレームワークの開発ツールはそれを表示できますが、適切な拡張機能がインストールされている場合にのみ、ビルドがそれを公開し、デバッガーを開くことができるマシン上にいます。ステージング サイト、同僚のラップトップ、または運用ページでは、これは当てはまらないことがよくあります。
このツールは、ページからstores直接読み取ります。Reduxは、react-redux storeを通じてProviderにハンドリングされ、PiniaおよびVuexはインストールされているVueアプリケーション ( Vue 3およびVue 2) を通じて、そしてZustand window上に公開されたstoreまたはストアから読み込むコンポーネントを通じて見つかります。各storeは見つかった場所とともにリストされ、その状態は、Maps、Sets、Dates、関数、および循環参照をシリアル化に失敗することなく読み取り可能な状態に保つ折りたたみ可能なツリーとして表示されます。
Liveモードでは、選択したstore 2 秒ごとに再読み込みし、変更されたトップレベルのキーを強調表示し、短い変更ログを保持するため、ページ上をクリックして、各インタラクションが状態のどの部分に触れるかを確認できます。フィルターは大きな状態ツリー内のキーまたはパスを検索し、Copy state JSONバグ レポートまたはテスト フィクスチャのスナップショットを提供します。
読み取りだけでは不十分な場合は、その場で変更します。Reduxアクションをディスパッチし、オブジェクトをZustand状態にマージするかそのアクションの 1 つを呼び出し、Pinia storeに$patch適用するか引数を指定してアクションを実行し、名前空間モジュールを含むVuexでミューテーションをコミットするかアクションをディスパッチします。ツリーとページはすぐに更新されます。このツールは、到達できないものについても明確にしています。モジュール内に保持され、インターフェイスに渡されることのないstore、外部からは見えません。パネルでは、開発中にストアを公開する方法について説明しています。
Vue 2およびVue 3上のReduxおよびRedux Toolkit、Zustand、PiniaおよびVuex自動的に検出されます。ビルドにはセットアップや devtools フックはありません。
Maps、Sets、Dates、関数、クラス インスタンス、循環参照を処理する折りたたみ可能なツリーとしてのネストされた状態。Pinia PiniaとVuexゲッターは個別に表示されます。
Liveモードでは、変更されたトップレベルのキーが強調表示され、すべての変更がタイムスタンプ付きで記録されるため、インタラクションを状態の更新にマッピングできます。
Reduxアクションをディスパッチし、引数を指定してZustandおよびPiniaアクションを呼び出し、$patch Pinia状態にし、Zustand状態にマージし、Vuexでコミットまたはディスパッチします。
大きな状態ツリーをキーまたはパスでフィルターし、バグ レポート、テスト フィクスチャ、または比較用に状態全体をJSONとしてコピーします。
アプリにインストールするものは何もなく、デバッグ ビルドも必要ありません。storesがアクセス可能な場所ならどこでも、ステージング、本番環境、他の人のサイトで動作します。
バグがデータにあるかビューにあるかを確認します。storeすでに間違った値を保持している場合、コンポーネントは問題ではありません。
空のカート、期限切れのセッション、1,000 個のアイテムなど、クリックするだけでは到達しにくい状態にstoreを置き、インターフェイスがどのように対処するかを確認します。
Redux DevToolsまたはVue Devtoolsが接続されていない、デプロイされたビルドのライブstores読み取ります。
アプリをクリックして変更ログを確認し、どのインタラクションが状態のどの部分を更新するかを確認します。
インターフェイスに表示されたものを説明する代わりに、storeの正確なJSONスナップショットをチケットに追加します。
ReactまたはVueページのDevSuite ProドックにあるState Inspectorアイコンをクリックします。見つかったすべてのstoreは、そのライブラリと見つかった場所とともにリストされます。
storeを選択すると、その状態がツリーとして表示されます。必要なブランチを展開するか、フィルターを入力してキーまたはパスに直接ジャンプします。
Liveをオンにして、ページを操作して変更ログを確認します。各エントリには、変更された時間とトップレベルのキーが表示されます。
アクション、パッチ、または引数をJSONとして入力し、実行します。ツリーとページはすぐに更新されるため、コードに触れることなくエッジケースをテストできます。
Copy state JSONはstore現在の状態でキャプチャし、チケット、テスト、または比較ツールに貼り付ける準備ができています。
