react要素のpropsとstateをコンソールでインスペクトするには？

質問

React開発者ツール は、React コンポーネント ツリーを検査し、props やイベント ハンドラなどを見るために多くの力を与えてくれます。しかし、私が本当にやりたいことは、ブラウザ コンソールでそれらのデータ構造を検査できるようにすることです。

chromeでは、コンソールで現在選択されているDOM要素を $0 . から React コンポーネントの情報を抽出する方法はありますか？ $0 またはReact Dev Toolsで同様のことを行うことは可能でしょうか？

どのように解決するのですか？

使用方法 React開発者ツール を利用することで $r を使用して、選択された React Component への参照を取得します。

次のスクリーンショットは、私が React Developer Tools でコンポーネントを選択し ( Explorer という名前のステートオブジェクトを持つコンポーネント( nodeList . コンソールでは、次のように書くだけです。 $r.state.nodeList と書くだけで、このオブジェクトを状態から参照できるようになりました。プロップについても同じことが言えます（例えば $r.props.path )