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

问题

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 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd, it says it is already added.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>

  <title>Document</title>
</head>
<body>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

<script>
  let data = {
    message: 'Hello World'
  }

  new Vue({
    el: '#application',
    data: data
  })
</script>
</body>
</html>

回答1:

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
http://codersdeck.com/vue-js-2-setting-vue-devtools/

回答2:

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

回答3:

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://vuejs.org/v2/api/#devtools

回答4:

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

回答5:

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

回答6:

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

回答7:

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

回答8:

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

回答9:

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.

回答10:

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.

来源：https://stackoverflow.com/questions/41215867/why-is-vue-js-chrome-devtools-not-detecting-vue-js

标签

Vue.js

devtools