web-dev-qa-db-fra.com

Pourquoi Vue.js Chrome Devtools ne détecte-t-il pas Vue.js?

J'ai le code suivant avec une application de travail Vue.js simple. Mais le devtools vue.js ne répond pas. Cela fonctionnait bien il y a quelques jours, maintenant cela ne fonctionne plus, qu'est-ce qui pourrait mal se passer? quand je vais à https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnanhbledajbpd , il est déjà ajouté.

<!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/[email protected]/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>
vue.jsdevtools
6
Simon Suh

Une alternative consiste à configurer un serveur Web local, comme l'OP déjà indiqué .
L’autre - l’IMHO est plus rapide et moins harcelant - permet à l’extension d’avoir accès aux URL de fichier, qui est désactivé par défaut.

Allez simplement à chrome://extensions et laissez la case "Autoriser l'accès aux URL de fichiers" cochée pour Vue.js devtools.

Source: http://codersdeck.com/vue-js-2-setting-vue-devtools/

26
Seza

Avait le même problème et résolu en ajoutant

Vue.config.devtools = true;

après le script d'importation Vue.js, jetez un coup d'œil à chrome devtools. Vous verrez un onglet appelé Vue pour inspecter votre instance de vue.

référence: https://vuejs.org/v2/api/#devtools

3
22nds

J'ai découvert la réponse: je visionnais sur mon ordinateur un fichier HTML simple qui ne chargeait pas l'outil vue.js. J'ai chargé mon serveur xampp local et exécuté l'application à partir de l'URL du serveur local; maintenant, vue.js devtools fonctionne! :)

3
Simon Suh

Pour résoudre ce problème, allez simplement à chrome://extensions/, faites défiler jusqu'à la vue.js devtools et activez le "Autoriser l'accès aux URL de fichiers" en cochant sa case.

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

2
oriolowonancy

dans le dossier extensions de Chrome Browser, sous l’onglet Détails de la vue devtools extension, cochez la case autorisant l’accès aux URL de fichiers, cela a fonctionné pour moi ..

2
monisha sampath

Vous pouvez également désactiver avec Vue config: https://vuejs.org/v2/api/#devtools

2
Dabbbb.

J'ai résolu le même problème. Mais dans mon cas Vue.js Chrome Devtools n'a pas détecté Vue.js car dans le fichier html était <script src="https://unpkg.com/vue"/>

Je l'ai remplacé par <script src="https://unpkg.com/vue"></script>Maintenant, Chrome Devtools détecte parfaitement le fichier Vue.js.

Merci pour un exemple ci-dessus. J'utilise [email protected] et ouvre mon code HTML par file://

1
genevralancer

j'avais ce problème et je m'attendais à ce que vue-devtools fonctionne en l'incluant simplement. Je l'ai eu consigner la version

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

mais cela n'a pas fonctionné pour charger réellement une instance de vue.

cela m'a pris quelques minutes, mais une fois que j'ai créé une instance de vue, cela a fonctionné. c’est le bon exemple du monde qui a fait fonctionner devtools :)

let data = {
  message: 'Hello World'
}

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

J'utilise Vue dans electron et j'ai l'appli principale "app" séparée de Vue.

Dans la console du débogueur, taper Vue donnait l'erreur Uncaught ReferenceError: Vue is not defined

Voici ma solution

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

La solution de contournement était assigning window.Vue afin que le devtool puisse le trouver.

0
TrophyGeek