Que vous soyez un développeur web examinant le code de votre propre site ou simplement curieux de comprendre comment une page est structurée, Google Chrome offre des moyens simples pour accéder à la source HTML. Vous pouvez explorer le code de deux manières distinctes : en utilisant l’option « Afficher la source » ou en tirant parti des outils de développement.
Consulter le code source avec « Afficher la source de la page »
Commencez par ouvrir Chrome et naviguez vers la page web dont vous souhaitez visualiser le code. Faites un clic droit n’importe où sur la page et sélectionnez « Afficher la source de la page ». Vous pouvez aussi utiliser le raccourci clavier Ctrl + U pour un accès rapide. La source HTML s’affichera alors dans un nouvel onglet.
Un nouvel onglet s’ouvrira, présentant l’intégralité du code HTML de la page, dans une forme non formatée et dépliée.
Si votre objectif est de trouver un élément ou une section spécifique dans ce code, cette méthode peut se révéler fastidieuse, surtout si la page utilise des scripts JavaScript et des feuilles de style CSS complexes.
Examiner la source avec les outils de développement
L’approche via les outils de développement de Chrome offre une expérience d’analyse de code plus agréable. Le code HTML est mieux structuré, facilitant la lecture, et permet de réduire les éléments qui ne sont pas pertinents pour votre investigation.
Ouvrez Chrome, accédez à la page souhaitée, puis appuyez sur Ctrl + Maj + i. Une fenêtre d’outils de développement apparaîtra, généralement ancrée sur le côté de votre fenêtre de navigateur.
Cliquez sur la petite flèche grise située à gauche d’un élément pour le déployer et révéler son contenu.
Si vous préférez ne pas examiner la totalité du code de la page mais plutôt un élément en particulier, effectuez un clic droit sur l’élément désiré et sélectionnez « Inspecter ».
Cette fois, la fenêtre des outils de développement s’ouvrira directement au niveau du code correspondant à l’élément sur lequel vous avez cliqué.
Vous pouvez ajuster la position d’ancrage de cette fenêtre en la déplaçant en bas, à gauche, à droite, ou même en la détachant dans une fenêtre séparée. Pour cela, cliquez sur l’icône de menu (les trois points), puis choisissez l’option qui vous convient.
Voilà, vous savez tout sur la consultation du code source dans Chrome. Une fois votre exploration terminée, fermez l’onglet « Afficher la source » ou le panneau des outils de développement en cliquant sur le « X » pour revenir à votre page web.