Comment afficher la source HTML dans Google Chrome

Que vous soyez nouveau dans l'industrie du Web ou un vétéran chevronné, consulter la source HTML de différentes pages Web est quelque chose que vous êtes susceptible de faire plusieurs fois au cours de votre carrière. La plupart des navigateurs vous permettent de visualiser facilement la source ; Chrome n'est pas différent des autres.

L'affichage du code source d'un site est l'un des moyens les plus simples d'apprendre de ce travail et de commencer à utiliser un code ou des techniques spécifiques dans votre travail. En plus de lire des livres de conception Web ou d'assister à des conférences professionnelles, la visualisation du code source d'un site est un excellent moyen pour les débutants d'apprendre le langage HTML.

Afficher le code source dans Chrome

Alors, comment voir le code source d'un site Web ? Voici les instructions étape par étape pour le faire à l'aide du navigateur Google Chrome.

1. Ouvrez le Navigateur Web Google Chrome (si Google Chrome n'est pas installé, il s'agit d'un téléchargement gratuit).

2. Accédez à la page Web que vous souhaitez consulter.

3. Faites un clic droit sur la page et regardez le menu qui apparaît. Dans ce menu, cliquez sur Voir la source de la page.

   

4. Le code source de cette page apparaîtra désormais sous la forme d'un nouvel onglet dans le navigateur.

5. Vous pouvez également utiliser les raccourcis clavier de CTRL + U sur un PC pour ouvrir une fenêtre avec le code source d'un site affiché. Sur un Mac, ce raccourci est Commande + Option + U.

Utilisez les outils de développement de Chrome

En plus de la fonctionnalité simple Afficher la source de la page offerte par Google Chrome, vous pouvez également profiter de leurs excellents outils de développement pour approfondir encore davantage un site. Ces outils vous permettront non seulement de voir le HTML, mais également le CSS qui s'applique pour afficher les éléments de ce document HTML.

Pour utiliser les outils de développement de Chrome :

1. Ouvrez Google Chrome.

2. Accédez à la page Web que vous souhaitez consulter.

3. Sélectionnez le menu à trois points dans le coin supérieur droit de la fenêtre du navigateur.

4. Dans le menu, survolez Autres outils puis choisissez Outils de développement dans le menu qui apparaît.

   

5. Une fenêtre s'ouvre et affiche le code source HTML à gauche du volet et le CSS associé à droite.

6. Sinon, si vous cliquez avec le bouton droit sur un élément dans une page Web et sélectionnez Inspecter dans le menu qui apparaît, les outils de développement de Chrome apparaîtront et mettront en évidence la partie spécifique que vous avez choisie dans le HTML avec le CSS correspondant affiché à droite. C'est très utile si vous souhaitez en savoir plus sur un élément particulier d'un site.

La visualisation du code source est-elle légale ?

Au fil des ans, de nombreux nouveaux concepteurs Web se sont demandé s'il était acceptable d'afficher le code source d'un site et de l'utiliser pour leur formation et, finalement, pour le travail qu'ils effectuent. Bien que copier le code d'un site en gros et le faire passer pour le vôtre sur un site Web n'est certainement pas acceptable, utiliser ce code comme tremplin pour apprendre est en fait la raison du nombre de progrès réalisés dans ce secteur.

Comme nous l'avons mentionné au début de cet article, vous auriez du mal à trouver aujourd'hui un professionnel du Web qui n'a pas appris quelque chose en consultant la source d'un site ! Oui, voir le code source d'un site est légal. L'utilisation de ce code comme ressource pour créer quelque chose de similaire est également sûre. Prendre le code tel quel et le faire passer pour votre travail, c'est là où vous commencez à rencontrer des problèmes.

Au final, les professionnels du web apprennent les uns des autres et améliorent souvent le travail qu'ils voient et dont ils s'inspirent, alors n'hésitez pas à consulter le code source d'un site et à l'utiliser comme un outil d'apprentissage.

Plus que du HTML

Une chose à retenir est que les fichiers sources peuvent être très compliqués (et plus le site Web que vous consultez est complexe, plus le code de ce site est susceptible d'être complexe). En plus de la structure HTML qui compose la page, il y aura également des CSS (feuilles de style en cascade) qui dicteront l'apparence visuelle de ce site. De plus, de nombreux sites Web incluent aujourd'hui des fichiers de script inclus avec le HTML.

Il est probable que plusieurs fichiers de script soient inclus ; en fait, chacun alimente différents aspects du site. Franchement, le code source d'un site peut sembler écrasant, surtout si vous êtes nouveau dans ce domaine. Ne soyez pas frustré si vous ne pouvez pas comprendre immédiatement ce qui se passe sur ce site. L'affichage de la source HTML n'est que la première étape de ce processus. Avec un peu d'expérience, vous commencerez à mieux comprendre comment toutes ces pièces s'assemblent pour créer le site Web que vous voyez dans votre navigateur. Au fur et à mesure que vous vous familiariserez avec le code, vous pourrez en apprendre davantage et cela ne vous semblera pas si intimidant.