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の変更から検知できるようにした雑なスクリプトはこちら。
また色々作りながらなんか形になりそうだったら記事書くと思う