Repolode
reduxjs

reduxjs/redux-devtools

Reduxの状態を調査できるブラウザー拡張機能とReactコンポーネント。アクションの再生やホットリロードにも対応。

スター
14,370
フォーク
1,191
未解決の Issue
146
最終コミット
5 時間前

これは何?

Redux DevToolsを使うと、Redux storeにdispatchされたすべてのアクションを調べ、状態がどのように変化したかを確認できます。統合APIを通じて接続できれば、状態変化を管理するほかのアーキテクチャでも利用できます。

プロジェクトは、Chrome、Edge、Firefox向けのブラウザー拡張機能、デスクトップアプリ形式のスタンドアロンアプリ、クライアントアプリケーションに直接埋め込めるReactコンポーネントの3つの形態で提供されています。拡張機能とコンポーネントは、状態ツリーやアクション履歴を表示するモニターを備えた、カスタマイズ可能なUIを共有しています。

記録したアクションを再生したり、過去の状態を順に確認したり、現在の状態を保ったままreducerをホットリロードしたりできます。このリポジトリはpnpmのmonorepoで、READMEにはすべてのパッケージをビルドする方法と、変更に必要なパッケージだけをビルドする方法が記載されています。

主な機能

  • 01Chrome、Edge、Firefox向けのブラウザー拡張機能
  • 02スタンドアロンアプリと埋め込み可能なReactコンポーネント
  • 03アクションの再生と過去の状態のステップ確認
  • 04状態を保持したままreducerをホットリロード
  • 05カスタマイズ可能なUIとモニター
  • 06Redux以外の状態管理ツールとの統合

ユースケース

  • Reduxを使うReactアプリの状態変化をデバッグする
  • ユーザー操作の一連のアクションを再生してバグを再現する
  • 社内ツールに状態インスペクターを埋め込む
  • ブラウザー以外の環境からリモートで状態を調査する

クイックスタート

  1. 1

    Chrome、Edge、Firefox のストアからブラウザー拡張機能をインストールします

  2. 2

    pnpm のウェブサイトから pnpm をインストールします

  3. 3

    モノレポの依存関係をインストールします

    pnpm install
  4. 4

    すべてのパッケージをビルドします

    pnpm run build:all

使う前に知っておきたいこと

  • ブラウザー拡張機能は Chrome、Edge、Firefox でのみ利用できます。
  • ソースからビルドするには pnpm を使い、すべてのパッケージを先にビルドする必要があるため、主にコントリビューター向けです。

トピック

よくある質問

redux-devtools とは?
Reduxの状態を調査できるブラウザー拡張機能とReactコンポーネント。アクションの再生やホットリロードにも対応。 Redux DevToolsを使うと、Redux storeにdispatchされたすべてのアクションを調べ、状態がどのように変化したかを確認できます。統合APIを通じて接続できれば、状態変化を管理するほかのアーキテクチャでも利用できます。
redux-devtools は無料で使えますか?ライセンスは?
redux-devtools は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
redux-devtools は今もメンテナンスされていますか?
活発にメンテナンス中。redux-devtools の最終コミットは 2026年10月21日 です。
redux-devtools は何に使えますか?
Reduxを使うReactアプリの状態変化をデバッグする ユーザー操作の一連のアクションを再生してバグを再現する 社内ツールに状態インスペクターを埋め込む ブラウザー以外の環境からリモートで状態を調査する
redux-devtools のインストール方法は?
Chrome、Edge、Firefox のストアからブラウザー拡張機能をインストールします pnpm のウェブサイトから pnpm をインストールします モノレポの依存関係をインストールします: pnpm install すべてのパッケージをビルドします: pnpm run build:all
redux-devtools はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/reduxjs/redux-devtools

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト