Afficher le code source dans Chrome, Firefox, Safari | We.Inc
Les raccourcis clavier pour afficher le code source HTML d'une page dans Chrome, Firefox et Safari, la différence avec Inspecter, ce que vous pouvez réutiliser, et un lecteur qui résume le HTML collé.
Appuyez sur Ctrl+U sous Windows ou Linux dans Chrome et Firefox. Sur Mac, Chrome utilise Command+Option+U et Firefox Command+U. Vous pouvez aussi faire un clic droit sur une zone vide de la page et choisir Afficher le code source de la page. Dans Safari, il faut d'abord activer les fonctionnalités pour les développeurs dans Réglages, sous Avancées.
Raccourcis pour afficher le code source selon le navigateur (pages d'aide des éditeurs)
Navigateur
Windows ou Linux
Mac
Chrome
Ctrl+U
Command+Option+U
Firefox
Ctrl+U
Command+U
Safari
Non disponible
Activez d'abord Afficher les fonctionnalités pour les développeurs web (Réglages, Avancées)
Tous les navigateurs ci-dessus
Clic droit sur la page, puis Afficher le code source de la page
Clic droit (ou Contrôle-clic) sur la page
Le code source d'une page est le fichier HTML envoyé par le serveur avant l'exécution des scripts. Il vous indique le titre et la description qu'utilise la page, les balises de suivi qu'elle charge et l'emplacement de ses images. C'est donc le moyen le plus rapide de vérifier votre propre site après une modification, ou de voir comment est construite une page que vous admirez.
Ouvrez la page que vous voulez lire et appuyez sur le raccourci de votre navigateur.
Utilisez la recherche du navigateur (Ctrl+F ou Command+F) pour aller directement à ce qui vous intéresse, comme <title ou og:image.
Pour l'étudier plus facilement, copiez tout et collez-le dans le lecteur ci-dessus.
Pour voir la page telle qu'elle apparaît après l'exécution des scripts, utilisez plutôt Inspecter.
Firefox permet de créer un lien vers une seule ligne : ajoutez #line100 à la fin d'une adresse view-source:.
Dans Firefox, sélectionnez du texte, faites un clic droit et choisissez Code source de la sélection pour n'afficher que cette partie.
Les pages construites avec un framework JavaScript affichent souvent un code source presque vide. Inspecter montre ce que les scripts ont construit.
Vérifiez vos propres pages après chaque refonte : un titre ou une description manquants se voient immédiatement dans le code source.
Questions fréquentes
Quelle est la différence entre Afficher le code source et Inspecter ?
Afficher le code source montre le fichier d'origine envoyé par le serveur. Inspecter ouvre les outils de développement du navigateur, où, comme l'explique la documentation de Chrome, l'arbre DOM montre l'état actuel de la page, qui diffère du HTML dès que JavaScript ajoute, supprime ou modifie certaines parties.
Puis-je copier le code HTML d'un site web ?
Vous pouvez le lire et vous en inspirer pour apprendre. Le réutiliser est une autre affaire : le Copyright Office américain indique que les textes originaux, les illustrations et les photos d'un site web peuvent être protégés. Le droit d'auteur ne couvre pas les idées, les systèmes ou les méthodes : apprenez la technique et écrivez votre propre version. Il s'agit d'informations générales, pas d'un conseil juridique.
Pourquoi l'option d'affichage du code source est-elle absente ?
Dans Safari, elle reste masquée tant que vous n'avez pas coché Afficher les fonctionnalités pour les développeurs web dans Réglages, Avancées. Sur un ordinateur géré par une entreprise ou une école, un administrateur a peut-être désactivé les outils de développement ; demandez-lui.
Puis-je voir le code serveur d'un site, comme le PHP ou les requêtes de base de données ?
Non. Le serveur exécute ce code et n'envoie que le HTML, le CSS et le JavaScript qui en résultent. Rien dans le code source de la page ne révèle ce qui l'a produit.
Ce qu'il faut regarder dans le code source de vos pages
En haut, dans <head>, vous trouverez le <title> et la <meta name="description">, le texte affiché dans les résultats de recherche. Plus bas se trouvent les balises og: qui contrôlent les aperçus de liens sur les réseaux sociaux, ainsi que les scripts d'analytics ou de gestionnaires de balises.
Si une modification faite dans l'éditeur de votre site n'apparaît pas ici, la page est peut-être en cache. Rechargez une fois, puis vérifiez de nouveau.
Réutiliser ce que vous trouvez
Le droit d'auteur protège la façon dont une chose est exprimée, pas l'idée qui se trouve derrière. Une idée de mise en page ou une technique courante sont libres d'utilisation ; les photos, les textes et les illustrations de quelqu'un ne le sont pas, sauf si leur licence le permet.
Afficher le code source, Inspecter et view-source: comparés
Trois façons de lire le code d'une page
Méthode
Ce qu'elle montre
Modification possible
Idéale pour
Afficher le code source de la page
Le HTML envoyé par le serveur
Non
Vérifier les titres, les balises meta et les scripts de suivi
Inspecter (outils de développement)
La page en direct après l'exécution des scripts
Oui, temporairement
Trouver quel code affiche un bouton ou une image
view-source: dans la barre d'adresse (Firefox)
Comme Afficher le code source de la page
Non
Créer un lien vers une ligne, comme #line100
Recherches utiles dans le code source
Appuyez sur Ctrl+F (Command+F sur Mac) dans l'onglet du code source et recherchez ces éléments pour trouver les parties les plus importantes.
Que rechercher
Chaque ligne indique ce qu'il faut saisir dans la recherche, suivi de ce que cela permet de trouver.
Lecteur de code source
Collez le HTML copié depuis Afficher le code source de la page. Il reste dans votre navigateur ; rien n'est envoyé ni téléchargé.