Vueコンポーネントがアップデータされた時にハイライトされる開発者ツールを作ってみる
yuichkunもしかしたら無理で挫折するかもしれないけど、種々の経験からいけそうな気もしているので、やってみる。
yuichkunやりたいもの
- React Devtoolsみたいな感じで、レンダリングが走ったコンポーネントがハイライトされる
- 開発時のみ有効にできる
- ブラウザの開発者ツールから機能のON/OFFをトグルできるといいな
既存のVue Devtoolsは？
feature request はある
yuichkunReact界隈の方の流れ的な？
https://github.com/facebook/react/issues/16437 で一回機能が消えたらしい。
が、このPRで復活した
↑を読む限り、どうやらWebGLで枠線を描画しているらしい。
yuichkunCSS Animationでborderの色をアニメーションするのが簡単そう？
yuichkunもしコンポーネントごとあるいはレンダリングの回数ごとに枠線の色を変えたい場合は、CSS Variableあたりを使うのが1番エコな気がする
あと、丁寧にやるなら、擬似要素に対して枠線出させるのが正解か
yuichkunミニマル実装
-
Vue.mixinで全てのコンポーネントにレンダリング時に枠線を出す処理を追加する
- CSSで枠線のアニメーションをするクラスを削除・追加
- レンダリング時に当該クラスを当該コンポーネントに追加
- Chromeの開発者ツールにトグルするUIを埋め込む
- npm publishしたい
追加検討要素
- 枠線の色を条件によって変える
- 条件自体をどのようにするか検討の必要あり。React Devtoolsは単位時間内のレンダリング回数のよう。
- 擬似要素に対して枠線を出させるようにする
yuichkunピカピカアニメーション用のスタイルは逐一生成よりは、初期化時にグローバルに置いておく方がよさそう。
const animationCss = `
// styleをここに書く
`
const style = document.createElement('style')
style.innerHTML = animationCss
document.head.appendChild(style)
こんな感じでいけた
yuichkunbox-sizing を border-box にしないとborderのせいで位置崩れが起きることがわかった
yuichkun位置崩れ対策で、::before を使うことにした。
position: absolute でブロック要素にして、横幅と縦幅を親要素に対して100%に設定する。
pointer-events: none を指定しないとクリックイベントなどを巻き取ってしまった。
yuichkunどうやらCSSアニメーションを高速でトグルしようとしても、ブラウザがそういった処理をバッチで行うため、なんらかの方法で待たせないといけないらしい。
色々紹介されていたが、これが1番手っ取り早く動いた。
void element.offsetWidth;
そもそも拡張機能の書き方自体を忘れたので調べた。
公式にミニマルな実装方法が載っていて助かった。
ひとまずUIパネルは簡単に追加できた。
yuichkun2日目進捗もろもろ
- UIパネルにチェックボックスを追加
- チェックボックスとVue側の繋ぎ込み
- てきとーにアイコン作成
- 簡単なアニメーション・インタクションを追加
管理パネルこんな感じになった
yuichkunただのMixinとして作っていたものをPlugin化した
これで呼び出す側では
import FlashUpdates from 'vue-devtools-flash-updates' // という名前でpublishするつもり
Vue.use(FlashUpdates)
で使えるようになる