Why is Vue.js Chrome Devtools not detecting Vue.js?

Question

I have the following code with a simple working Vue.js application. But the Vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to webstore, it says it is already added.

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

score 122 · Accepted Answer · edited Jun 25 '22 at 08:40

122

One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.

Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.

Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix

edited Jun 25 '22 at 08:40

Rijo

2,568
1
22
30

answered Feb 11 '17 at 06:05

Cesar Castro

1,892
1
13
19

13

Does not work. Need to install Beta version of Vue dev tools. – Čamo May 28 '21 at 11:44

score 112 · Answer 2 · edited Sep 06 '22 at 19:06

112

I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).

Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension

Remember to restart your browser afterwards.

edited Sep 06 '22 at 19:06

tony19

125,647
18
229
307

answered Nov 28 '20 at 18:25

Przemysław Niemiec

1,704
1
11
14

36

This is definitely the answer for Vue 3 issues – Rory Jan 30 '21 at 15:37
2

Firefox users should get the latest beta release from here: https://github.com/vuejs/vue-devtools/releases (until v6 has a stable release). The above link to the documentation goes to a specific version (which didn't work for me) rather than the latest one (which did work). – drojf Feb 18 '21 at 07:12
1

This worked the best! Thank you! – user9944315 Oct 24 '21 at 23:34

score 46 · Answer 3 · answered May 30 '21 at 20:31

46

UPDATE: 2021 May 30,

If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

answered May 30 '21 at 20:31

Hashan Shalitha

835
8
15

2

2021-07-05 still true, and this was the answer for me. – digitalextremist Jul 05 '21 at 23:56
2

It's strange that the extension documentation in the web store does not clear say that it is NOT compatible with Vue 3. For ***Firefox***, there's a beta version downloadable here: https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3 – henrykodev Jul 21 '21 at 10:40
4

Just to add a point `DO NOT FORGET TO RESTART THE BROWSER AFTER INSTALLATION` – BATMAN_2008 Jul 23 '21 at 09:11
1

I didn't need to restart my browser - using Vivaldi on macOS – Dave Nottage Nov 23 '21 at 01:45

score 16 · Answer 4 · edited Sep 06 '17 at 14:44

16

To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.

Source: https://github.com/vuejs/vue-devtools/issues/236

edited Sep 06 '17 at 14:44

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

answered Sep 06 '17 at 14:25

oriolowonancy

283
3
9

also mentioned in the github readme. https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix – UsamaMan Jun 21 '18 at 02:44

score 11 · Answer 5 · edited Jul 15 '22 at 01:21

11

Had the same issue and solved it by adding

Vue.config.devtools = true;

after Vue.js import script, then take look at chrome devtools. You will see a tab called Vue to inspect your vue instance.

reference: https://v2.vuejs.org/v2/api/#devtools

edited Jul 15 '22 at 01:21

tony19

125,647
18
229
307

answered Jul 28 '17 at 17:52

22nds

166
1
4

Cannot set property 'devtools' of undefined – fdrv Sep 05 '21 at 04:32

score 7 · Answer 6 · answered Dec 19 '16 at 04:50

7

I found out the answer, I was viewing a plain html file on my computer which was making the vue.js tool not load. I loaded up my local xampp server and ran the application from the local machine server url again and now vue.js devtools is working! :)

answered Dec 19 '16 at 04:50

Simon Suh

10,599
25
86
110

as a side note, I was having difficulty loading vue.js on my laravel application as well, and the trick was to run 'npm install' and then 'npm run watch' and now everything is working. I love working with Vue.js and Laravel! :) – Simon Suh Jun 12 '17 at 00:38

score 4 · Answer 7 · edited Jul 15 '22 at 00:22

4

Also you can disable with Vue config: https://v2.vuejs.org/v2/api/#devtools

edited Jul 15 '22 at 00:22

tony19

125,647
18
229
307

answered Dec 22 '16 at 16:10

David

923
8
19

score 3 · Answer 8 · answered Aug 22 '18 at 05:03

3

in the extensions folder in chrome browser, under the details tab in vue devtools extension, check the box having allow access to file URLs, this worked for me..

answered Aug 22 '18 at 05:03

monisha sampath

31
2

score 3 · Answer 9 · answered Nov 22 '20 at 17:47

3

If you're using Vue 3 and experiencing this issue, try installing the beta version of the Vue Devtools. It may help until the stable version gets the major refactor.

answered Nov 22 '20 at 17:47

David Morales

17,816
12
77
105

