Comment visualiser le code source HTML d’une page web

Mise à jour : 08/31/2020 par Lojiciels.com

Tous les navigateurs Internet permettent aux utilisateurs de visualiser le code source HTML de toute page Web qu’ils visitent. Les sections suivantes contiennent des informations sur les multiples façons de visualiser 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.

Informations introductives

Lorsque vous consultez le code source d’une page web, vous vous rendez compte que les informations et le code traités par le serveur n’apparaîtront pas dans la source. Par exemple, un moteur de recherche traite les informations sur un serveur et affiche ensuite les résultats sur une page web. En d’autres termes, vous pouvez visualiser le code qui constitue la page de résultats, mais vous ne pouvez pas visualiser le code source du moteur de recherche.

Cette règle s’applique à tous les scripts, SSI et codes de programmation côté serveur. Par conséquent, vous ne pouvez pas visualiser le code source d’un script utilisé dans les moteurs de recherche, les forums, les sondages, les chats, etc. De plus, la copie des informations du code source peut provoquer des erreurs ou vous renvoyer à la page à partir de laquelle vous avez copié les informations.

Microsoft Edge

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

1. Presse Ctrl+U ou F12 sur le clavier de votre ordinateur.
2. Sélectionnez le Éléments en haut de la fenêtre de droite.

Ou

1. Cliquez avec le bouton droit de la souris sur une partie vide de la page web et sélectionnez Voir la source à partir du menu contextuel qui apparaît.

Ou

1. Ouvrez Microsoft Edge et naviguez jusqu’à la page web de votre choix.
2. Cliquez sur le lien Plus dans le coin supérieur droit de l’écran.
3. Sélectionnez Outils pour les développeurs dans le menu déroulant qui apparaît.
4. Sélectionnez le Éléments en haut de la fenêtre de droite.

Microsoft Internet Explorer

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

1. Presse Ctrl+U ou F12 sur le clavier de votre ordinateur.
2. Cliquez sur le bouton Debugger en haut du nouveau menu.

Ou

1. Cliquez avec le bouton droit de la souris sur une partie vide de la page web et sélectionnez Voir la source à partir du menu contextuel qui apparaît.

Ou

1. Ouvrez Internet Explorer et naviguez jusqu’à la page web de votre choix.
2. Appuyez sur la Alt pour faire apparaître la barre de menu du navigateur.
3. Sélectionnez Voiret ensuite Source dans le menu déroulant qui apparaît.
4. Cliquez sur le bouton Debugger en haut du nouveau menu.

Mozilla Firefox et Netscape

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

1. Presse Ctrl+U sur le clavier de votre ordinateur.

Ou

1. Cliquez avec le bouton droit de la souris sur une partie vide de la page web et sélectionnez Voir la page Source dans le menu contextuel qui apparaît.

Ou

1. Ouvrez Mozilla Firefox et naviguez jusqu’à la page web de votre choix.
2. Appuyez sur la Alt pour faire apparaître la barre de menu du navigateur.
3. Sélectionnez Outils, Développeur webet ensuite Source de la page.

Afficher une section du code source de la page

1. Mettez en évidence la partie d’une page web dont vous souhaitez consulter le code source.
2. Cliquez avec le bouton droit de la souris sur la section surlignée, puis cliquez Voir la source de la sélection.

Google Chrome

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

1. Presse Ctrl+U sur le clavier de votre ordinateur.

Ou

1. Cliquez avec le bouton droit de la souris sur une partie vide de la page web et sélectionnez Voir la page source à partir du menu contextuel qui apparaît.

Ou

1. Ouvrez Chrome et naviguez sur la page web de votre choix.
2. Cliquez sur Personnaliser et contrôler Google Chrome dans la partie supérieure droite de la fenêtre du navigateur.
3. Dans le menu déroulant qui apparaît, sélectionnez Plus d’outils et ensuite Outils pour les développeurs.
4. Cliquez sur le bouton Éléments en haut de la nouvelle section qui apparaît.

Safari aux pommes

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

1. Presse Commande + Option + U sur votre clavier.

Ou

1. 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.

Ou

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

Opéra

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

1. Presse Ctrl+U sur votre clavier.

Ou

