devtools: Vue.js not detected

@Dorian https://github.com/vuejs/vue-devtools#commom-problems-and-how-to-fix

Fixing “Download the Vue Devtools for a better development experience” console message when working locally over file:// protocol: 1.1 - Google Chrome: Right click on vue-devtools icon and click “Manage Extensions” then search for vue-devtools on the extensions list. Check the “Allow access to file URLs” box.

If your not using a server, then you might have a url with file://your_file_location.html. In chrome this can be fixed by right clicking on Vue JS icon, -> Manager Extensions and under Vue JS Extension there will be option to allow access to file URL. Refresh your page and this should solve this problem (at least on chrome).

I also spent an hour or two trying to figure out why Vue Devtools toolbar button in the Chrome Menu always stays grey and says Vue.js not detected when clicked until I found this closed issue.

It looks like the Vue pane shows up in the dev tools anyway at least for localhost and the Vue guide/docs where Vue is loaded.

The issue still persists though and should be fixed, so that the button also states that Vue is detected (when it actually is), because otherwise it is very confusing to new users. So I suggest to reopen this issue.

For some reason though the Vue pane doesn’t seem to show in JSFiddle with the Hello Vue example. Maybe this should be opened as another issue?

Actually, I see it in the chrome dev tools pane, but I got confused by the fact that it says Vue.js not detected when I click on grey Vue icon in the “Chrome Menu”.

I solved this problem with right click on the Vue icon, managing extension, click on ‘Allow access to file URL’

F5 in your project and ready. Cheers. <span class="emoji-outer emoji-sizer"><span class="emoji-inner" style="background: url(chrome-extension://immhpnclomdloikkpcefncmfgjbkojmh/emoji-data/sheet_apple_32.png);background-position:46.00470035252644% 20.035252643948294%;background-size:5418.75% 5418.75%" data-codepoints="1f47d"></span></span>

I experienced the same. Simply solve by adding js files (as vue.js ) at the end of the html codes. I think rendering order is going wrong somehow.

When i check the “Allow access to file URLs” box and open again the index.html with

<script src="https://unpkg.com/vue"></script>
<div id="app">
		<p>{{message}}</p>
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue.js!'
			}
		})
	</script>

the Vue Devtools toolbar button is on

I came across this same issue, after I upgrade Chrome and restart Chrome, it works fine.

@Dorian https://github.com/vuejs/vue-devtools#commom-problems-and-how-to-fix

Fixing “Download the Vue Devtools for a better development experience” console message when working locally over file:// protocol: 1.1 - Google Chrome: Right click on vue-devtools icon and click “Manage Extensions” then search for vue-devtools on the extensions list. Check the “Allow access to file URLs” box.

Not working after i done like this. Vue.js not detected happened when:

1. Url is http://127.0.0.1:8081
2. vue.js script url is https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
3. console Vue.config.devtools was true

or some reason though the Vue pane doesn’t seem to show in JSFiddle with the Hello Vue example. Maybe this should be opened as another issue?

No, that’s normal, it’s on an iframe

If you can boil down the error and provide a repro using this template, feel free to open a new issue