🧭 Déboguer avec Chrome DevTools
Chrome DevTools est un ensemble d'outils de développement web intégrés directement dans le navigateur Google Chrome. Il permet de déboguer efficacement votre application Next.js.
Ouvrir Chrome DevTools
Pour ouvrir Chrome DevTools, vous pouvez utiliser l'une des méthodes suivantes :
Faites un clic droit sur votre page et sélectionnez Inspecter.
Ou utilisez le raccourci clavier approprié pour votre système d'exploitation :
- Windows/Linux :
Ctrl + Shift + I - macOS :
Cmd + Option + I
Console JavaScript
L'onglet Console permet de :
- Voir les logs et erreurs JavaScript
- Exécuter du code JavaScript
- Déboguer avec
console.log()
Note d'environnement
En fonction de l'environnement d'exécution de votre code, l'affichage de vos console.log() peut s'afficher dans la console JavaScript de Chrome ou dans le terminal de VSCode (ex: code côté serveur ou SSR).
Inspecteur d'éléments
L'onglet Elements permet d'inspecter et modifier le DOM :
- Visualiser la structure HTML
- Modifier les styles CSS
- Voir la disposition des éléments
Sources et points d'arrêt
L'onglet Sources permet de :
- Parcourir les fichiers sources
- Ajouter des points d'arrêt
- Déboguer pas à pas le code
- Examiner les variables
Network (Réseau)
L'onglet Network permet d'analyser :
- Les requêtes réseau
- Les temps de chargement
- Les headers et réponses
- Les performances
Performance
L'onglet Performance permet de :
- Profiler les performances
- Analyser le rendu
- Identifier les goulots d'étranglement
- Optimiser le code
Tooling
Terminez le quiz du chapitre pour le marquer comme complété.
🐞 Débogage & Performance
Le débogage est une étape cruciale dans le développement d'applications React. Cette section explore différents outils et techniques pour faciliter le débogage et optimiser les performances de vos applications.
🧪 Débogage avec VS Code
Visual Studio Code offre un excellent support pour le débogage des applications Node.js. Voici comment configurer et utiliser le débogueur.