Vue Devtool is not showing in my chrome devtool about devtools HOT 62 CLOSED

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 👍

from devtools.

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 :)

from devtools.

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

from devtools.

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?)

from devtools.

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

from devtools.

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

from devtools.

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

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

from devtools.

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

from devtools.

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.

from devtools.

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.

from devtools.

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.

This is the only thing that works for me

from devtools.

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.

from devtools.

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

from devtools.

I'm also using render: h => h(App),, is this the cause? I can't change it I think without adding unsafe-eval :/

from devtools.

Using devlopment script remove production script
https://cdn.jsdelivr.net/npm/vue/dist/vue.js

from devtools.

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

from devtools.

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.

from devtools.

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 [email protected]
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
#62 (comment)

from devtools.

I'm developing a Chrome Extension with [email protected] and [email protected], the vue devtool is not working in the extension's developer tool, but in normal webpage I can see the Vue panel.

from devtools.

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.

from devtools.

@admench Wow, sometimes it's so easy. Thanks for leaving the comment!

from devtools.

If i'm using as:
render: h => h(App), - DevTools not working

if change to:
components: { App }, - All fines.

from devtools.

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

from devtools.

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

from devtools.

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.

from devtools.

@FWSimon worked for me aswell!

from devtools.

And now its gone again.. hmm

from devtools.

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?

from devtools.

I dont think so @bayssmekanique

from devtools.

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

from devtools.

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

from devtools.

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

from devtools.

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

from devtools.

@jtomaszewski Will try that next time 👍

from devtools.

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

from devtools.

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

Yes, it's that here

from devtools.

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.

from devtools.

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

from devtools.

@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":

from devtools.

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.

from devtools.

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.

from devtools.

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.

from devtools.

Vue.config.debug = true;

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

from devtools.

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.

from devtools.

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

from devtools.

Thanks @danielwaghorn this helped me out too!

from devtools.

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

Vue.config.devtools = true;

from devtools.

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

from devtools.

@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~!

from devtools.

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

from devtools.

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

from devtools.

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?

from devtools.

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!

from devtools.

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. :(

from devtools.

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

from devtools.

When I use cdn, vue.min.js does not work, just change it to vue.js ,become work

from devtools.

While I know this issue might be old, I ran in the same problem, with a side effect: using a minified version of Vue, I was not able to access dev tools.
Now, the side effect: if using the Vue.config.devtools = true and Vue.config.debug = true before new Vue worked only after I went into a second page that used Vue.
So, to get it working in the first go, I put those two lines after new Vue.

from devtools.

First time in my life that spamming a command makes it work... wow!

from devtools.

Still same problem.

from devtools.

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 :)

Thanks

from devtools.

I had the same problem but I solved it
I downloaded the development version With full warnings and debug mode from the official Vue website

from devtools.

I have added vue.js dev tool but it dose not work and say vue is not detected

from devtools.