Vueの再描画されたコンポーネントをハイライトするChrome拡張を作った

作ったもの

記事タイトルの通り、Vue.jsで再描画が走ったコンポーネントの輪郭をフラッシュしてハイライトしてくれるChrome拡張 + npmパッケージを作りました。

GitHub: yuichkun/vue-devtool-flash-updates

背景

Vueの開発をする上で、Vue.js devtools を使っている人は多いと思います。

React Developer Tools では以前から再描画されたコンポーネントを光らせてくれる機能があり、パフォーマンス問題の解消などに役立っていたのですが、どうやらVue devtoolsにはそれがないらしいことをissueなどから察しました。

今回作ったプラグインの導入方法のイメージはRedux Devtoolsと似たような感じで、

1. 専用Chrome拡張のインストール
2. 有効にしたいプロジェクトでnpmパッケージの追加・プラグインの導入設定

の二段構えになっています。

インストール方法

Chrome拡張

以下からダウンロードします。

Chrome web store: Vue Devtool Flash Updates

npmパッケージの追加

ハイライトを有効にしたいプロジェクトで

npm install -D vue-devtool-flash-updates

あるいは

yarn add -D vue-devtool-flash-updates

使い方

1. Chrome拡張・npmパッケージのインストールをする
2. 有効にしたいプロジェクトにてプラグインを導入する

import FlashUpdates from 'vue-devtool-flash-updates'

Vue.use(FlashUpdates)

3. プラグインが導入されたVueプロジェクトをChromeで開き、開発者ツールから Vue Flash Updates というタブを開き、有効化ボタンを押す

…基本的にはこれだけです。

有効なオプション

プラグインには、執筆時点(2021/09/15)で2つ指定可能なオプションがあります。

Vue.use(FlashUpdates, {/* ここにオプションを渡すことができる */})

isProduction

型: boolean
デフォルト値: false (※注意)

開発時以外にはプラグインを無効化したいという需要があると思います。
trueの時、機能が無効になります。
環境変数などを使うことで、本番環境では拡張機能を無効化することを推奨します。

logUpdatedComponents

型: boolean
デフォルト値: false

true の時、コンソールに再描画されたコンポーネントの名前が debug レベルで出力されます。

結び: 雑記

個人的にはChrome拡張を作ることも初めてで、プラグインもえいやっと作ったばかりなので、色々アラがある状態を自覚しているのですが、npm publish した後、どこにも宣伝していないのに初日で80人ぐらいからダウンロードがあり、とてもびっくりしました😳

そこで、もし需要があるのであればと思い、不肖ながら日・英・中の3言語でドキュメント用意したりしました。（特に中国語が苦手なので、得意な方いたら添削してください）

また、まだ全然いろんなケースを配慮できていないので、もしなにかバグや不具合を見つけたら、
ぜひissueを立てて頂けると非常に助かります🙏