Les outils de débogage
Parfois, votre page ne s'affiche pas comme vous le souhaitez, même sur un navigateur récent. Dans ce cas, il faut partir à la recherche de l'erreur que l'on a faite. Plusieurs techniques sont à votre disposition, je vais vous présenter celles que j'utilise le plus souvent.
La technique la plus simple pour faire du débogage consiste tout simplement… à donner une couleur de fond à un élément qui ne se comporte pas comme vous le souhaitez (par exemple, un menu qui se positionne mal). C'est donc aussi simple que cela :
nav { background-color: blue; } |
Cette couleur de fond, très voyante, est temporaire : vous vous en servez uniquement pour voir la « place » qu'occupe votre élément. Souvent, cela vous permet de comprendre ce qui se passe dans votre page.
Cependant, si cette technique ne suffit pas, il va falloir sortir l'artillerie lourde : un outil de débogage.
Ce sont des outils très puissants (et assez impressionnants) qui permettent de manipuler la page webdirectement dans le navigateur. La plupart des navigateurs actuels sont équipés de ces outils, spécialement conçus pour les développeurs web que nous sommes :
Sur Google Chrome, Mozilla Firefox et Internet Explorer, vous pouvez ouvrir le volet de débogage en appuyant sur la touche F12 de votre clavier. Sur Google Chrome et Firefox, vous pouvez également appuyer sur les touches Ctrl + Shift + I pour ouvrir le volet de débogage.
L'outil de débogage de Google Chrome (en bas du navigateur)
Il y a plusieurs façons de se servir de ces outils. Vous pouvez étudier la hiérarchie de vos balises en affichant le code source (en bas à gauche sur la figure suivante) et modifier en temps réel le code de votre page : faites un double-clic sur un texte ou une balise à modifier, et vous verrez le résultat changer dans la fenêtre du navigateur au fur et à mesure ! Attention toutefois : vos changements ne sont pas enregistrés, vous faites là un simple test pour comprendre le comportement du navigateur.
En bas à droite, vous avez la liste des propriétés CSS qui s'appliquent à l'élément actuellement sélectionné dans le code source. Vous pouvez lui ajouter des propriétés, en retirer, les modifier, etc. Tous les changements sont appliqués immédiatement. Notez que les propriétés CSS qui sont écrasées par d'autres propriétés sont barrées ou grisées : cela vous permet de comprendre comment votre feuille de style se comporte.
Enfin, pour cibler directement un élément de votre page, vous pouvez faire un clic droit sur l'élément à analyser, puis cliquer sur Inspecter l'élément. La barre de débogage propose aussi un bouton pour cibler un élément (une loupe sous Google Chrome, un curseur sous IE, etc.).
Ces outils proposent de nombreuses autres fonctionnalités plus avancées que je ne détaillerai pas ici mais que je vous laisse le loisir de découvrir : analyse du temps de chargement de la page, débogage JavaScript… Sachez cependant que, la plupart du temps, on s'en sert surtout pour faire du débogage du code HTML et CSS.
Le cours s'arrête ici ! 
Créé avec HelpNDoc Personal Edition: Générateur de documentation iPhone gratuit