Vue Devtool is not showing in my chrome devtool

[FWSimon]

I opened my Chrome Devtool today and now the Vue Devtool menu is gone.

Am i the only one have this problem?

Im using Chrome Version 47.0.2526.80

[svenluijten]

Possible duplicate of #13, make sure you're running a non-production build of Vue.js.

[lijialiang]

today i run the local demo with vue-loader-example , Vue Devtool menu does not appear， Chrome Version 47.0.2526.106 (64-bit)

[nacr]

Same problem here Chrome Version 48.0.2564.48 beta-m (64-bit)

[nerdoza]

I have been trying for a little over a week to get the Vue Devtool to work, but I have yet to either. Version 47.0.2526.106 (64-bit)

I've uninstalled, reinstalled then uninstalled, rebooted, installed and still nothing.

@yyx990803 : Using the non-minified version, Vue version 1.0.11-csp. Building with Browserify from NPM.

[yyx990803]

To anyone having issue in this thread: Make sure to use the non-minified build of Vue.js.

If you are using a non-minified build and still having the issue, please note the exact Vue version you are using, and your build setup (using directly from CDN? with Browserify/Webpack?)

[FWSimon]

I was using the non-minified build and lastet version 1.0.12 with browserify.

it was gone and when i did a CMD+ALT+I like 5-10 times it came back :+1:

[ghost]

@FWSimon worked for me aswell!

[FWSimon]

And now its gone again.. hmm

[nerdoza]

I was able to get it to appear when I was on the Vue.js site, but not on my own project.

Is it possible that it has something to do with the fact that I'm building a Chrome App? Would that prevent whatever parsing or messaging that is supposed to occur from happening?

[FWSimon]

I dont think so @bayssmekanique

[arecaps]

Same issue, sometimes it shows, and sometimes not Using 1.0.10 with browserify

[nerdoza]

So I've done some quick testing and I think my issue might be related to the fact that I'm working with a Chrome app.

On any normal web page, !!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue) will return either true or false. However on a Chrome app, it throws a Uncaught TypeError: Cannot read property 'Vue' of undefined(…) and the __VUE_DEVTOOLS_GLOBAL_HOOK__ is not defined on the window object. I've not yet been able to figure out why this is (my guess Chrome has some security rules preventing it).

[nacr]

@yyx990803 I'm using a CDN and I still get no dev tools :|

[nacr]

Ok removed extension and reinstalled it and its working for now, will give more feed back lather. tks

[FWSimon]

@nacr-dev i have done that to before and that worked also for me

[jtomaszewski]

Full restart of my Chrome helped in my case. IMHO we could add it to the README.

[FWSimon]

@jtomaszewski Will try that next time :+1:

[oak-innovation]

For people coming here later:

I am using Chrome 48 (Mac), Vue 1.10.17 and vue-dev-tools 1.1.6. In my case, the vue-dev-tools button showed up as soon as I had accessed my code by the http(s) protocol.

Before, I was developing some simple files with file:///. Doing so, the vue-dev-tools button never showed up, regardless of how much restart and browser cache clearing and so on.

It could be the dev-tools don't work correctly with local files, so you might want to check this too.

---

Edit (12.3.16): Now I have just seen that this has been added to the readme. So the discussion above is outdated.

---

And again: according to this delta, this problem should have been solved by version 1.1.4. I am running 1.1.6. Maybe something got lost. I've downloaded the plugin from the Chrome repo 12.3.16, about 14:30. It's just meant as a hint.

[mdesantis]

I'm affected by this issue too, on Chromium 49.0.2623.87 Ubuntu 14.04 (64-bit) with a not minified Vue v1.0.18

[blake-newman]

This seems to be reproduceable, if you have Dev tools open prior to opening thepage with Vue available.

Perhaps the detection needs to be modified to pollz if possible.

[mdesantis]

This seems to be reproduceable, if you have Dev tools open prior to opening thepage with Vue available.

Yes, it's that here

[taoeffect]

Nothing I do seems to get Chrome tools to work. :-\

Setup:

• OS X 10.11.4
• Chrome 49.0.2623.108
• vue.js 1.0.17
• devtools 1.1.6
• Using grunt-browserify to generate app.js. NODE_ENV=production not set. I even tried explicitly passing browserifyOptions: {debug: true} and setting Vue.config.devtools = true
• In the Chrome console !!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue) returns true
• Page being loaded over http://localhost:8000
• vue-router being used, rooted on /simple/ such that the page /new-user maps to http://localhost:8000/simple/new-user
• Have verified non-minified js being served

