🇬🇧 English Version
🇨🇳 中文版
🇯🇵 日本語版 👈
再描画の走ったVueコンポーネントをハイライトしてくれる画期的な開発ツール！
このプラグインをVueプロジェクトに導入すれば、React Developer Toolsのように、再描画の走ったコンポーネントをハイライトできるようになります。
いいから早く見せろって?
簡単なTodoアプリをデモで作りました:
- こちらからChromeの拡張プラグインをインストールしてください。
- こちらのデモサイトをクリック。
- 開発者ツールから
Vue Flash Updatesのタブを開いて、機能を有効化しましょう! ⚡️⚡️
再描画の走ったコンポーネントの名前も、コンソールにデバッグレベルで出力されます。
npm install -D vue-devtool-flash-updatesあるいは
yarn add -D vue-devtool-flash-updates- Chromeストアから拡張機能をダウンロード.
- 使いたいプロジェクトでnpmパッケージをインストールし、下記のようにセットアップします。
import FlashUpdates from 'vue-devtool-flash-updates'
Vue.use(FlashUpdates)- 開発者ツールを開き、プラグインを有効化します。
ね、簡単でしょう？ 🔥
ところで、
もしこのリポジトリを少しでもいいと思ってくれた方は、GitHub上でスターを押してくれるともっと頑張ろうと励まされるのでよかったら是非お願いします 💪
| 名前 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
logUpdatedComponents |
Boolean | false |
trueの時, 再描画の走ったコンポーネントの名前をdebugレベルでコンソールに出力します。 |
isProduction |
Boolean | false |
trueの時, プラグインを無効化します。 |
コツ⚡️:
本番環境でこのプラグインが使えることは望ましくないので、isProduction オプションに真偽値を渡してコントロールしてください。オススメの方法は、process.env.NODE_ENV === 'production' と渡しておいて、webpackなどでのバンドル時に環境に応じてプラグインを無効化することです。
import FlashPlugin from 'vue-devtool-flash-updates'
Vue.use(FlashPlugin, {
isProduction: process.env.NODE_ENV === 'production' // 本番環境では無効になり、それ以外では有効になる
})もしも何かバグを見つけたり提案がある場合は、こちらからお願いします。
the contributing fileをご確認ください!
PRはいつでも大歓迎です 😎!
READMEをいじる場合は、standard-readme仕様に準拠をお願いします。
MIT © 2021 Yuichi Yogo