web-dev-qa-db-fra.com

Le panneau Outils de VueJs ne s'affiche pas

J'ai commencé à utiliser vue dev-tools dans mon application, mais celle-ci n'est pas visible en mode développeur dans Chrome. J'ai essayé diverses solutions trouvées sur la page de github de dev-tools et ailleurs sur le Web, mais sans succès. Vous trouverez ci-dessous ce que j'ai fait/essayé de faire afficher.

  1. Enabled allow access to file URL’s option dans l'extension chrome
  2. Ajout de Vue.config.debug = true;Vue.config.devtools = true; juste avant la nouvelle Vue ({})
  3. Ajout de versions non minifiées du fichier VueJS
  4. J'utilise aussi Chrome la dernière version: 55.0.2883.87.

Je reçois le message suivant lorsque je clique sur l’extension chrome  enter image description here

Sauf que le panneau ne montre pas réellement. 

Est-ce que quelqu'un a une solution à cela? Merci.

vuejs2vue.jsvue-resource
10
Malik

L'icône Vue ne pouvait pas être activée dans la barre de menus, mais l'onglet Vue était affiché dans les outils de développement de Chrome. Essayez ce qui suit:

  • Fermez la fenêtre des outils de développement Chrome.
  • Difficile d'actualiser le navigateur
  • Rouvrez la fenêtre des outils de développement et recherchez l'onglet Vue.

L'icône de la barre d'outils peut toujours indiquer qu'il ne peut pas détecter Vue, mais l'onglet doit être visible dans les outils de développement de Chrome. 

16
Daryn

J'avais le même problème, j'utilisais une vue réduite de cdn "vue.min.js" .Ensuite, je l'ai supprimée et utilisé une vue non réduite. Ensuite, j'ai rechargé le navigateur et rouvert la console et l'onglet Vue était là.

6
Romy Gomes

Nous avons également constaté aujourd'hui que si vous bloquiez l'installation d'un bloqueur de publicité, cela empêchait également Vue Devtools de fonctionner correctement.

4
Steven Grant

Fermer l'onglet dossier et rouvrir ça a fonctionné pour moi. 

1
Bhoomika Chauhan

Il suffit de faire un "rechargement dur" plusieurs fois. Sur les fenêtres: MAJ + F5. Sur Mac: CMD + SHIFT + R.

1
denic

Assurez-vous de ne pas utiliser le CDN de production. La seule façon de le faire fonctionner pour moi est d’utiliser la version dev de VueJS.

Développement: vue.js

0
Mohamed Salem Lamiri

Pour moi, je courais un fichier HTML local. Par défaut, Chrome empêche les extensions de travailler sur des fichiers locaux.

  • Menu à 3 points -> Plus d'outils -> Extensions

  • Recherchez l'extension Vue, cliquez sur détails et modifiez le paramètre "Autoriser l'accès aux URL de fichier:

Capture d'écran

0
swiftB3

Il suffit de recharger et de fermer la console de développement, puis de la rouvrir.

0
thavorac

  • Redémarrez plusieurs fois Google Chrome

  • Ne pas utiliser le fichier min

  • Et ajoutez avant nouvelle vue instanciation:

    Vue.config.devtools = true;
0
Wilfried Kakou

Cela m'arrive périodiquement, assez énervant car il semble n'y avoir aucune cause.

  • Accéder aux extensions de navigateur Chrome
  • Supprimer l'extension Vue DevTools
  • Rajouter
  • Difficile d'actualiser votre page

Chrome - Version 71.0.3578.98

MacOS Mojave 10.14

VueJS 2.5.21

0
Eric Prostko