Les applications de débogage de Vue se sont améliorées. Découvrez les fonctionnalités de la dernière version bêta de Vue Devtools, y compris les nouveaux onglets de routage, de performances et de paramètres.
Vue Devtools aide à inspecter les applications Vue.js, ainsi que la dernière version préliminaire, 5.0 beta.1 Devtools présente des améliorations et des ajouts intéressants. J'ai été très enthousiaste depuis que j'ai essayé, et je suis impatient de partager avec vous les nouvelles fonctionnalités qui ont été ajoutées.
Cette version comprend trois nouveaux onglets: un Onglet Routing un Onglet Performances et onglet Settings . Il permet également de modifier l'état de Vuex depuis l'intérieur de l'onglet Vuex, ce qui signifie une meilleure expérience de débogage!
Commençons par inspecter ce clone de HackerNews dans Vue et installer Devtools. Suivez les instructions de cette page GitHub pour configurer et lancer l'exemple de projet. Ajoutez ensuite l'extension Devtools Chrome ou extension Firefox selon votre navigateur préféré. Avec cette configuration, ouvrez l'application dans votre navigateur, ouvrez les outils Devtools de votre navigateur et accédez à l'onglet Vue.
Onglet Routage
L'onglet Routage enregistre l'historique du routeur Vue lorsque vous parcourez les pages de votre application. a une page pour vous montrer les itinéraires définis pour l'application. Survolez l'onglet Routage et sélectionnez Historique pour afficher l'historique enregistré lorsque vous naviguez dans l'application. La sélection de Routes affiche les itinéraires définis pour cette application.
Onglet Performance
L'onglet Performance affiche l'analyse des performances d'exécution de votre application. montre combien de temps il a fallu les différents composants dans l'application pour rendre, ainsi que la fréquence d'images. Pour inspecter les performances, nous devons appuyer sur le bouton d'enregistrement dans le coin supérieur gauche, puis basculer entre la fréquence d'images et les vues de rendu des composants en cliquant sur l'un des boutons dans le coin supérieur droit.
Avec images par seconde sélectionné, nous pouvons voir que la fréquence d'images est enregistrée lorsque nous parcourons l'application. De l'image ci-dessus, vous remarquerez qu'il y a des moments où nous obtenons un faible taux de trame. Cela s'est produit lorsque nous sommes passés à une nouvelle route. Il fallait extraire les éléments à afficher sur la page et afficher un sous-ensemble de ces éléments sur la page. Sa valeur par défaut est de 20 éléments sur une page. En survolant les lignes, la fréquence d'images par seconde est affichée. Nous obtenons également des icônes au-dessus, avec les marqueurs R pour la route et M pour les mutations. En survolant, vous voyez le nombre de routes ou de mutations.
En cliquant sur le bouton Affichage des composants vous obtenez une liste des composants et leur durée de rendu. Vous pouvez voir que le composant RouterLink a pris le plus de temps. La sélection d'un composant affiche plus d'informations sur le volet de droite. Il indique le temps total et moyen nécessaire pour les différents événements du cycle de vie de ce composant. Je trouve cela intéressant, car vous pouvez déterminer ce qui affecte les performances et, par conséquent, corriger en conséquence.
Onglet Paramètres
L'onglet Paramètres permet de personnaliser les options comme la couleur Devtools, la densité d'affichage et case ou le nom du composant d'origine lors de l'affichage des composants.
Editable Vuex state
Dans la version précédente, nous avions déjà l'onglet Vuex. Cela nous a permis d'inspecter les mutations d'état de Vuex. Dans cette version, nous pouvons modifier l'état de Vuex directement à partir de Devtools.
La capture d'écran ci-dessus montre que lorsque nous avons modifié itemsPerPage en 2 elle indiquait juste deux éléments sur la liste lorsque nous avons déplacé entre les pages. Cela nous donne l'avantage de changer d'état et de voir comment l'application répond.
That's a Wrap!
Vous avez vu les nouvelles fonctionnalités de la dernière version: Routing Performance et Onglets Paramètres . Ce sont des ajouts géniaux, et je suis vraiment impatient de voir ce qui va arriver dans la prochaine version bêta. Utilisez ces outils à votre avantage et donnez à vos utilisateurs une application plus performante tout en déboguant facilement votre application Vue.js. Et si vous cherchez un ensemble impressionnant d’outils d’interface utilisateur pour améliorer l’apparence et les performances de vos applications Vue, n'oubliez pas de consulter également Interface utilisateur Kendo pour Vue .
désactivé en mode aperçu.
Source link