Comment afficher le code source HTML d'une page Web ?

Tous les navigateurs Internet permettent aux utilisateurs de visualiser le code source HTML de n’importe quelle page Web qu’ils visitent. Les sections suivantes contiennent des informations sur les multiples façons d’afficher le code source dans chacun des principaux navigateurs. Pour procéder, choisissez une entrée dans la liste ci-dessous et suivez les instructions de cette section.

Renseignements d’introduction.
Utilisateurs de Microsoft Edge.
Utilisateurs de Microsoft Internet Explorer.
Utilisateurs de Mozilla Firefox et Netscape.
Utilisateurs de Google Chrome.
Utilisateurs Apple Safari.
Utilisateur Opera.
Téléphone Android utilisant Chrome.
Comment fermer la page de code source ou l’outil.

Informations d’introduction
Utilisateurs de Microsoft Edge
Utilisateurs de Microsoft Internet Explorer
Utilisateurs de Mozilla Firefox et Netscape
Voir une section du code source de la page
Utilisateurs de Google Chrome
Utilisateurs Apple Safari
Utilisateurs d’Opera
Téléphone Android avec Chrome
Comment fermer la page de code source ou l’outil

Informations d’introduction

Lorsque vous consultez le code source d’une page Web, il est important de garder à l’esprit que les informations et le code non traités par le serveur n’apparaîtront pas. Par exemple, presque tous les moteurs de recherche Internet traitent l’information sur un serveur, puis affichent les résultats sur une page Web. En d’autres termes, vous pouvez voir le code qui constitue la page de résultats, mais vous ne pouvez pas voir le code source du moteur de recherche.

Cette règle s’applique à tous les scripts côté serveur, SSI et code de programmation. Par conséquent, les fonctionnalités, telles que les moteurs de recherche, les forums, les sondages, le chat, etc. n’afficheront pas leur code. La copie des informations du code source peut entraîner des erreurs ou vous renvoyer à la page à partir de laquelle vous avez copié les informations.

Utilisateurs de Microsoft Edge

Pour afficher le code source d’une page Web dans Microsoft Edge, suivez les étapes ci-dessous.

Appuyez sur Ctrl+U ou F12 sur le clavier de votre ordinateur.
Sélectionnez l’onglet Eléments en haut de la fenêtre de droite.

Cliquez avec le bouton droit de la souris sur une partie vide de la page Web et sélectionnez Afficher la source dans le menu contextuel qui apparaît.

Utilisateurs de Microsoft Internet Explorer

Pour afficher le code source d’une page Web dans Microsoft Internet Explorer, suivez les étapes ci-dessous.

Appuyez sur Ctrl+U ou F12 sur le clavier de votre ordinateur.
Cliquez sur l’onglet Debugger en haut du nouveau menu.

Cliquez avec le bouton droit de la souris sur une partie vide de la page Web et sélectionnez Afficher la source dans le menu contextuel qui apparaît.

Ouvrez Internet Explorer et naviguez jusqu’à la page Web de votre choix.
Appuyez sur la touche Alt pour afficher la barre de menu du navigateur.
Sélectionnez Affichage, puis Source dans le menu déroulant qui apparaît.
Cliquez sur l’onglet Debugger en haut du nouveau menu.

Avec les dernières versions d’Internet Explorer, appuyez sur la touche F12 pour faire apparaître l’outil DOM. Cet outil fournit beaucoup plus d’interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les changements dans le code affectent immédiatement la page Web.

Utilisateurs de Mozilla Firefox et Netscape

Pour afficher le code source d’une page Web dans Mozilla Firefox, suivez les étapes ci-dessous.

Appuyez sur Ctrl+U sur le clavier de votre ordinateur.

Cliquez avec le bouton droit de la souris sur une partie vide de la page Web et sélectionnez Afficher la source de la page dans le menu contextuel qui apparaît.

Ouvrez Mozilla Firefox et naviguez vers la page Web de votre choix.
Appuyez sur la touche Alt pour afficher la barre de menu du navigateur.
Sélectionnez Outils, Développeur Web, puis Page Source.

Avec les dernières versions de Firefox, appuyez sur la touche F12 ou Ctrl+Shift+I pour afficher l’outil de développement interactif. Cet outil fournit beaucoup plus d’interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les changements dans le code affectent immédiatement la page Web.

