Afficher le code source d’une page web permet de vérifier rapidement son HTML, ses métadonnées et les ressources qu’elle charge. Le raccourci clavier varie selon le navigateur et le système ; les outils de développement répondent, eux, à une autre question : que devient la page après l’exécution des scripts ?
L’article en bref
Quelques touches suffisent pour ouvrir le code source dans la plupart des navigateurs. Voici comment choisir la bonne méthode et repérer les informations utiles sans confondre HTML initial et page modifiée par JavaScript.
- Accès rapide : Ctrl+U ouvre le code source dans Chrome, Edge et Firefox.
- Sur Mac : Les raccourcis diffèrent selon le navigateur, surtout dans Safari.
- Bonne méthode : Le code source et l’inspecteur montrent deux états différents.
- Vérification utile : Titres, descriptions et scripts se repèrent avec la recherche.
Un examen ciblé du HTML aide à comprendre une page et à contrôler son propre site.
Afficher le code source d’une page web selon le navigateur
Dans Chrome, Microsoft Edge, Firefox, Opera et Vivaldi, le raccourci clavier le plus direct sur Windows et Linux est Ctrl+U. Le navigateur ouvre alors un nouvel onglet contenant le HTML reçu du serveur.
Sur Mac, les commandes changent selon l’application. Chrome utilise Commande+Option+U, tandis que Firefox ouvre la source avec Commande+U. Dans Safari, l’option n’apparaît qu’après activation des fonctionnalités pour les développeurs web dans Réglages, puis Avancées.
| Navigateur | Windows ou Linux | Mac |
|---|---|---|
| Chrome | Ctrl+U | Commande+Option+U |
| Firefox | Ctrl+U | Commande+U |
| Edge, Opera, Vivaldi | Ctrl+U | La disponibilité du raccourci dépend du navigateur |
| Safari | Non disponible par défaut | Activer les fonctionnalités développeur, puis afficher la source |
Le menu contextuel constitue une autre voie : faites un clic droit sur une partie vide de la page, puis choisissez « Afficher le code source de la page ». Selon le navigateur et l’endroit cliqué, le libellé peut varier ou l’option ne pas être proposée.
Lire le HTML initial et repérer les informations importantes
Le code source correspond au document envoyé par le serveur au navigateur avant l’exécution des scripts. Il révèle notamment le titre de la page, sa description, certains éléments de suivi et les chemins vers les images.
Pour trouver une information sans parcourir des centaines de lignes, ouvrez la recherche de l’onglet avec Ctrl+F ou Commande+F. Les termes <title, name= »description » et og:image permettent de localiser rapidement le titre, la meta description et l’image associée au partage social.
- <title> : vérifiez le titre défini pour l’onglet et les résultats de recherche.
- Meta description : contrôlez la description renseignée dans le document.
- Balises og: : repérez les informations utilisées dans les aperçus de liens.
- Scripts : identifiez les fichiers chargés, notamment ceux liés aux statistiques.
- Images : recherchez les attributs source et les adresses des ressources.
Après une modification dans un éditeur de site, une ancienne version peut rester en cache. Rechargez la page, puis consultez à nouveau le HTML : si le changement n’apparaît toujours pas, le problème vient peut-être de la publication ou du cache plutôt que de la balise elle-même.
Pour revoir les bases de la structure HTML, le guide sur l’organisation d’une page en HTML apporte un complément utile. Un contrôle régulier du document permet de repérer tôt les oublis qui passent facilement inaperçus à l’écran.
Code source ou inspecteur : choisir le bon affichage
« Afficher le code source » et « Inspecter » ne montrent pas exactement la même chose. La première commande présente le HTML initial reçu du serveur ; l’inspecteur, dans les outils de développement, expose l’arbre DOM tel qu’il existe après le chargement et les modifications éventuelles de JavaScript.
Cette différence devient importante sur les sites construits avec des frameworks. Leur document initial peut sembler presque vide, car le script ajoute ensuite une partie du contenu. Dans ce cas, utilisez l’inspecteur pour voir ce que la page affiche réellement et retrouver les éléments créés à l’exécution.
| Méthode | Ce qu’elle affiche | À privilégier pour |
|---|---|---|
| Afficher le code source | Le HTML initial envoyé par le serveur | Vérifier les titres, les métadonnées et les scripts déclarés |
| Inspecter | Le DOM actuel, après les scripts et les interactions | Examiner un bouton, une image ou un élément dynamique |
| view-source: dans Firefox | Le code source initial, comme l’affichage classique | Accéder à une ligne précise ou partager une référence |
Firefox permet aussi d’afficher le code source d’une sélection depuis le menu contextuel. Pour créer un lien pointant vers une ligne, une adresse de type view-source: peut être complétée par un repère tel que #line100. Cette méthode sert à guider un autre développeur vers un passage précis, sans modifier la page.
Pour approfondir la relation entre HTML et DOM, consultez ce guide sur le DOM et les API JavaScript. La règle est simple : source pour examiner l’entrée, inspecteur pour comprendre l’état vivant de l’interface.
Utiliser les outils de développement sans confondre les niveaux
Les outils de développement servent à examiner et tester la page en cours. Un développeur peut y modifier temporairement un texte ou une règle CSS pour comprendre un comportement ; ces changements disparaissent au rechargement et ne modifient pas le site publié.
Le piège ici : voir un élément dans l’inspecteur ne prouve pas qu’il figurait dans le HTML initial. Un menu, une carte ou un bouton peut avoir été créé ou modifié par un script. Pour diagnostiquer proprement, comparez la source avec le DOM et observez à quel moment le contenu apparaît.
La lecture du code peut aussi aider à analyser le chargement des ressources, mais elle ne remplace pas une mesure de performance. Pour comprendre ce qui ralentit une interface, ce point sur la performance web et son analyse complète utilement l’observation du HTML.
Respecter les droits et les limites du code consulté
Consulter le HTML public est une méthode d’apprentissage légitime : il est possible d’étudier une structure, une technique ou une organisation de page. En revanche, copier les textes, photographies, illustrations ou éléments graphiques d’un site peut enfreindre les droits de leurs auteurs, sauf autorisation ou licence adaptée.
Une idée de mise en page ou une méthode générale n’est pas la même chose que la reproduction d’une création. Inspirez-vous du fonctionnement, puis écrivez votre propre version et utilisez des ressources dont les conditions d’utilisation sont claires.
Enfin, le code visible dans le navigateur ne dévoile pas le code exécuté côté serveur, comme le PHP, ni les requêtes privées vers une base de données. Le serveur traite ces éléments et transmet au navigateur le résultat nécessaire à l’affichage : le HTML, le CSS et le JavaScript accessibles au client.
Questions fréquentes sur l’affichage du code source
Quelle est la différence entre afficher le code source et Inspecter ?
Afficher le code source montre le HTML initial envoyé par le serveur. Inspecter ouvre les outils de développement et affiche le DOM actuel, qui peut avoir été modifié par JavaScript.
Pourquoi l’option d’affichage du code source est-elle absente dans Safari ?
Dans Safari, activez d’abord les fonctionnalités pour les développeurs web dans Réglages, puis Avancées. Sur un ordinateur administré par une école ou une entreprise, les outils peuvent aussi être désactivés par l’administrateur.
Peut-on voir le code PHP ou les données privées d’un site ?
Non. Le serveur exécute le PHP et ses requêtes avant de transmettre le résultat au navigateur. Le code source visible ne révèle pas ces traitements internes.
Peut-on réutiliser le HTML d’un site ?
Il est possible d’étudier le code pour apprendre, mais la réutilisation de textes, d’images ou d’illustrations peut être protégée par le droit d’auteur. Mieux vaut reprendre une idée générale et créer ses propres contenus.
