Comment utiliser les outils de développement du navigateur

Les outils de développement intégrés aux navigateurs permettent d'inspecter, modifier et déboguer le code HTML, CSS et JavaScript en temps réel. Chaque navigateur moderne propose une suite d'outils puissants accessibles directement depuis l'interface.

1. Ouvrir les outils de développement. Appuyez sur F12 ou utilisez le raccourci Ctrl+Shift+I (Cmd+Option+I sur Mac). Vous pouvez également faire un clic droit sur n'importe quel élément de la page et sélectionner "Inspecter" ou "Examiner l'élément". Les outils s'ouvrent dans un panneau ancré au bas ou sur le côté de la fenêtre.
2. Explorer l'onglet Éléments. Cliquez sur l'onglet "Éléments" (Chrome/Edge) ou "Inspecteur" (Firefox). Vous voyez le code HTML de la page sous forme d'arbre. Cliquez sur les petites flèches pour développer ou réduire les sections. Le panneau de droite affiche les styles CSS appliqués à l'élément sélectionné.
3. Inspecter un élément spécifique. Cliquez sur l'icône de sélection (flèche dans un carré) en haut à gauche des outils, puis survolez les éléments de la page. L'élément survolé est mis en surbrillance avec ses dimensions et marges. Cliquez sur l'élément pour le sélectionner dans l'arbre HTML.
4. Modifier les styles CSS. Sélectionnez un élément dans l'onglet Éléments. Dans le panneau Styles à droite, cliquez sur n'importe quelle valeur CSS pour la modifier. Appuyez sur Entrée pour valider. Vous pouvez également ajouter de nouvelles propriétés en cliquant dans un espace vide du bloc de règles.
5. Analyser les performances réseau. Ouvrez l'onglet "Réseau" et actualisez la page (F5). Tous les fichiers chargés apparaissent avec leur temps de chargement, taille et statut HTTP. Cliquez sur n'importe quel fichier pour voir ses en-têtes, contenu et temps de réponse détaillés.
6. Déboguer le JavaScript. Accédez à l'onglet "Console" pour voir les erreurs JavaScript et tester du code. Tapez directement du JavaScript et appuyez sur Entrée pour l'exécuter. L'onglet "Sources" permet de placer des points d'arrêt dans le code JavaScript pour déboguer ligne par ligne.
7. Simuler différents appareils. Cliquez sur l'icône d'appareil mobile (rectangle avec cercle) ou appuyez sur Ctrl+Shift+M. Sélectionnez un appareil prédéfini dans la liste déroulante ou définissez des dimensions personnalisées. La page se redimensionne et simule l'écran tactile de l'appareil choisi.