Débugger et inspecter son code HTML
- Episode N° 13
- Difficulté facile
- Publié le 07/05/2020 par Ronan HELLO
- Dernière mise à jour le 27/04/2021
Au début de son apprentissage d’un langage, il est tout à fait normal de faire des erreurs, mais il est important de comprendre pourquoi et comment les corriger. Nous allons voir dans cet épisode comment bien utiliser tous les outils que nous avons à disposition pour comprendre nos erreurs et tenter de ne plus les reproduire par la suite.
Les erreurs HTML les plus courantes
Vous le savez peut-être mais j’enseigne dans plusieurs écoles autour de la ville de Nantes, ce qui me donne l’opportunité d’être en permanence en contact avec des étudiants en développement web. Voici donc une petite liste des erreurs que je vois le plus :
Des balises non fermées
L’erreur la plus courante lorsque l’on début est d’oublier de fermer des balises HTML, ou tout simplement de fermer les balises au mauvais endroit dans son code. Pour éviter ce genre de soucis, bien évidemment il faut essayer de rester attentif à ce que vous rédigez, mais surtout, bien regarder pour chaque balise si votre logiciel d’édition de code à automatiquement générer la balise fermante correspondante.
Si ce n’est pas le cas, vous devriez pouvoir vous en apercevoir très rapidement en regardant l’indentation de votre code HTML. Si l’indentation n’est pas parfaitement symétrique, c’est qu’il manque une balise fermante quelque part, vous comprenez donc l'intérêt de bien placer une seule balise par ligne afin de détecter ce genre de soucis plus rapidement.
Les erreurs d’attributs
Un autre souci assez récurrent que j’ai pu observer chez beaucoup d'étudiants est le fait de placer les attributs en dehors de la balise ouvrante, comme ceci :
<balise> attribut="valeur"Bien entendu, l’attribut ne sera pas pris en compte par la balise en question. Cette erreur est en revanche beaucoup plus simple à repérer puisque normalement, l’attribut devrait s’afficher visuellement sur la page. Donc si vous voyez apparaître un attribut et sa valeur dans votre page web, c’est que ce dernier est placé en dehors de sa balise. Il suffira donc de déplacer le chevron fermant.
J’observe également régulièrement des soucis de fermeture d’attribut. Lorsque vous ouvrez un attribut avec des guillemets, pensez bien à le fermer avant la fin de la balise, sinon on retrouve ce genre d’erreur :
<balise attribut="valeur>Il suffit donc de rajouter les guillemets manquant pour corriger ce genre de soucis. En parlant des guillemets, faites bien attention, « n’est pas identique à ", visuellement, la différence est minime, aidez vous de la colorisation syntaxique pour détecter ce genre d’erreur.
Les fautes dans le nom des balises
L’erreur la plus simple, mais pas si facile à repérer, c’est bien entendu les fautes d’orthographe (voir de syntaxe) dans la rédaction des balises. La toutes les erreurs sont possibles. Relisez-vous bien, et surtout, regardez ce que votre logiciel vous dit, en général, les balises mal orthographiées seront automatiquement colorée afin d’être mise en avant.
Pour éviter de faire des fautes d’orthographe, utilisez la saisie prédictive de votre logiciel de code, lorsque vous commencez à saisir <sec votre logiciel vous propose alors automatiquement d'écrire <section></section>. Si c’est le logiciel qui écrit à votre place, vous ferez surement moins de fautes. Attention tout de même à ne pas trop vous laisser guider, il est important de connaître l’orthographe de chaque balise que vous utilisez.
Les chemins, noms de fichiers et extensions incorrectes
L’erreur les erreurs les plus courantes lorsque l’on gère des fichiers média, de type image, son ou vidéo, est de mal saisir le chemin vers le fichier, le nom ou l'extension du fichier en question. Pour le chemin, veillez à toujours bien conserver une structure de fichier simple, utilisez des URLs relatives (sans protocole) pour débuter. Ne mettez pas d’espaces ni de majuscules dans le nom de vos dossiers, préférez les underscores _ ou tirets - pour les noms composés.
Pour les fichiers on retrouvera la même logique de nommage, des noms de fichiers courts, avec des mots clés. Toujours pas d’espaces ni de majuscules, votre gestion en sera grandement simplifiée. Je souhaite également faire un rappel à l’épisode sur la gestion des images et de leur format, veillez à utiliser le bon format d’image.
Lorsque vous faite un appel à une image, n’oubliez pas de spécifier son format et faites bien attention à la casse. Par exemple, une capture d’écran sous Windows se nommera par exemple ‘screen.PNG’ alors qu’un screen téléchargé depuis internet se nommera ‘screen.webp’ (avec extension en minuscule). Privilégiez toujours les écritures minuscules, peu importe le format. Un fichier en .PNG ne se chargera pas si vous l’appelez avec un .webp.
Une structure HTML trop complexe
Le grand challenge du développement HTML est de toujours essayer de garder une structure de balise claire et la plus légère possible. Le soucis, est que dès que vous apprendrez à faire du CSS? vous allez tenter de combler vos lacunes en CSS par des balises HTML, et ce n’est surtout pas une bonne approche. Comme vous avez pu remarquer, dans cette série HTML, nous n’avons jamais parlé d'apparence, car la structure ne doit pas influencer le design (ou du moins ce n’est pas son rôle). Balisez donc uniquement les éléments de votre page. Il est inutile d’encapsuler plusieurs fois un même élément avec une même balise HTML.
Si vous conservez une structure clair, vous aurez les idées clair, et donc moins de problèmes à gérer. De plus l’application du CSS sur une structure HTML simple est beaucoup plus simple à maîtriser. Je le répète sans cesse aux étudiants, mais je le dis ici :
Vos difficultés en CSS proviennent le plus souvent de votre structure HTML incomplète ou trop complexe. Il faut d'abord créer une bonne structure HTML, et ensuite y appliquer un design en CSS.
Les outils de dev des navigateurs web
Maintenant que vous avez vu une petite liste d’erreurs assez courante, nous allons voir comment devenir autonome dans la résolution des problèmes en utilisant les outils mis à disposition par la plupart des navigateurs web récent.
Afficher le code source
Premièrement, vous pouvez afficher très simplement le code source d’une page web (n’importe laquelle, pas seulement une que vous avez codé). Pour cela, il suffit de faire un clic droit sur la page, puis de sélectionner ‘Afficher le code source de la page’, ou avec un raccourci clavier, CTRL + U.
Vous verrez alors apparaître dans un nouvel onglet, l'ensemble du code HTML constituant la page que vous consultez. En réalité, vous n’utiliserez pas souvent cet outil, car les navigateurs modernes permettent d’aller un peu plus loin en utilisant un inspecteur de code.
Inspecter la structure
Comme vu précédemment, il est très simple de pouvoir afficher le code HTML d’une page, mais il devient plus compliqué de naviguer entre les balises. C’est pour cette raison que les navigateurs web d’aujourd’hui embarquent presque tous une fonctionnalité d’inspecteur de code. Pour activer cet outil, il faut réaliser un clic droit sur un élément de la page que l’on souhaite analyser, puis cliquer sur ‘Inspecter’ (ou ‘inspecter l’élément’, en fonction de votre navigateur). Il existe également un raccourci clavier : CTRL + MAJ + I.
Un volet s’est alors ouvert à côté de votre page web, vous permettant d'interagir facilement avec les balises HTML. Cet inspecteur permet d’ouvrir et de fermer les balises très simplement afin de bien comprendre leur structure. Cet inspecteur de code va grandement vous aider lorsqu’il faudra débugger le code, et il sera d’autant plus utile lorsque vous aurez commencé à apprendre le CSS. Vous remarquez d’ailleurs que ce volet d’inspection est défini en deux zones. La zone haute permet de visualiser la structure HTML du document, et la partie basse, le code CSS appliqué pour styliser l’élément ciblé.
L’inspecteur est un outil extrêmement complet qui nécessiterait plusieurs épisodes pour en comprendre tous les tenants, ici, je décide volontairement de ne pas en explorer tous les volets afin de laisser ce chapitre accessible pour les débutants.
La console de développement
Dans les outils d’aide aux développeurs proposés par les navigateurs web, on retrouve également un onglet appelé ‘console’. Cet onglet sert généralement à débugger votre code JavaScript, mais il nous servira également en HTML. En effet, c’est ici que seront affichées les erreurs de chemin et de fichiers.
Lorsque votre page HTML fait un appel à un fichier ou une image qui n’existe pas, une erreur sera alors inscrite dans cet onglet. La console de développement s’inscrit dans une suite d’outils très complète et vous accompagnera tout au long de votre carrière de développeur, mais pour le moment, son utilisation pour le développement HTML est assez limitée.
Les bonnes pratiques à mettre en place
Nous avons vu quelques outils pour vous empêcher de faire des erreurs, et essayer de les détecter au plus vite. Mais le mieux reste encore de ne pas en faire bien entendu. Nous allons donc voir quelques bonnes pratiques, permettant de vous faciliter la vie lorsque vous développez.
Commenter son code HTML
Premièrement, il est judicieux de commenter son code, vous l’avez surement déjà entendu quelque part, mais oui, ajouter des petites notes par endroit dans votre code est une bonne pratique. Pour créer un commentaire en HTML, il vous suffira d’écrire <!-- pour commencer votre commentaire et --> pour le terminer.
<!-- Le message de mon commentaire -->Les commentaires HTML permettent d’ajouter une annotation, qui sera visible dans le code source de la page. Ces commentaires peuvent également servir à désactiver momentanément une portion de votre code. En effet, le code HTML encadré des balises de commentaire ne sera pas exécuté par votre navigateur, et n'apparaîtra pas non plus à l’écran. C’est très pratique lorsque l’on souhaite tester plusieurs choses en parallèle.
Attention cependant à ne pas commenter quelque chose d’évident, ni à ajouter des commentaires à tout bout de champ, votre commentaire doit être utile à la compréhension de votre code.
Le validateur W3C
Lorsque vous débuter votre apprentissage, il est toujours bon faire relire son code par quelqu'un de plus expérimenté qui peut ensuite vous conseiller. Malheureusement, cela demandera une sollicitation récurrente, et qui peut s’avérer compliquer. Heureusement, le W3C a mis en place un outil d’aide à la validation de votre code source. Vous pouvez vous rendre sur le site : https://validator.w3.org/.
Il faudra ensuite uploader votre fichier HTML, ou copier-coller une portion du code à faire valider. L’outil lira ensuite l’intégralité du code HTML présent sur votre page et vous dressera une liste des erreurs, points d’attentions et optimisations à apporter à votre page HTML.
Cet outil peut s’avérer très important au début de votre apprentissage, mais peu à peu, vous apprendrez les normes W3C par cœur et pourrez-vous passer de ce validateur. De plus, il existe beaucoup d’IDE qui incluent notamment la vérification W3C de vos fichiers HTML ! Justement, parlons de nos très chers logiciels d’édition de code.
Les extensions pour IDE
Une autre bonne pratique consiste à écouter votre logiciel de code, je ne dis pas qu’il sait mieux coder que vous, mais au moins il est souvent de bon conseil ! Lorsque vous voyez des vaguelette, ou une colorisation syntaxique anormale, relisez votre code, il semblerait que votre IDE ait trouvé une coquille dans le code.
Il est possible d’ajouter beaucoup de fonctionnalité à vos éditeurs de code. Très souvent, les IDE possèdent des marketplaces sur lesquels vous pouvez trouver des extensions (ou plugins) permettant d’ajouter des fonctionnalités intéressantes. Il existe une extension nommée ‘Emmet’ qui permet de rédiger du code HTML très très rapidement, et qui vous fera donc gagner un temps considérable.
Les éditeurs de codent possèdent également tous une fonction d’indentation automatique de votre code qui permet de ré-indenter correctement vos balises à l’aide d’un raccourci clavier. Et si vous souhaitez aller plus loin dans la tenue de votre code HTML, il existe des outils appelés ‘Linters’ qui permettent de nettoyer votre code, en organisant les balises, leurs attributs etc… Ces outils sont souvent extrêmement puissants et permettent de toujours conserver une bonne organisation lorsque son projet grandit.
Vous devez être connecté pour pouvoir commenter. Se connecter
Trop chic le cours! bravo les gars !