開発コンソールからReactの内部情報を得

手順

Firefoxの場合

1. developer toolのinspectorでDOMを選択して右クリックメニューを開いて、コンソールで使うを押す

変数に格納され、開発コンソールから操作できるようになる

2. そのまま<C-Enter>を押してログに流す

3. propertiesを開いてお目当ての情報を探す

https://gyazo.com/472af08dcc31260bb485d236e16bac9c

Chromeの場合

このページを書くまで気づかなかったのだが、Firefoxとは違ってひと手間かける必要がある

そのままコンソールに流しても、DOMしか読めない

1. developer toolのinspectorでDOMを選択して右クリックメニューを開いて、グローバル変数として保存を押す

2. 開発コンソールに流れた変数をObject.fromEntries(Object.entries())で囲む

一旦propertiesをばらして再び構築している

この方法だと追加されたpropertiesのみが表示される

DOMの情報もまとめて見たい(Firefoxでの挙動にしたい)ときは以下を使う

code:js

(() =>{

const restructured = {};

for (const key in temp0) {

restructuredkey = temp0key;

}

return restructured;

})();

3. あとはお目当ての情報を探すだけ

https://gyazo.com/ebd19e642a35a14c88f62487cbf8be88