You can see our project's Gruntfile here.

[yyx990803]

@taoeffect looks like everything is right, can you reproduce on different machines?

[taoeffect]

@yyx990803 OK, now all of a sudden the "Vue Tools" button is available in Chrome's devtools panel thing. I don't know what made it appear other than maybe restarting chrome a few times? The Vue button in the toolbar at the top is oddly greyed out still though. Is that supposed to be the case?

Also, how do I get it to recognize the name of the component? Currently it sees it as "Anonymous Component":

[yyx990803]

The grey button doesn't do anything. Chrome has recently made a stupid update which displays an icon for all extensions no matter if it uses a browser action or not. However it doesn't allow invoking devtools from a browser action, so you always have to open devtools yourself.

To get names define the name option for your route components. On Sun, Mar 27, 2016 at 11:27 PM Greg Slepak notifications@github.com wrote:

@yyx990803 https://github.com/yyx990803 OK, now all of a sudden the "Vue Tools" button is available in Chrome's devtools panel thing. I don't know what made it appear other than maybe restarting chrome a few times? The Vue button in the toolbar at the top is oddly greyed out still though. Is that supposed to be the case?

Also, how do I get it to recognize the name of the component? Currently it sees it as "Anonymous Component":

[image: screen shot 2016-03-27 at 8 25 56 pm] https://cloud.githubusercontent.com/assets/138706/14070347/25b8a44c-f45a-11e5-8a05-618df677a7e1.jpg

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/vuejs/vue-devtools/issues/62#issuecomment-202217672

[zhenizhui]

I also encountered this problem. But I have solved it.

The Vue version is v1.0.21(a non-production build of Vue.js), and the Chrome version is 50.0.2661.87.

go to chrome://extensions, and find the vue-devtools plugin, selected this option---"Permission to access the file URL"

and the problem is solved :)

[dajnz]

Hello, I see no vue-devtools tab in my chrome dev toolbar.

OS: Ubuntu 14.04 Chrome: v.50.0.2661.75 (64bit) Vue: v.1.0.21 loaded from cdn - non minified (also tried v.1.0.20) Vue-devtools: v.1.2.0 !!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue) returns true Page url: http://localhost:8000

Also tried this, but with no effect for me:

go to chrome://extensions, and find the vue-devtools plugin, selected this option---"Permission to access the file URL"

At the same time, I've another vue project, also runned from localhost on the same computer and browser, vue-devtools version is the same and vue version is v.1.0.20. But for building of this project I use webpack, and devtools works fine.

[highlabs]

Same problem here. :/

I'm using:

OSX 10.11 (15A284)
Chrome 50.0.2661.94 (64-bit)
VueJs 1.0.21
ClickAway 1.1.1
Vue-resources 0.1.16

Sometimes Vue devtools just stop working. I need to restart google chrome to start vue devtool again.

[vlatkoIT]

I had the same problem. The thing with me was that I opened the same website in localhost and on the server. I am not sure which one first, but as @highlabs said I had to restart Google Chrome. The specs of my machine look like this:

Google Chrome   50.0.2661.94 (Official Build) m (32-bit)
Operating system   Windows 10
Vue.js    v1.0.21
vue-router   v0.7.13

I didn't use vue-resource and use different OS, so I would logically assume it is connected to Vue.js issue. I use browserify with Laravel Elixir to pull npm version of Vue. I'm not knowledgeable to discuss more, so please ask for more info.

[highlabs]

Some feedback:

I'm now using VueJs without CDN and added Vue.config.debug = true;. Now everything is fine.

But I don't know if it's the solution, but worked for me.

[murbanowicz]

Vue.config.debug = true;

@highlabs where did you put it? I tried in main.js file but it is not working

[highlabs]

@mariaczi Just before my new Vue ({}) .

I added Vue.config.debug = true; and Vue.config.devtools = true.

[xori]

Adding Vue.config.debug/devtools = true didn't work for me until I removed the dev-server subdirectory in the url (http://localhost:8080/webpack-dev-server -> http://localhost:8080) and then closed chrome devtools and reloaded the page. I can consistently repeat this.

Vue: 1.0.24, Vue-Devtools: 1.2.0, Chrome 50.0, Windows 8.1

