ブラウザのinspectorで、お目当のプロパティを一発で探したい

Question

インスペクターであるオブジェクトを見ていて、「どこかに〇〇って名前のプロパティがあると思うんだけど、構造がよくわからない...」っていうときにGrepみたいなことってできませんか？

例えば、

このオブジェクトの中に、"GestureRecognizer"ってオブジェクトがあるはずなんですが、それがどの階層にあるのかを検索するような方法を教えて欲しいです。

うまいやり方をご存知の方、もしくは何かアドバイスなどあれば教えてください。
よろしくお願いいたします。

Comments

[m.ts10806]

ctrl+fで検索ウィンドウ出ませんでしたっけ？(外出中につき確認できないのでひとまず思うところを書いてます)

Answer 1

質問が少し不明瞭な為、質問内容を誤解釈している可能性はありますが、
オブジェクト内のプロパティー名を検索したいという趣旨の質問と解釈し、
以下、丸々の解決策にはなりませんが、それに近い回答となります。

Step1

Chrome DevToolsのElementsタブにしろ、おそらく、質問文に掲載されている画像を見る限り、質問者さんが利用していると思われるReactタブにしろ、特定の要素を選択すると、$0や$rが右端に表示されます。

Step2

Chrome DevToolsのConsoleタブでは、これらの$0や$rを入力して実行すると、選択していた要素がコンソールに出力されます。

この、$0や$rはキャプチャー画像で示している通り、先のタブで選択した要素を表しているものなので、例えば、Object.keys($r)なんてこともできてしまいます。

ここまでわかれば、あとはご自身で目的の動作を行う自作関数でも作ってやって、myFunction($r)のようにコンソールに打ち込んであげれば良いだけです。

Step3

さて、その自作関数ですが、Chrome DevToolsのSourceタブでは、スニペットを登録しておくことができるので、その自作関数をここに登録しておくと便利です。

ここでは例として、foo()という関数を作って、グローバルにその関数を追加するというコードを登録しています。これを右下のボタンから実行してあげます。

Step4

あとは、このようにコンソールでfoo($r)のようにすれば、スニペットに登録した関数を実行することができます。

インスペクターであるオブジェクトを見ていて、「どこかに〇〇って名前のプロパティがあると思うんだけど、構造がよくわからない...」っていうときにGrepみたいなことってできませんか？

このオブジェクトの中に、"GestureRecognizer"ってオブジェクトがあるはずなんですが、それがどの階層にあるのかを検索する

という訳で、質問者さんが行うことは、この検索処理を行う自作関数を作成し、その引数に対象となるオブジェクトを渡して実行してあげるだけです。

質問者さんがどういった出力結果を考えているかは分かりませんが、引数に対象のオブジェクトを渡して実行すると、コンソールにツリー構造が展開された状態でそのオブジェクトのプロパティ一覧を出力してくれるようなものを作るなり、単に検索対象のプロパティーのみを出力してくれるものを作りなり、対象のプロパティーが存在しているかどうかの判定結果のみを出力してくれるものを作るなり
、あとは仕様次第だと思います。