Plongez en profondeur dans Nuxt DevTools

Nuxt DevTools change la donne, et cet article partage ce qui est si excitant à ce sujet. C’est l’un des meilleurs outils de développement du marché et offre une expérience full-stack pas comme les autres.

Outils de développement Nuxt est livré par défaut dans Nuxt et a suscité beaucoup d’attention. Honnêtement, c’est probablement le meilleur outil de développement du moment et vous offre une expérience full-stack pas comme les autres.

Si vous ne le savez pas encore, il est sorti pendant Vue.js Amsterdam en 2023 par Anthony Fu (un membre principal de l’équipe Vue, Vite et Nuxt). Même s’il m’a fallu un certain temps pour commencer à l’utiliser, il serait difficile de revenir sur un projet sans lui.

Vous êtes probablement familier avec Chrome ou Safari DevTools et vous ne souhaitez pas vous occuper d’une autre couche d’inspection. Mais Nuxt DevTools change la donne et j’essaierai également de vous enthousiasmer. 😍

Raison n°1 : Vous serez plus rapide à devenir productif dans une base de code inconnue. Si vous êtes nouveau dans un projet, vous devez l’ouvrir avant de plonger dans la base de code car il vous donnera un aperçu rapide de beaucoup de choses. Je pense également que c’est un excellent moyen d’apprendre Nuxt plus rapidement. 👩‍🏫

Raison n°2 : Cela améliorera votre expérience de développeur, qui est la clé d’un excellent logiciel. Par exemple, vous disposez d’une expérience de développeur intégrée très puissante et simple à utiliser, surtout si vous utilisez les routes serveur et l’API de Nuxt.

Raison n°3 : Cela améliore la transparence sur ce que Nuxt fait sous le capot. Il y a beaucoup d’abstractions dans Nuxt car il vise à être un framework sans configuration. C’est pourquoi il est parfois formidable de voir ce qui se passe derrière le rideau. Pour vous donner un exemple, vous pouvez voir le timing des choses pour comprendre combien de temps il faut pour s’exécuter. Vous pouvez inspecter ce qui se passe dans votre application en temps réel. Il y a beaucoup de magie dans Nuxt, et Nuxt DevTools vous permet de lever le rideau et de voir ce qui se passe dans les coulisses. Il s’agit de rendre les choses visibles avec moins de frictions. 🏄‍♀️

Raison n°4 : C’est extensible, interactif et ludique. Par exemple, vous pouvez exécuter vos tests unitaires directement depuis DevTools avec Vitest.

Raison n°5 : Il est plus rapide d’inspecter le code d’un composant qu’avec Vue Devtools. À propos, il est conçu pour fonctionner avec Outils de développement Vue vous pouvez donc utiliser les deux.

Comment allons-nous procéder ?

Il existe de nombreuses fonctionnalités dans Nuxt DevTools. Je vais essayer de couvrir toutes les choses que j’aime, mais je ne veux pas vous inonder de trop d’images. Pour que les choses restent digestes, je vais créer une image pour chaque fonctionnalité et afficher une liste de tous les points que vous devez connaître sur cette fonctionnalité. 😃

De plus, mon objectif est de vous fournir des exemples concrets afin que vous puissiez comprendre la valeur que chaque fonctionnalité peut avoir dans votre travail quotidien. 👩‍💻

Installation

Nuxt DevTools ne fonctionnera que pour Nuxt 3.1 et supérieur et est désormais livré par défaut avec Nuxt. Mais il existe deux solutions pour l’installer : une pour vous uniquement et une pour tous les membres de votre équipe.

npx nuxi@latest devtools enable


npx nuxi@latest devtools disable


npm i -D @nuxt/devtools

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/devtools']
})

Redémarrez votre serveur Nuxt et vous devriez voir l’icône Nuxt flottante en bas de votre page. Vous pouvez faire glisser cet onglet n’importe où en mode développement. J’aime le mettre dans le coin inférieur gauche.

Il existe un outil d’inspection sur lequel vous pouvez cliquer pour sélectionner un composant et ouvrir le fichier dans votre éditeur. Vous pouvez voir combien de temps il a fallu pour charger la page et cliquer sur l’icône Nuxt ouvrira les DevTools. Vous êtes également à un raccourci avec Shift + Alt / ⇧ Shift + ⌥ Option + D pour l’activer. 💁‍♀️

Il s’agit d’un panneau flottant que vous pouvez redimensionner à votre guise, alors n’hésitez pas à le déplacer n’importe où sur votre application.

