Comment déboguer une application React

Certains outils que vous pouvez utiliser pour déboguer votre application React lorsque vous rencontrez des problèmes

Le meilleur outil que vous pouvez utiliser pour déboguer une application React est d'utiliser leOutils de développement React. C'est une extension de navigateur qui facilite l'inspection et l'analyse des applications React.

J'ai écrit un article de blog entièrement dédié à eux, découvrez-le:Outils de développement React.

En plus des outils de développement React, qui sont essentiels à la création d'une application Next.js, je souhaite mettre l'accent sur 2 façons de déboguer les applications Next.js.

Le premier est évidemmentconsole.log()et tout leautre API de la consoleoutils. La façon dont les applications Next fonctionnent fera fonctionner une instruction de journal dans la console du navigateur OU dans le terminal où vous avez commencé Next en utilisantnpm run dev.

En particulier, si la page se charge à partir du serveur, lorsque vous pointez l'URL vers celui-ci ou que vous appuyez sur le bouton d'actualisation (cmd / ctrl-R), toute journalisation de la console se produit dans le terminal.

Les transitions de page suivantes qui se produisent en cliquant sur la souris feront que toute la journalisation de la console se produira dans le navigateur.

N'oubliez pas si vous êtes surpris par l'absence de journalisation.

Un autre outil essentiel est ledebuggerdéclaration. L'ajout de cette instruction à un composant interrompra le rendu de la page par le navigateur:

Mon meilleur conseil pour apprendre à utiliser ces outils est contenu dans monguide définitif pour le débogage de JavaScript.

Vraiment génial car vous pouvez désormais utiliser le débogueur de navigateur pour inspecter les valeurs et exécuter votre application ligne par ligne.

Si vous utilisez Next.js, vous pouvez également utiliser le débogueur VS Code pour déboguer le code côté serveur. Je mentionne cette technique etce tutorielpour mettre en place cela.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: