Oubliez les raccourcis poussiéreux : le code source d’une page web n’est pas réservé aux initiés ou aux développeurs chevronnés. Armé de votre navigateur préféré, vous pouvez en quelques clics découvrir ce qui se cache derrière chaque image ou élément d’un site. Voici comment dévoiler les coulisses, selon l’outil que vous utilisez.
Pour faire le point sur les différentes méthodes, voici un aperçu clair des approches à connaître selon le navigateur ou l’appareil :
- Accéder à l’affichage du code source selon le navigateur
- Options pour Microsoft Edge
- Méthodes pour Microsoft Internet Explorer
- Procédure pour Mozilla Firefox et Netscape
- Fonctionnement sur Google Chrome
- Spécificités sur Apple Safari
- Manipulation via Opera
- Solutions sur téléphone Android avec Chrome
- Quitter l’affichage du code source ou l’outil développeur
- Rappels sur la visibilité du code source
- Modes d’accès avec Microsoft Edge
- Options dans Microsoft Internet Explorer
- Modes d’affichage avec Mozilla Firefox et Netscape
- Afficher un extrait précis du code source
- Accès via Google Chrome
- Spécificités Apple Safari
- Options pour Opera
- Navigation sur Android avec Chrome
- Revenir à la navigation classique après consultation
Rappels sur la visibilité du code source
Quand vous ouvrez le code source d’une page web, gardez en tête que tout ce qui est généré côté serveur reste invisible. Un moteur de recherche, par exemple, façonne ses résultats sur son serveur avant de vous les présenter. Impossible, donc, d’accéder à la mécanique interne du moteur via le code source de la page : seule la version « visible » vous est accessible.
Ce principe vaut pour les scripts côté serveur, les SSI, ou les programmes de forums et de chat. En clair, aucune trace du fonctionnement d’un sondage ou d’un module de recherche dans ce code. Copier-coller des extraits sans précaution peut d’ailleurs générer des erreurs ou vous ramener à la page d’origine.
Options pour Microsoft Edge
Pour examiner le code source dans Microsoft Edge, plusieurs solutions existent pour s’adapter à vos habitudes :
- Appuyez sur Ctrl U ou F12 sur votre clavier.
- En haut de la fenêtre qui s’ouvre, choisissez l’onglet Articles pour explorer les éléments de la page.
Autre méthode :
- Effectuez un clic droit sur une zone vide de la page, puis sélectionnez Afficher la source dans le menu qui apparaît.
Ou encore :
- Lancez Edge et rendez-vous sur la page web qui vous intéresse.
- Cliquez sur l’icône Plus dans le coin supérieur droit.
- Choisissez Outils de développement dans le menu déroulant.
- Ouvrez l’onglet Articles pour explorer le code.
Avec Edge, l’outil DOM vous permet d’expérimenter en direct : modifiez le code ou les styles CSS et observez instantanément le résultat à l’écran.
Méthodes pour Microsoft Internet Explorer
Pour voir le code source dans Microsoft Internet Explorer, voici les différentes options disponibles :
- Appuyez sur Ctrl U ou F12 sur votre clavier.
- Dans la nouvelle fenêtre, cliquez sur l’onglet Débogueur.
Autre possibilité :
- Clic droit sur une partie vierge de la page, puis sélectionnez Afficher la source.
Ou encore :
- Ouvrez Internet Explorer et rendez-vous sur la page souhaitée.
- Appuyez sur Alt pour afficher la barre de menus.
- Sélectionnez Afficher, puis Source.
- Puis cliquez sur Débogueur dans la nouvelle fenêtre.
Avec les versions les plus récentes, la touche F12 ouvre directement l’outil DOM, qui offre une vue interactive sur le code et les styles CSS, pour tester des modifications en temps réel.
Procédure pour Mozilla Firefox et Netscape
Pour consulter le code source dans Firefox, voici comment procéder :
- Tapez Ctrl U sur votre clavier.
Autre méthode :
- Clic droit sur une zone vide de la page, puis choisissez Afficher la source de la page.
Vous pouvez également :
- Ouvrir Firefox et accéder à la page souhaitée.
- Appuyer sur Alt pour faire apparaître la barre de menus.
- Cliquer sur Outils, puis Web Developer, puis Page source.
Avec les dernières versions, un appui sur F12 ou Ctrl Maj I lance les outils de développement interactifs : modifiez le code, ajustez les feuilles de style, et observez le rendu en direct.
Afficher un extrait précis du code source
Pour cibler une portion spécifique du code source, la démarche est la suivante :
- Sélectionnez la zone de la page qui vous intéresse.
- Effectuez un clic droit sur la sélection, puis choisissez Afficher la source de la sélection.
L’extension Firebug, sur Firefox, permet d’aller plus loin : non seulement afficher, mais aussi modifier le code et visualiser instantanément les changements dans le navigateur.
Fonctionnement sur Google Chrome
Dévoiler le code source dans Chrome se fait en toute simplicité :
- Appuyez sur Ctrl U.
Autre possibilité :
- Clic droit sur une zone vide puis sélectionnez Afficher la source de la page.
Ou encore :
- Ouvrez Chrome et accédez à la page voulue.
- Cliquez sur l’icône Personnaliser et contrôler Google Chrome en haut à droite.
- Dans le menu déroulant, choisissez Plus d’outils, puis Outils de développement.
- Cliquez sur l’onglet Éléments pour explorer le code à la volée.
Avec les versions récentes, F12 ou Ctrl Maj I ouvrent les outils de développement : tout y est pour tester, modifier et observer l’impact de vos changements.
Spécificités sur Apple Safari
Pour accéder au code source dans Safari :
- Tapez sur Commande Option U.
Ou bien :
- Clic droit sur une zone vide et choisissez Afficher la source de la page dans le menu contextuel.
Ou encore :
- Ouvrez Safari et rendez-vous sur la page désirée.
- Dans la barre de menus, sélectionnez Développer.
- Puis cliquez sur Afficher la source de la page.
Manipulation via Opera
Pour voir le code source dans Opera, plusieurs solutions s’offrent à vous :
- Appuyez sur Ctrl U sur votre clavier.
Ou bien :
- Clic droit sur une partie vierge, puis choisissez Page source dans le menu.
Autre méthode :
- Ouvrez Opera et accédez au site de votre choix.
- Cliquez sur le bouton Menu en haut à gauche.
- Dans le sous-menu Développeur, sélectionnez Page source.
Si le sous-menu Développeur n’apparaît pas, choisissez Plus d’outils puis Afficher le menu développeur, avant de retourner dans le Menu pour voir la bonne option.
Avec les dernières versions : Ctrl Shift I fait apparaître l’outil de développement interactif, idéal pour modifier code et styles en temps réel.
Solutions sur téléphone Android avec Chrome
Voici comment afficher le code source d’une page sur Android avec Chrome :
- Lancez Chrome sur votre téléphone.
- Ouvrez la page web à examiner.
- Touchez la barre d’adresse, placez le curseur au début de l’URL.
- Ajoutez view-source: devant l’adresse puis appuyez sur Entrée ou Go.
Par exemple, pour le site d’accueil de Computer Hope, tapez view-source:https://www.computerhope.com.
Quitter l’affichage du code source ou l’outil développeur
Une fois votre exploration terminée, il est facile de revenir à la navigation classique. La démarche varie en fonction de la méthode employée :
- Après avoir utilisé Ctrl U (hors Edge) ou le clic droit, fermez simplement l’onglet qui s’est ouvert.
- Pour les outils de développement (par F12 ou Ctrl Maj I), cliquez sur la croix ou le bouton de fermeture en haut à droite de la fenêtre dédiée.
Décortiquer le code source d’une page web, c’est entrouvrir la porte de l’atelier numérique : chacun peut, à sa mesure, comprendre ce qui fait tourner la machine. On n’a jamais été aussi proche des coulisses du web, et c’est là que la curiosité devient votre meilleur allié.
