Les DevTools Vue.js

Vue a un excellent panneau qui s'intègre dans les outils de développement du navigateur, qui vous permet d'inspecter votre application et d'interagir avec elle, pour faciliter le débogage et la compréhension


Lorsque vous expérimentez pour la première fois avec Vue, si vous ouvrez les outils de développement du navigateur, vous trouverez ce message: "Téléchargez l'extension Vue Devtools pour une meilleure expérience de développement:https://github.com/vuejs/vue-devtools"

Hint to install the Vue devtools

Ceci est un rappel convivial pour installer leExtension de Vue Devtools. Qu'est ce que c'est? Tout framework populaire a sa propre extension devtools, qui ajoute généralement un nouveau panneau aux outils de développement de navigateur qui est beaucoup plus spécialisé que ceux fournis par défaut par le navigateur. Dans ce cas, le panneau nous permettra d'inspecter notre application Vue et d'interagir avec elle.

Cet outil sera une aide incroyable lors de la création d'applications Vue. Les outils de développement ne peuvent inspecter une application Vue que lorsqu'elle est en mode développement. Cela garantit que personne ne peut les utiliser pour interagir avec votre application de production (et rendra Vue plus performante car elle n'a pas à se soucier des outils de développement)

Installons-le!

Il existe 3 façons d'installer les outils Vue Dev:

  • sur Chrome
  • sur Firefox
  • en tant qu'application autonome

Safari, Edge et les autres navigateurs ne sont pas pris en charge avec une extension personnalisée, mais en utilisant l'application autonome, vous pouvez déboguer une application Vue.js exécutée dans n'importe quel navigateur.

Installer sur Chrome

Accédez à cette page sur le Google Chrome Store:https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpdet cliquezAjouter à Chrome.

Add to chrome

Suivez le processus d'installation:

Add extension

L'icône devtools Vue.js apparaît dans la barre d'outils. Si la page n'a pas d'instance Vue.js en cours d'exécution, elle est grisée.

Vue DevTools installed

Si Vue.js est détecté, l'icône a les couleurs du logo Vue.

Icon colored

L'icône ne fait rien sauf nous montrer que làestune instance Vue.js. Pour utiliser les outils de développement, nous devons ouvrir le panneau Outils de développement, en utilisant «Afficher → Développeur → Outils de développement», ouCmd-Alt-i

DevTools window

Installer sur Firefox

Vous pouvez trouver l'extension Firefox dev tools dans le magasin d'addons Mozilla:https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

Firefox addons store

Cliquez sur "Ajouter à Firefox»Et l'extension sera installée. Comme avec Chrome, une icône grisée apparaît dans la barre d'outils

Firefox addon installed

Et lorsque vous visitez un site sur lequel une instance Vue est en cours d'exécution, elle devient verte, et lorsque nous ouvrons les outils de développement, nous verrons un message "VuePanneau ":

Vue devtools in Firefox

Installez l'application autonome

Vous pouvez également utiliser l'application autonome DevTools.

Installez-le en utilisant

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

et lancez-le en appelant

vue-devtools

Cela ouvrira l'application autonome basée sur Electron.

Standalone Vue devtools

maintenant, collez la balise de script qu'il vous montre:

<script src="http://localhost:8098"></script>

à l'intérieur du projetindex.htmlet attendez que l'application soit rechargée, et elle se connectera automatiquement à l'application:

Standalone Vue devtools connected

Comment utiliser les outils de développement

Comme mentionné, les outils Vue DevTools peuvent être activés en ouvrant les outils de développement dans le navigateur et en passant au panneau Vue.

Une autre option consiste à cliquer avec le bouton droit de la souris sur n'importe quel élément de la page et à choisir «Inspecter le composant Vue»:

Inspect vue component

Lorsque le panneau Vue DevTools est ouvert, nous pouvons naviguer dans l'arborescence des composants. Lorsque nous choisissons un composant dans la liste de gauche, le panneau de droite montre les accessoires et les données qu'il contient:

Navigate the components tree

Sur le dessus, il y a 4 boutons:

  • Composants(le panneau actuel), qui répertorie toutes les instances de composant en cours d'exécution dans la page actuelle. Vue peut exécuter plusieurs instances en même temps, par exemple, il peut gérer votre widget de panier et le diaporama, avec des applications distinctes et légères.
  • Vuexest l'endroit où vous pouvez inspecter l'état géré viaVuex.
  • Événementsmontre tous les événements émis
  • Rafraîchirrecharge le panneau devtools

Remarquez le petit= $vm0texte à côté d'un composant? C'est un moyen pratique d'inspecter un composant à l'aide de la console. Appuyez sur la touche «esc» pour afficher la console en bas des outils de développement, et vous pouvez taper$vm0pour accéder au composant Vue:

Component Console Shortcut

C'est très cool d'inspecter et d'interagir avec les composants sans avoir à les affecter à une variable globale dans le code.

Composants de filtre

Commencez à taper un nom de composant et l'arborescence des composants filtrera ceux qui ne correspondent pas.

Filter components

Sélectionnez un composant dans la page

Clique le

Select component in the page

et vous pouvez survoler n'importe quel composant de la page avec la souris, cliquer dessus et il sera ouvert dans les outils de développement.

Mettre en forme les noms des composants

Vous pouvez choisir d'afficher les composants dans camelCase ou d'utiliser des tirets.

Filtrer les données inspectées

Dans le panneau de droite, vous pouvez taper n'importe quel mot pour filtrer les propriétés qui ne lui correspondent pas.

Inspecter le DOM

Cliquez sur le bouton Inspecter DOM pour accéder à l'inspecteur des éléments DevTools, avec l'élément DOM généré par le composant:

Inspect DOM

Ouvrir dans l'éditeur

Tout composant utilisateur (pas les composants au niveau du framework) possède un bouton qui l'ouvre dans votre éditeur par défaut. Très utile.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: