Open Site Navigation

Chrome Devtoolsからの変更をMutationObserverで取得する

開発時にDevtoolsのElementsパネルから動作を確認しながらUIを変更したりすると思うのですが、もういっそのこと要素パネルで開発したいと思っていました。


なんとなくできそうなことがわかったのでメモがてら残します。

MutationObserver というAPIがブラウザにあり、要素の変更を検知できるのでそれを利用する


動きはこんな感じ

  • Devtoolsから要素のstyle,classをいじる

  • MutationObserverが要素を検知

  • その要素をReactの window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers で取れるrenderのfindFiberByHostInstance関数に渡すとソースコードの位置がわかる

  • File System Access API経由でソースコードにアクセス

  • 変更部分をbabel ASTに渡す

  • 新しいソースコードを書き込む

という流れでDevtoolsから直接ソースコードへ反映することができる。


とりあえずDomの変更から検知できるようにした雑なスクリプトはこちら。

また色々作りながらなんか形になりそうだったら記事書くと思う

head1

id

Table of contents