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:
- Un exemple d'application simple React: récupérez les informations des utilisateurs de GitHub via l'API
- Construisez un compteur simple avec React
- Configuration de VS Code pour le développement de React
- Comment passer des accessoires à un composant enfant via React Router
- Créez une application avec Electron et React
- Tutoriel: créer une feuille de calcul avec React
- La feuille de route pour apprendre React
- Apprenez à utiliser Redux
- Premiers pas avec JSX
- Composants stylisés
- Introduction à Redux Saga
- Introduction à React Router
- Introduction à React
- Composants React
- Le DOM virtuel
- Réagir les événements
- L'état de réaction
- Accessoires de réaction
- Le fragment de réaction
- L'API de contexte React
- Réagir les types de prop
- Concepts React: déclaratif
- Réagir: comment afficher un composant différent en un clic
- Comment faire une boucle dans React JSX
- Props vs State dans React
- Devriez-vous utiliser jQuery ou React?
- Combien de JavaScript devez-vous connaître pour utiliser React?
- Introduction à Gatsby
- Comment référencer un élément DOM dans React
- Flux de données unidirectionnel dans React
- Réagir des composants d'ordre supérieur
- Événements de cycle de vie de React
- Concept de réaction: immuabilité
- Concept React: Pureté
- Introduction à React Hooks
- Introduction à create-react-app
- Concept de réaction: composition
- Réagir: composants de présentation vs composants de conteneur
- Fractionnement de code dans React
- Rendu côté serveur avec React
- Comment installer React
- CSS dans React
- Utilisation de SASS dans React
- Gestion des formulaires dans React
- Réagir StrictMode
- Portails de réaction
- Réagir les accessoires de rendu
- Test des composants React
- Comment passer un paramètre aux gestionnaires d'événements dans React
- Comment gérer les erreurs dans React
- Comment renvoyer plusieurs éléments dans JSX
- Rendu conditionnel dans React
- React, comment transférer des accessoires vers des composants enfants
- Comment obtenir la valeur d'un élément d'entrée dans React
- Comment utiliser le hook useState React
- Comment utiliser le hook useCallback React
- Comment utiliser le hook useEffect React
- Comment utiliser le hook useMemo React
- Comment utiliser le hook useRef React
- Comment utiliser le hook useContext React
- Comment utiliser le hook useReducer React
- Comment connecter votre application React à un backend de la même origine
- Le didacticiel du routeur Reach
- Comment utiliser les outils de développement React
- Comment apprendre React
- Comment déboguer une application React
- Comment rendre du HTML dans React
- Comment réparer l'erreur `dangerouslySetInnerHTML` ne correspond pas à l'erreur dans React
- Comment j'ai résolu un problème avec un état de formulaire de connexion React et le remplissage automatique du navigateur
- Comment configurer HTTPS dans une application React sur localhost
- Comment corriger l'erreur "Impossible de mettre à jour un composant lors du rendu d'un composant différent" dans React
- Puis-je utiliser des hooks React dans un conditionnel?
- Utiliser useState avec un objet: comment mettre à jour
- Comment déplacer des blocs de code avec React et Tailwind
- Réagissez, concentrez un élément dans React lorsqu'il est ajouté au DOM
- Réagissez, modifiez le texte en double-clic