Voir une section du code source de la page

Mettez en surbrillance la partie d’une page Web pour laquelle vous souhaitez afficher le code source.
Cliquez avec le bouton droit de la souris sur la section en surbrillance, puis cliquez sur Afficher la source de sélection.

Utilisez le module complémentaire Firebug pour non seulement afficher le code source d’une page, mais aussi pour modifier et afficher ces modifications en direct via le navigateur.

Utilisateurs de Google Chrome

Pour afficher le code source d’une page Web dans Google Chrome, suivez les étapes ci-dessous.

Appuyez sur Ctrl+U sur le clavier de votre ordinateur.

Cliquez avec le bouton droit de la souris sur une partie vide de la page Web et sélectionnez Afficher la source de la page dans le menu contextuel qui apparaît.

Ouvrez Chrome et naviguez sur la page Web de votre choix.
Cliquez sur l’icône Personnaliser et contrôler Google Chrome dans le coin supérieur droit de la fenêtre du navigateur.
Dans le menu déroulant qui apparaît, sélectionnez Plus d’outils, puis Outils de développement.
Cliquez sur l’onglet Eléments en haut de la nouvelle section qui apparaît.

Avec les dernières versions de Chrome, appuyer sur la touche F12 ou Ctrl+Shift+I fait également apparaître l’outil de développement interactif. Cet outil fournit beaucoup plus d’interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les changements dans le code affectent immédiatement la page Web.

Utilisateurs Apple Safari

Pour afficher le code source d’une page Web dans Apple Safari, suivez les étapes ci-dessous.

Appuyez sur la touche Commande + Option + U de votre clavier.

Cliquez avec le bouton droit de la souris sur une partie vide de la page Web et sélectionnez Afficher la source de la page dans le menu contextuel qui apparaît.

Ouvrez le navigateur Safari et naviguez jusqu’à la page Web de votre choix.
Sélectionnez le menu Développer.
Choisissez l’option Afficher la source de la page.

Utilisateurs d’Opera

Pour afficher le code source d’une page Web dans Opera, suivez les étapes ci-dessous.

Appuyez sur Ctrl+U sur votre clavier.

Cliquez avec le bouton droit de la souris sur une partie vide de la page Web et sélectionnez Page source dans le menu contextuel qui apparaît.

Ouvrez Opera et naviguez jusqu’à la page Web de votre choix.
Cliquez sur le bouton Menu dans le coin supérieur gauche de la fenêtre du navigateur.
Dans le sous-menu Developer, choisissez Page source.

Si vous ne voyez pas le sous-menu Developer, choisissez More tools → Show developer menu. Ensuite, cliquez à nouveau sur le bouton de menu. Vous devriez maintenant voir le sous-menu Developer affiché.

Avec les dernières versions d’Opera, appuyer sur la combinaison de raccourcis Ctrl+Shift+I fait apparaître l’outil de développement interactif. Cet outil fournit beaucoup plus d’interaction avec le code source et les paramètres CSS, permettant aux utilisateurs de voir comment les changements dans le code affectent immédiatement la page Web.

Téléphone Android avec Chrome

Ouvrez le navigateur Internet Google Chrome sur votre téléphone.
Ouvrez la page Web dont vous souhaitez voir le code source.
Tapez une fois sur dans la barre d’adresse, puis déplacez le curseur vers l’avant de l’URL.
Type view-source : et appuyez sur Entrer ou Go.

Par exemple, pour voir le code de notre page d’accueil, vous devez taper view-source:https://www.computerhope.com

Comment fermer la page de code source ou l’outil

Une fois que vous avez terminé d’afficher le code source sur une page Web, vous pouvez quitter ou fermer celle-ci. La fermeture du code source dépend de la méthode que vous avez utilisée pour l’ouvrir.

Si vous avez utilisé la méthode Ctrl+U (à l’exception de Edge) ou la méthode du clic droit, fermez le nouvel onglet qui ouvre en haut de la fenêtre de votre navigateur.
Si vous avez utilisé la méthode de développement (en appuyant sur F12 ou Ctrl+Shift+I), cliquez dans le coin supérieur droit de la fenêtre des outils.

Comment afficher le code source HTML d’une page Web ?