React と React Native アプリの状態、ネットワークリクエスト、ログ、エラーを確認できるデスクトップデバッガー。
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
Chrome、Edge、Firefox のストアからブラウザー拡張機能をインストールします
- 2
pnpm のウェブサイトから pnpm をインストールします
- 3
モノレポの依存関係をインストールします
pnpm install - 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 の数値は毎日更新されます。
関連プロジェクト
ローカルに保存したURLフィルター付きルールとプロファイルで、HTTPリクエスト/レスポンスヘッダーやCookieを上書きできるブラウザー拡張機能。
Reactなどのビューライブラリと併用できる、予測可能で保守しやすいグローバル状態管理のためのJavaScriptライブラリ。
Provider不要の、React向け小型フックベースの状態管理ライブラリ。
現在の状態のドラフトを変更するだけで、不変な状態更新を書けるJavaScriptライブラリです。
ReduxストアをhooksやProviderでReactコンポーネントに接続する、Redux公式のReactバインディングです。