🧭 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.jsNext.js
Framework React créé par Vercel, offrant SSR, SSG, routage et optimisations intégrées..

📘 Ouvrir Chrome DevTools

Pour ouvrir Chrome DevTools :

1. Cliquez droit sur votre page et sélectionnez “Inspecter”
2. Ou utilisez le raccourci clavier :
   • 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()

📘 Inspecteur d’éléments

L’onglet Elements permet d’inspecter et modifier le DOMDOM
Document Object Model – représentation arborescente d'un document HTML manipulable en JavaScript. :

• 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