Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components.
Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components. It statistically examines the performance of Vue components based on the measures which are collected by Vue using window.performance
API.
Initially started after reading React Performance Devtool and created from Vue Devtool.
The below extensions represent the current stable release.
To use this performance devtool extension, you'll need to allow vue-devtools inspection and performance
// make sure to set this synchronously immediately after loading Vue and before `new Vue`
Vue.config.devtools = true
Vue.config.performance = true
Note: if you keep Vue.config.performance = true
on production, you will also be able to use Vue official devtools in the production build. If you don't want that, you can toggle the config to false by using an environment variable:
Vue.config.performance = process.env.NODE_ENV !== 'production'
npm install
npm run dev
localhost:8080
.Install web-ext
$ npm install --global web-ext
Or, for Yarn:
$ yarn global add web-ext
Also, make sure PATH
is set up. Something like this in ~/.bash_profile
:
$ PATH=$PATH:$(yarn global bin)
Build and run in Firefox
$ npm run build
$ npm run run:firefox
When using Yarn, just replace npm
with yarn
.
Special thanks to Evan You and vue-devtool contributors