Se familiariser avec Vue Devtools

Une introduction à Vue Devtools: Votre guide principal pour le débogage des applications Vue. Apprenez à les utiliser via un exemple d'application.

Devtools est un ensemble d'outils utilitaires qui aident un développeur à développer des applications. Pour les développeurs Web, nous avons Chrome DevTools (que vous pouvez en apprendre plus sur ici ). Pour les développeurs Vue, nous avons Vue Devtools qui vous aide à déboguer votre application. Je vais vous montrer comment utiliser Vue Devtools en inspectant un exemple d'application.

Configurer Devtools & Sample Project

Commençons par l'installer dans notre navigateur. Je vais utiliser Chrome, mais cela fonctionne aussi dans Firefox. La version utilisée pour ce guide est la version 4.1.5 bêta. Suivez l'un des liens ci-dessous pour l'ajouter à Chrome ou à Firefox:

1. Extensions Chrome
2. Extensions Firefox

Une fois téléchargé, il est prêt à être utilisé.

Nous allons utiliser un exemple d'application Vue , que vous pouvez trouver sur GitHub . Suivez les instructions sur cette page pour télécharger et le faire fonctionner localement. Démarrez l'application en exécutant `npm start` et en accédant à http: // localhost: 8080 /. Ouvrez Chrome DevTools et vous devriez trouver un onglet pour Vue.

Dans Vue Devtools, vous devez utiliser la version de développement de Vue.js pour l'inspection. L'exemple d'application utilise une version de développement, c'est pourquoi nous pouvons l'inspecter.

Que puis-je faire avec?

Vue Devtools peut être utilisé pour inspecter vos composants, événements et états.

Onglet Composants

L'onglet Composants affiche les composants utilisés sur une page, ainsi que les propriétés `data` et` Les valeurs de prop` sur le côté gauche, vous trouvez les composants répertoriés selon leur hiérarchie sur la page.Le nom du composant est affiché dans PascalCase par défaut.Vous pouvez le basculer pour afficher le nom du composant d'origine en cliquant sur le ** Format ** En sélectionnant l'un d'eux, vous afficherez des informations telles que les propriétés `data,` `props` et` computed` pour ce composant.

A droite, vous voyez les propriétés` data` d'un composant. Lorsque le composant reçoit une entrée et que ces valeurs changent, vous pouvez les voir reflétées. Vous pouvez également modifier ces valeurs et les afficher sur la page.

Vous pouvez également filtrer pour rechercher un composant ou l'une de ses propriétés sur le côté droit. Sur le côté droit, vous trouverez également le bouton ** Inspect DOM **, qui, une fois cliqué, vous amènera à l'endroit où ce composant est rendu dans le DOM, affiché dans l'onglet Eléments.

Onglet Evénements

L'onglet Evénements affiche les événements capturés à gauche. La sélection d'un événement affiche les informations sur l'événement sur le côté droit. Vous pouvez filtrer les événements et les mettre en pause pour arrêter la capture des événements en cliquant sur le bouton ** Enregistrement ** – un bouton permettant de basculer entre la capture et la non-capture des événements de votre application. L'exemple d'application n'utilise aucun événement, vous ne trouverez donc rien sur cet onglet. Voici une vidéo qui devrait vous donner une idée de son fonctionnement.

Onglet Vuex

L'onglet Vuex est utilisé pour inspecter les mutations de Vuex. Sur le côté gauche, il répertorie les mutations qui se sont produites et vous pouvez les filtrer. En sélectionnant un, vous afficherez les informations sur le côté droit avec des informations sur cette mutation. Lorsqu'une est sélectionnée, vous verrez une option ** Voyage dans le temps, ** qui rétablira l'état lorsque cette action s'est produite. Ceci est utile pour le débogage de voyage dans le temps. L'exemple d'application que vous avez téléchargé n'utilise pas Vuex, vous verrez donc un onglet vide. Vous trouverez ci-dessous une image de ce dernier qui fonctionne pour une autre application.

Voilà un emballage

Nous avons examiné les trois onglets disponibles dans Vue Devtools. Vuex à l'inspection des composants sur l'onglet ** Composants **, l'utilisation de cet outil devient utile et facilite le développement d'applications Vue.js ? J'ai montré comment l'utiliser dans le navigateur, mais vous pouvez également obtenir l'application électronique autonome ici .

Pour plus d'informations sur Vue [: Vous voulez en savoir plus sur la création d'interfaces utilisateur avec Vue? Consultez Interface utilisateur Kendo pour Vue des grilles et graphiques aux planificateurs et