VueJs dev tools panel not showing

问题

I started using vue dev-tools in my application but it is not visible when in developer mode in Chrome. I tried various solutions found on the dev-tools github page and in other places on the web, but no luck. Below are the things i have done/tried to get it to display.

Enabled allow access to file URL’s option in the chrome extension
Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
Added non-minified versions of VueJS file
Also I am using Chrome latest version: 55.0.2883.87.

I do get the following message when I click on the chrome extension

Except the panel is not actually showing.

Does anyone have a solution to this? Thanks.

回答1:

I could not get the Vue icon to be active on the menu bar, however I was able to get the Vue tab to show in the Chrome developer tools. Try the following:

Close the Chrome developer tools window
Hard refresh the browser
Re-open the developer tools window and look for the Vue tab

The icon in the toolbar might still indicate that it cannot detect Vue, but the tab should be visible in the Chrome developer tools.

回答2:

I had this same issue, I was using minified vue from cdn "vue.min.js" .Then I removed that and used non-minified vue. Then I reloaded browser and reopened console and the vue tab was there.

回答3:

Also found today that if you have an ad blocker installed that this also stops Vue Devtools from running properly.

回答4:

Closing the file tab and reopening it worked for me.

回答5:

For me, I was running a local HTML file. By default, Chrome blocks extensions from working on local files.

3-dot menu -> More Tools -> Extensions
Find the Vue extension, click details and change turn on the setting "Allow access to file URLs:

Screenshot

回答6:

Restart many times Google Chrome
Don't use min file
And add before new vue instantiation:
```
Vue.config.devtools = true;
```

回答7:

Just do a "hard reload" for a few times. On windows: SHIFT + F5. On Mac: CMD + SHIFT + R.

回答8:

Just do hard reload and close development console then reopen it.

回答9:

Please make sure you don't use the production CDN. The only way that make it work for me is to use the VueJS dev version.

Development : vue.js

回答10:

This happens to me periodically, pretty annoying because there seems to be no cause.

Go to Chrome browser extensions
Remove the Vue DevTools extension
Add it back again
Hard refresh your page

Chrome - Version 71.0.3578.98

MacOS Mojave 10.14

VueJS 2.5.21

回答11:

close the chrome app
re-run development server
re-open chrome app
open localhost
press F12 (to open development tools)

来源：https://stackoverflow.com/questions/41505150/vuejs-dev-tools-panel-not-showing

标签

vuejs2

Vue.js

vue-resource