Conflict with latest version of Vue DevTools (5.x)

[tmcdos]

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 = () => []
    }     
  })

[dsl101]

Just using that code, it complains that clone is undefined. Is that supposed to exist as a global function?

I tried using a local one like:

function clone (obj) {
  if (obj === null || typeof obj !== 'object') return obj
  var copy = obj.constructor()
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr]
  }
  return copy
}

and the extension now loads with no warnings in the console, and no complaints from vue-devtools either.

However, it still doesn't seem to record anything. I have Vue.config.performance = true, but in the Vue Performance tab, all I see is 'No measures found'. It's a shame, as it did provide some useful insights. The main vue-devtools performance tab seems to have lots of inconsistencies—like claiming that it's taking 142,019ms to render a page that actually takes about 3 seconds...

[tmcdos]

Hm, actually clone(parent, circular, depth, prototype, includeNonEnumerable) exists both in /src/backend/hook.js and /src/backend/clone.js from the latest Vue-DevTools. I am not sure why it has not complained on my installation - but even with this code added, these 2 browser extensions still fight somehow because VueDevTools does not automatically load Vuex state when VuePerformance is active - you need to manually click on "Load state". It would be perfect if VueDevTools integrates VuePerformance but I do not think there is someone who cares enough ....