Conseils: Vous pouvez basculer entre les modes clair et sombre en cliquant sur l’icône Nuxt et même diviser l’écran pour ouvrir deux onglets des DevTools côte à côte. 🧞‍♀️

Fonctionnalité n°1 : Présentation

• Affichez un aperçu rapide de votre application. Votre version Nuxt et son statut de mise à jour ainsi que la version Vue.
• Le nombre de pages, de composants, d’importations, de modules et de plugins.
• Les détails du temps de chargement de votre application.

Fonctionnalité n°2 : pages

• Consultez tous les itinéraires enregistrés de votre application.
• Accédez rapidement à un itinéraire spécifique (il suffit de cliquer dessus).
• Ouvrez le fichier source de la page (cliquez sur l’icône).
• Voir l’itinéraire qui correspond.
• Mettez à jour le paramètre d’un itinéraire (cliquez simplement sur la zone de texte).
• Voir tous les middlewares enregistrés.

Caractéristique n°3 : composants

• Parcourez tous les composants par type : les composants utilisateur, les composants d’exécution, les composants intégrés et les composants tiers issus des bibliothèques.
• Ouvrez le fichier source du composant (cliquez simplement dessus). 🧞‍♀️
• Affichez un graphique sur la façon dont tous vos composants sont connectés (carte interactive).
• Mettez en surbrillance un composant comme un bouton et il vous redirigera non pas vers le composant mais vers la ligne exacte de code dans le fichier source. Ceci est très utile lorsque vous n’êtes pas familier avec la base de code et que vous devez modifier quelque chose.
• Consultez la relation entre chaque composant pour voir par exemple quels composants utilisent ce composant spécifique.

Fonctionnalité n°4 : arborescence des composants

• Consultez l’arborescence des composants de votre application.
• Analysez les accessoires, les créneaux horaires, les événements et les références de chaque composant.
• Voir l’état de chaque composant.

Caractéristique n°5 : importations

• Découvrez ce qui a été importé depuis que Nuxt a tout importé automatiquement : les composables utilisateur, les composables intégrés et les composables d’autres bibliothèques.
• Ceux qui sont mis en évidence sont ceux qui sont utilisés. Vous pouvez activer « Afficher uniquement ceux utilisés » pour voir uniquement ceux qui sont utilisés. 🏃‍♀️
• Voyez quels fichiers les utilisent. Il y a toujours beaucoup d’importations.
• La vue timeline (expérimentale) pour voir la trace de la pile des composables.
• Consultez la documentation pour un composable spécifique, car certaines entrées peuvent également fournir de courtes descriptions et des liens de documentation.

Fonctionnalité n°6 : modules et plugins

• Consultez les modules que vous utilisez dans votre projet, les informations les concernant et un lien vers leur documentation. Cela peut être pratique lorsque vous êtes un nouveau développeur dans un projet que vous ne connaissez pas.
• Installez un module en un clic. Par exemple, si vous souhaitez installer Tailwind en un clin d’œil ou Google Fonts.
• Optimisez le temps de chargement en regardant l’onglet plugins. 😃

Fonctionnalité n°7 : Gestionnaire d’actifs

• Consultez tous les actifs de votre répertoire public. Cliquez sur un fichier pour voir un aperçu ainsi que d’autres informations.
• Faites glisser et déposez pour télécharger une image directement depuis DevTools et elle sera ajoutée à votre dossier d’actifs.

Fonctionnalité n°8 : configurations d’exécution

• Ayez un aperçu de votre configuration d’exécution publique et de votre configuration d’exécution privée.
• Découvrez comment votre application se comporte avec différentes valeurs et états. Mettez à jour le mode couleur par exemple et vous devriez voir le thème changer en temps réel.
• Vous pouvez modifier ou ajouter des variables directement à partir de cet onglet.
• Découvrez ce qui a été injecté par d’autres bibliothèques comme Supabase.

Fonctionnalité n°9 : Charge utile

• Affiche toutes les charges utiles d’état et de données de votre projet. État saisi à partir de useState ou useAsyncData.
• Modifiez l’état actuel et les données de votre application. Cela permet de voir facilement ce que vous obtenez de chaque appel d’API ou même de voir les données stockées localement. Visualisez le résultat en temps réel car ils sont réactifs. Ce sera plus facile à déboguer.
• Analyser les données de useFetch.

Fonctionnalité n°10 : Construire et analyser