1. Cliquez avec le bouton droit de la souris sur une partie vide de la page web et sélectionnez Source de la page à partir du menu contextuel qui apparaît.

Ou

1. Ouvrez Opera et naviguez jusqu’à la page web de votre choix.
2. Cliquez sur le bouton Menu dans le coin supérieur gauche de la fenêtre du navigateur.
3. Dans le Développeur sous-menu, choisissez Source de la page.

Téléphone Android utilisant le Chrome

1. Ouvrez le navigateur Google Chrome sur votre téléphone Android.
2. Ouvrez la page web dont vous souhaitez consulter le code source.
3. Tapez une fois dans la barre d’adresse et déplacez le curseur au début de l’URL.
4. Tapez view-source : et de taper Saisissez ou Allez sur.

Si les étapes ci-dessus ne fonctionnent pas sur votre téléphone Android ou ne vous montrent pas le code source que vous recherchez, utilisez la méthode de visualisation du code source dans le iPhone ou iPad utilisant Safari section. Le même code fonctionne sur les téléphones Android, les seules différences sont l’utilisation de Chrome au lieu de Safari, et le processus de création et de modification d’un signet.

iPhone ou iPad utilisant Safari

Consulter le code source d’une page web sur un iPhone ou un iPad demande un peu plus de travail, mais c’est possible. Le processus nécessite de créer un signet, de lui attribuer un code JavaScript et d’utiliser le signet d’une page web pour en visualiser le code source.

Créer un signet pour visualiser le code source

1. Ouvrez le navigateur Safari sur votre iPhone ou iPad.
2. Accédez à n’importe quelle page web, telle que www.computerhope.com.
3. Appuyez sur le bouton Pour en savoir plus au bas de l’écran.

4. Dans le menu qui s’ouvre, appuyez sur le bouton Ajouter un signet option.

5. Tapez sur le champ du nom du signet, tapez sur le x sur le côté droit pour effacer le nom actuel, et entrez « Voir le code source de la page web » comme nouveau nom.

6. Appuyez sur Sauvegarder dans le coin supérieur droit pour sauvegarder le signet.
7. Copiez l’intégralité du code JavaScript ci-dessous.

javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace="pre-wrap";b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

8. Dans Safari, accédez aux signets en appuyant sur l’icône des signets au bas de l’écran.

9. Trouvez le signet que vous avez créé ci-dessus, puis appuyez et maintenez votre doigt sur le signet jusqu’à ce qu’un menu s’ouvre au bas de l’écran.
10. Appuyez sur le bouton Edit dans le menu.

11. Sur la Modifier le signet appuyez sur l’URL, puis sur l’écran x pour effacer l’URL, puis collez le code JavaScript de l’étape 7 dans le champ URL.

12. Appuyez sur Fait en bas à droite de l’écran pour enregistrer les changements de signets.

Utilisez un signet pour voir le code source

Après avoir créé le signet ci-dessus, vous pouvez maintenant consulter le code source d’une page web.

1. Dans Safari, accédez à la page web où vous souhaitez consulter le code source.
2. Touchez l’icône des signets en bas de l’écran.

3. Appuyez sur le bouton Voir le code source de la page web signet que vous avez créé.

Un nouvel onglet de navigation Safari s’ouvre, affichant le code source de la page web.

Comment fermer la page de code source ou l’outil

Une fois que vous avez fini de consulter le code source d’une page web, vous pouvez vouloir la quitter ou la fermer. 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 (sauf Edge) ou la méthode du clic droit, fermer le nouvel onglet qui s’est ouvert en haut de la fenêtre de votre navigateur.
• Si vous avez utilisé la méthode du développeur (en appuyant sur F12 ou Ctrl+Maj+I), cliquez sur le bouton dans le coin supérieur droit de l’icône fenêtre outils.

Utiliser un outil en ligne pour consulter le code source

Outre la consultation du code source à l’aide d’un navigateur, il existe plusieurs outils en ligne permettant de consulter le code source de n’importe quelle page web. Ces outils peuvent également être plus utiles car certains d’entre eux peuvent également formater, styliser et mettre en évidence le code pour en faciliter la lecture. Vous trouverez ci-dessous une courte liste de certains de ces outils.