While I'm happy I can finally get it to work, it sucks it doesn't work with hot reload.

[maple-leaf]

Thanks @xori . Yes, I reopen chrome devtools after setting Vue.config.devtools = true, vue devtools show up.

[zenoven]

I'm developing a Chrome Extension with vue@1.0.26-csp and devtool@2.0.2, the vue devtool is not working in the extension's developer tool, but in normal webpage I can see the Vue panel.

[danielwaghorn]

I had the same issue when using Vue with a Browserify setup. Even though Vue.config.devtools was set to true they still failed to show. Upon inspecting window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue I noticed that it remains undefined.

If I run window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue; in the console and reopen Chrome's developer tools they load correctly, so it looks as if this is possibly an issue where the hook is not set correctly when the devtools flag is set.

EDIT: I had this issue as npm installed Vue 1.0.0-rc2 for some reason. Changing the version to 1.0.26 seemed to resolve issues for me.

[ilyen85]

Thanks @danielwaghorn this helped me out too!

[cnweibo]

@highlabs , thanks, the solution for me exactly is following, hope it will help out other guy:

Vue.config.devtools = true;

[yyx990803]

@cnweibo you shouldn't need to do that unless you are using the minified version - but you should not be using the minified version during development because it doesn't give you any warnings.

[cnweibo]

@yyx990803 , i am using vue-cli webpack template for development(both for dev and for build). I will run:

npm run build

I have no idea how to guide webpack to use non-minified version vuejs in that case. So i always get the minified version vuejs. That is why i must use the Vue.config.devtools = true. By the way, can you tell me how can I change vue-cli webpack configuration to guide webpack to build with non-minified version vuejs in any case? thanks~!

[yyx990803]

@cnweibo it should show up during dev. Devtools is disabled in production build by default for security reasons. You should only enable it if you know what you are doing.

[blake-newman]

In most scenarios, when you have the devtools open previously and the vue tab does not exist, just reopen them. I've not been able to reproduce this recently. Closing as it is stable.

[tommyip]

For anyone still wondering, Vue 1.0.18+ now includes option to enable devtools even in production environment. Put this in your script: Vue.config.devtools = true

[mal90]

I am experiencing this issue after tried everything mentioned here . Things i have done to solve this

1. Enabled “allow access to file URL’s option” in the chrome extension
2. Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
3. Added Non-minified versions of VueJS file
4. Also i am using chrome latest version Version 55.0.2883.87

After trying all of the above , i still can't see the dev-tools panels . but i get this message from the chrome extension "Vue.js is detected on this page. Open Chrome Devtools and look for the Vue panel." But no panel visible in the inspect element page .

Can anyone point me the correct direction. ?

[mbokil]

The extension worked fine for me. Using Chrome 56 and latest Vue stable v2.1.10.

1. Used non-minified vue.js
2. Enabled "allow access to file URL's" option in the chrome extension.
3. Opened Chrome dev tools and Vue tab appears at the end

[vedmant]

I started to have this problem as well after switched my build system to Webpack 2. JS is not minified, I don't use webpack dev server, Vue.config.debug = true; Vue.config.devtools = true; are set. All components from Vue dev tools just disappeared and it's telling me that Vue is running in production mode and author disabled dev tools. I see in console: [vue-devtools] Ready. Detected Vue v1.0.14

Update: After upgrading to Vue v1.0.18 it was fixed. However I started to have different problems with my project and rolled back to v1.0.14. Is there any way to make vue dev tools work on v1.0.14?

[admench]

Close Dev tools and reopen, that did it for me!!

[rebers]

Adding Vue.config.debug/devtools = true didn't work for me until I removed the dev-server subdirectory in the url (http://localhost:8080/webpack-dev-server -> http://localhost:8080) and then closed chrome devtools and reloaded the page. I can consistently repeat this.

This was still the case today, on Vue 2.3.3 with OnsenUI. While on /webpack-dev-server the devtools did not show up, but the second I went to / it all worked. Very annoying!

[dinhtq]

For some reason, whenever my chrome updates or I sign in and out and in again, the Vue dev tool does not appear. Tried CMD+OPTION+I many times and quitting and restarting Chrome, and still doesn't seem to work.

Turns out, in Chrome settings -> More Tools -> Task Extensions, the Vue Dev Tools was disabled. :(

[AlexZeitler]

Using a non-minified version like https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js fixed it for me.