Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist Init Feb 3, 2018
media Init Feb 3, 2018
shells 0.0.6 Mar 3, 2018
src Fix #7 Mar 3, 2018
.eslintrc Init Feb 3, 2018
.gitignore Init Feb 3, 2018
README.md Merge branch 'master' of https://github.com/vue-perf-devtool/vue-perf… Feb 18, 2018
package-lock.json Init Feb 3, 2018
package.json 0.0.6 Mar 3, 2018
release.js Init Feb 3, 2018
vue1-test.html Init Feb 3, 2018
yarn.lock 0.0.4 Feb 8, 2018

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.

logo

Initially started after reading React Performance Devtool and created from Vue Devtool.

Installation

The below extensions represent the current stable release.

Implementation

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'

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

demo

  • 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

  1. Clone this repo
  2. npm install
  3. npm run dev
  4. A plain shell with a test app will be available at localhost:8080.

Testing as Firefox addon

  1. 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)
    
  2. Build and run in Firefox

    $ npm run build
    $ npm run run:firefox
    

    When using Yarn, just replace npm with yarn.

Acknowledgments

Special thanks to Evan You and vue-devtool contributors

License

MIT