1. Ouvrir les outils de développement : Pour utiliser les outils de développement Web de Google Chrome, vous devez d’abord les ouvrir. Vous pouvez le faire en faisant un clic droit sur une page Web et en sélectionnant “Inspecter” ou en utilisant le raccourci clavier F12 ou Ctrl + Shift + I.
1. Examinez le HTML : Sous l’onglet “Elements”, vous pouvez voir le HTML de la page. Vous pouvez clicker sur n’importe quel élément pour le mettre en surbrillance sur la page Web. Vous pouvez également modifier le HTML ici pour voir comment les modifications affecteraient la page.
1. Utilisez l’inspecteur d’éléments : L’icoône de la souris en haut à gauche permet d’inspecter les éléments sur la page Web et de voir leur code HTML correspondant. Lorsque vous survolez un élément sur la page, le code HTML correspondant sera mis en surbrillance dans la fenêtre des outils de développement.
1. Déverrouillez les erreurs : Si votre HTML comporte des erreurs, elles peuvent être affichées dans l’onglet “Console”. Il vous montrera ce qui est erroné dans votre code et vous donnera un lien vers la ligne de code qui pose problème.
1. Modifier le HTML : Vous pouvez modifier votre code HTML directement dans les outils de développement et voir les modifications en temps réel sur votre page Web. Pour cela, il vous suffit de double-cliquer sur la balise, l’attribut ou le texte que vous souhaitez modifier.
1. Utilisez l’onglet “Sources” : Dans cet onglet, vous pouvez voir tous les fichiers liés à la page Web, y compris le HTML, le CSS, et le JavaScript. Vous pouvez également y apporter des modifications pour déboguer votre code.
Rappelez-vous que toutes les modifications que vous faites dans les outils de développement de Chrome ne sont que temporaires et disparaîtront lorsque vous actualiserez la page.
Ces outils sont extrêmement utiles pour déboguer votre HTML, ainsi que pour apprendre et comprendre comment d’autres sites Web sont construits.
