This was reported in the vue-devtools repo as well here: vuejs/devtools#612

Installing this extension in Chrome breaks the Vuex pane of Vue-Devtools, showing "No Vuex store detected." The fix is to uninstall this extension.

backend.js:formatted:347 Uncaught TypeError: Cannot read property 'classList' of null
at Object.10 (backend.js:formatted:347)
at n (backend.js:formatted:11)
at Object.0 (backend.js:formatted:102)
at n (backend.js:formatted:11)
at Object.15 (backend.js:formatted:697)
at n (backend.js:formatted:11)
at Object.6 (backend.js:formatted:4305)
at n (backend.js:formatted:11)
at Object.74 (backend.js:formatted:4754)
at n (backend.js:formatted:11)

This line in particular:

    s && document.body.classList.add("platform-linux")

UI is empty :(

When loading a page, it correctly discovers everything, but when navigating to a new page, it doesn't register the new components. It requires a reload on that new page.

Why this is important:

It is very useful to be able to see the performance when switching views, because this is an important metric for perceived speed of the app.

I have a large list of data on a specific view, when trying to navigate away from this view, the main thread gets blocked. I'd like to know whether its possible to know for certain that this freeze is happening because of Vue taking too long to destroy all of the component instances... ?

The last update was on 2018, and the forks do not have any noticeable changes.

If anyone is volunteering to revive the project, feel free to write in this issue, as it would be nice to have multiple people participating in one project, rather than having multiple aimless forks.

Upon initial load (and some after load is finished), some of the times show as NaNms. Maybe a check in the milliseconds filter for if it is a number, and display -- or N/A could be helpful?

I get an error on every page after installing this in Chrome:

content_script_bundle.js:1 Uncaught SyntaxError: Identifier 'o' has already been declared
    at s (content_script_bundle.js:1)
    at content_script_bundle.js:1
    at content_script_bundle.js:19
    at s (content_script_bundle.js:1)
    at o (content_script_bundle.js:1)
    at Object.<anonymous> (content_script_bundle.js:1)
    at content_script_bundle.js:19
    at content_script_bundle.js:1
    at Object.<anonymous> (content_script_bundle.js:19)
    at Object.1134 (content_script_bundle.js:19)

Hey thanks for this nice tool.

Still I have one thing on my wishlist: sorting. It would be fantastic to be able to sort the results ba the various metrics (total, render, etc.)

This only worked with my app when using Vue 2.5, but not with Vue 2.6

Hello, silly question maybe, but how do I use this with Vue CLI? I am using Quasar with Vue CLI. Thank you.

Hello, im wonder any of you use performance dgevtool with quasar framework? https://github.com/quasarframework/quasar

Setting Vue.config.performance = true; just before new Vue should be enough, but my experiment with setting this property in boot file was not enough to enable this browser plugin correctly. Any of you guys have some expirience with quasar framework?

This likely happens elsewhere but this is where I noticed it. When the extension is installed in Chrome (Version 63.0.3239.132 (Official Build) (64-bit) - Mac) the links on LinkedIn.com fail to execute as they appear to be intercepted by the extension which throws a JS error.

Disabling the extension causes the website to work as expected.

There is a conflict with the recent versions of Vue DevTools (5.x+) which is described in issue #914

More specifically, this is related to some additional code inside the hook.once("vuex:init" callback which is missing in Vue-Perf-DevTool. The problem manifests itself by Vue DevTools not being able to detect the presence of Vuex store.

The workaround is to disable the Vue-Perf-DevTool extension - but the current implementation of the Performance tab in the recent Vue DevTools is not so informative. So the solution is to add the missing code and update the hook in Vue-Perf-DevTool to reflect the hook in Vue DevTools:

/src/backend/hook.js:

  hook.once('vuex:init', store => {
    hook.store = store
   
   // === the following code must be added ===

    hook.initialStore = {
      state: clone(store.state),
      getters: store.getters
    }
    // Dynamic modules
    if (store.registerModule) {
      hook.storeModules = []
      const origRegister = store.registerModule.bind(store)
      store.registerModule = (path, module, options) => {
        if (typeof path === 'string') path = [path]
        hook.storeModules.push({ path, module, options })
        origRegister(path, module, options)
      }
      const origUnregister = store.unregisterModule.bind(store)
      store.unregisterModule = (path) => {
        if (typeof path === 'string') path = [path]
        const key = path.join('/')
        const index = hook.storeModules.findIndex(m => m.path.join('/') === key)
        if (index !== -1) hook.storeModules.splice(0, 1)
        origUnregister(path)
      }
      hook.flushStoreModules = () => {
        store.registerModule = origRegister
        store.unregisterModule = origUnregister
        return hook.storeModules
      }
    } else {
      hook.flushStoreModules = () => []
    }     
  })

This is my code:

import Vue from 'vue';
Vue.config.devtools = true;
Vue.config.performance = true;
import App from './App.vue';

new Vue ({
  el: '#main',
  render: h => h (App),
});

devtool is ok.

but performance pannel is not.

Like vue-devtools, it will support for any platform, even mobile.

This is how I have it setup and I am using typescript and my file is named app.ts. It is a fully working app and the Vue dev-tools work fine, just not seeing any performance data.

import Vue from 'vue';
import AppRoot from './AppRoot.vue';
import router from './Modules/Routing/RouterSetup';
import store from './Modules/Storage/VuexSetup';

Vue.config.devtools = true;
Vue.config.performance = true;

const app = new Vue({
  router,
  store,
  render: (h) => h(AppRoot),
}).$mount('#app');

export default {
  app,
};

Add support to nuxtjs

Add support to safari