I struggled with this for ages before realising that Vue 3 isn't supported by Vue Devtools. I also had to disable the stable version for the beta to work. – Rory Jan 30 '21 at 15:37

score 3 · Answer 10 · answered Mar 27 '21 at 18:55

3

I had the same issue & solved it by:

Installing this extension Vue Dev Tools Beta Chrome Extention
Reloading the chrome browser.

answered Mar 27 '21 at 18:55

techmsi

433
1
5
21

score 2 · Answer 11 · answered May 24 '17 at 09:49

i had this problem, and i was expecting the vue-devtools to work by just including it. i had it console log the version

console.log("Vue Version " +Vue.version );

but this didnt work to actually load an instance of vue.

took me a few minutes, but once i actually created a vue instance, then it worked. this was the hello world example that made the devtools work :)

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})

score 2 · Answer 12 · answered Sep 21 '17 at 11:49

I solved the same problem. But in my case Vue.js Chrome Devtools didn't detect Vue.js because in html file was <script src="https://unpkg.com/vue"/>

I replaced it to <script src="https://unpkg.com/vue"></script> Now Chrome Devtools is detecting Vue.js perfectly.

Thanks for exapmle above.I use vue@2.4.4 and open my html by file://

score 2 · Answer 13 · answered Jan 02 '22 at 21:27

2

In the case of Firefox, install the beta version of vue-devtools, which supports Vue 3.

answered Jan 02 '22 at 21:27

ekene

111
8

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30723141) – hardkoded Jan 05 '22 at 17:17
1

@hardkoded I actually found this thread because I was having the same issue on Firefox. I thought the answer would be useful for someone on another browser. How should I post these types of responses then? – ekene Jan 06 '22 at 06:40

score 1 · Answer 14 · answered Oct 18 '19 at 14:27

1

If you have already turned on Allow Access to file URLs in chrome://extensions/ -> Vue Devtools and it still does not work, try reinstall the Vue Devtools, might work for you.

answered Oct 18 '19 at 14:27

SynergyChen

1,161
9
4

score 1 · Answer 15 · answered Aug 11 '21 at 15:03

1

check if vuejs app is not embedded in an iframe such as in a storybook app.

the hack in such a case is to work outside the parent frame working directly on the url of your iframe and the vue devtools should work fine.

answered Aug 11 '21 at 15:03

marcdahan

2,654
25
25

I am not able to "work outsite" because I use Google Application Script and it adds iFrame on top of my web application. Any idea what to do? – Radek Oct 02 '21 at 17:45
how ever vue3 is not ready. work with console.log for the moment – marcdahan Oct 02 '21 at 17:53
you mean Vue3 or Vue dev plugin? – Radek Oct 02 '21 at 18:30
1

I mean vue3 at this moment – marcdahan Oct 03 '21 at 17:46
Thank you for the hint (this is also my case). Unfortunately my app only works inside an iframe (needs an other application around it), so working outside is not an option. If you or somebody else has an idea how to activate devtools inside of an iframe, it would help me a lot. – Sergej Werfel Dec 09 '22 at 09:38

TrophyGeek · Answer 16 · 2019-02-05T21:20:52.847

0

I'm using Vue in electron and I have the electron main "app" separated Vue's "app".

When in the the debugger console, typing Vue was giving the error Uncaught ReferenceError: Vue is not defined

Here was my fix

window.vue = new Vue({
  components: {
    App,
    Login,
  },
  router,
  store,
  template: '<App/>',
}).$mount('#app');

The work-around was assigning window.Vue so the devtool could find it.

edited Feb 05 '19 at 21:20

answered Feb 04 '19 at 23:50

TrophyGeek

5,902
2
36
33

score 0 · Answer 17 · edited Apr 14 '20 at 05:59

0

The same problem here, and I've solved it.

If you are developing in the localhost environment and using Chrome Dev Tools then you need to give permission for the Vue.js extension to access the local files on your computer.

Config your Vue.js tool in Chrome extensions
Search for "Vue.js devtools"
Click on details
Check the "Allow access to file URLs" checkbox

edited Apr 14 '20 at 05:59

Sartaj Singh Gill

1,074
12
21

answered Apr 13 '20 at 09:12

ShuYU

1
1

score 0 · Answer 18 · answered Jan 28 '22 at 15:00

0

In my case I just had compiled for production npm run prod - which was the issue. As I ran in dev npm run dev, it started recognizing Vue.

answered Jan 28 '22 at 15:00

John

180
11

Why is Vue.js Chrome Devtools not detecting Vue.js?

18 Answers18

Linked