• Exécutez « analyser la construction » et voyez la taille du bundle de votre projet.
• Enregistre le rapport afin que vous puissiez comparer la taille du bundle dans différentes versions.
• Inspectez la taille des différentes parties du paquet.

Fonctionnalité n°11 : Ouvrir le graphique

• Vous aider dans votre référencement avec une carte de prévisualisation sociale pour Twitter, Facebook et LinkedIn. Voyez comment cela va s’afficher une fois partagé sur les réseaux sociaux. 👩‍💻
• Fournit les balises SEO manquantes avec la possibilité de copier des extraits de code.

Fonctionnalité n°12 : Routes des serveurs

• Affiche toutes les routes Nitro de votre projet. 💆‍♀️
• Fournit un terrain de jeu pour envoyer et tester vos points de terminaison.

Caractéristique n°13 : Stockage

• Affiche tout le stockage Nitro de votre projet.
• Créez, modifiez et supprimez des fichiers (par exemple les fichiers de démarque que vous utilisez pour Nuxt Content).

Caractéristique n°14 : Crochets

• Vous donne un aperçu de tous les hooks et cycles de vie dans l’ordre. Cela peut être très utile pour tester les performances et la surveillance.
• Voyez à quel point votre application se comporte lentement et où se situe le goulot d’étranglement.

Fonctionnalité n°15 : fichiers virtuels

• Affiche les fichiers virtuels générés par Nuxt pour prendre en charge les conventions.
• Découvrez ce que Nuxt fait sous le capot.
• Utile pour le débogage avancé et les développeurs qui souhaitent contribuer à leurs modules virtuels.

Caractéristique n°16 : Inspecter

• Inspecter et exposer le vite-plugin-inspect intégration, vous permettant d’inspecter les étapes de transformation de Vite.
• Découvrez les étapes de transformation que Nuxt et Vue effectuent sur votre code et comprenez mieux les composants internes de ces deux frameworks. Ou même un module pour repérer un problème.
• Utile pour créer des plugins ou pour déboguer

Fonctionnalité n°17 ​​: fonctionnalités tierces

Le module et l’intégration peuvent contribuer à leurs fonctionnalités dans DevTools. Et croyez-moi, l’écosystème Vue est fantastique. Voici quelques fonctionnalités qui seront ajoutées à vos DevTools lorsque vous installerez un module spécifique.

• Aire de jeux Pinia
• Nuxt EdgeDB (fichier d’onglet personnalisé de GitHub)
• VueUtiliser Docs dans Nuxt DevTools
• Vitest pour exécuter le test directement depuis les DevTools
• Injectez VS Code dans les DevTools (mais c’est encore expérimental)
• Aperçus des images OG

Si vous souhaitez ajouter vos fonctionnalités aux DevTools, il vous suffit d’intégrer votre iframe. Cela peut être très utile pour votre équipe de disposer d’une fonctionnalité personnalisée spécifique à votre projet ou à un package spécifique.

Fonctionnalité n°18 : Paramètres

• L’onglet Paramètres vous permet de configurer les DevTools selon vos besoins.
• Masquez les onglets, modifiez l’ordre des onglets, mettez à l’échelle, modifiez le thème, activez les boutons d’aide et bien plus encore. N’hésitez pas à creuser !

Conclusion

Les Nuxt DevTools évoluent constamment. Par exemple, une fonctionnalité visant à améliorer l’accessibilité de nos applications est en préparation.

Bien sûr, certaines personnes n’aiment pas les DevTools et elles vous diront que vous devriez plutôt maîtriser votre VS Code et votre débogueur de navigateur. À mon avis, ils ont raison et tort et c’est un outil complémentaire qui peut être utile dans beaucoup de situations. En revanche, il est préférable de l’utiliser globalement pour que votre équipe ne soit pas obligée de l’utiliser (voir la partie sur l’installation).

J’ai également des collègues qui m’ont dit que cela ralentissait les choses et que tout le monde ne possède pas le dernier MacBook, votre environnement doit donc être aussi léger que possible. 🏃‍♀️

En dehors de cela, j’espère que vous apprécierez les Nuxt DevTools autant que moi. C’est un excellent outil à avoir dans votre boîte à outils et j’espère que vous pourrez l’utiliser à son plein potentiel. 🚀

Vous pouvez me joindre sur Twitter @RifkiNada. Et si vous êtes curieux de connaître mon travail ou d’autres articles, vous pouvez les consulter ici www.nadarifki.com. 😉

Merci d’avoir lu! 🙏