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の変更から検知できるようにした雑なスクリプトはこちら。

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