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.

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.

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