Vue Performance Devtool

Vue Performance Devtool

Vue Performance Devtool is an interesting tool, a chrome and firefox extension to review the performance of Vue.js applications.

It statistically examines the performance of Vue components based on the measures which are collected by Vue using window.performance API.

It was inspired by React Performance Devtool and created from Vue Devtool.

Extensions

Below are the stable releases for the extensions for Chrome and Firefox.

• Chrome extension

• Firefox extension

  Usage

After you have installed the extension, you can use the performance devtool, by allowing vue-devtools inspection nd performance in your js file:

// make sure to set this synchronously immediately after loading Vue
Vue.config.devtools = true
Vue.config.performance = true

Setting performance to true enables component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the performance.mark API.

Explanation

I am using the example app using Vuex from the free course Vuex for Everyone by Vueschool, and applying the Vue Performance Devtool.

This is just a simple example to explain the values that are displayed in the tool's tab at the developer console.

• 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.

This project is open sourced under the MIT. By @rafaesc92