README.md

Vue Performance Devtool

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.

Implementation

// make sure to set this synchronously immediately after loading Vue and before `new Vue`Vue.config.devtools=trueVue.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'

Uses

Remove or unmount the component instances which are not being used.

Inspect what is blocking or taking more time after an operation has been started.

Examine which components are taking more time to load.

Description

Init: Time taken in "beforeCreated" and "created" of lifecycle.

Render: Time taken to create the instance in javascript.

Patch: Time taken to render in dom.

Development

Clone this repo

npm install

npm run dev

A plain shell with a test app will be available at localhost:8080.

Testing as Firefox addon

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: