Vuejs DevTools not showing panel in developer tools

Question

I cannot get the vue development tools to show it's panel.

I've tried deleting and re-installing the extension, Hard refreshing, closing the tools and opening again, adding Vue.config.devtools = true; and a combination of all of them and it still does not show the panel. Any ideas?

I did notice that __VUE_DEVTOOLS_GLOBAL_HOOK__ doesn't have a Vue value... but I don't have a working dev tool to see if that should be otherwise.

macOS Catalina (version 10.15.5)

Version 83.0.4103.106 (Official Build) (64-bit)

Answer 1

UPDATE: Turns out the devTool github repo had an even better answer:

const app = new Vue(vueConfig).$mount('#app');
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor;

See here: https://github.com/vuejs/vue-devtools

---

Turns out it was a jest work around that was causing the problem. My jest tests weren't working with my normal vue instance so I had to mock it with the createLocalVue.

const localVue = createLocalVue();

localVue.use(VueRouter);

const router = new VueRouter();

The problem was that some tests were not liking that I had two vue instances (the one in main.js) with a router.

So I added logic to only add the router if it wasn't a test:

import Vue from 'vue';
import VueRouter from 'vue-router';

if (!process || process.env.NODE_ENV !== 'test') {
    Vue.use(VueRouter);
}

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
});

const vueConfig = {
    render: (h) => h(App),
};

// excluding for jest tests
if (!process || process.env.NODE_ENV !== 'test') {
    vueConfig.router = router;
}

new Vue(vueConfig).$mount('#app');

Unfortunately the if around the Vue.use() is what broke it:

// removing this if() fixed it and the vue dev tools panel now shows up.
if (!process || process.env.NODE_ENV !== 'test') {
    Vue.use(VueRouter);
}

Something about the way the dev tools inits needed the router to be installed. I also wonder if they use a process with "test" or something. Either way, this is resolved for me. Hope it helps someone else.

Answer 2

I was facing the same issue and able to solve by avoiding vue.min.js for development purpose. Use original version (vue.js) instead of the minify version.

Answer 3

1. load the page without Devtools open

2. press the Vue Devtools button in the extensions area (might say "Vue.js not detected", but don't let that bother you). In some setups, this step is crucial.

3. only then open Devtools by hitting F12. Vue tab should appear (check to the very right of all tabs, you can drag it to the left)

   https://stackoverflow.com/a/62446093/15265413