TL;DR
ブラウザでコンポーネントツリーを可視化し、React の各コンポーネントの Props や state を確かめられるブラウザ拡張機能。
仕組み
検索バーから目的のコンポーネントを探せる。コンポーネントをクリックすると、そのコンポーネントの Props と Hook が表示される。Props や state の値を書き換えて、変更の影響を確かめることもできる。
Chrome や Chromium では、Chrome ウェブストアから追加する。Firefox と Edge にも拡張機能がある。拡張機能を入れて React で作られたサイトを開くと、開発者ツールに Components と Profiler のパネルが現れる。
Safari などの拡張機能がないブラウザでは、npm の react-devtools パッケージを使う。ターミナルで react-devtools を起動し、サイトの <head> の先頭に <script src="http://localhost:8097"></script> を足して再読み込みすると、開発者ツールにつながる。React Native では、React Developer Tools を組み込んだ React Native DevTools を使う。