Comment afficher le code HTML dans Chrome

Liens de périphérique

Êtes-vous curieux de savoir ce qui compose une page Web? Vous voulez savoir comment changer la taille ou la couleur de la police sur votre site Web ? En visualisant le code HTML d'une page Web, vous pouvez faire toutes ces choses et plus encore.

Comment afficher le code HTML dans Chrome

Dans ce didacticiel, nous allons vous montrer comment afficher le code HTML d'une page Web dans Chrome.

Affichage du code HTML dans Chrome

Lors de l'écriture en HTML, le code source est la série de balises et d'attributs utilisés pour définir la structure et le contenu d'une page Web.

Le code source est lu par les navigateurs Web et traduit dans la page Web graphique que vous voyez à l'écran. En plus de définir l'apparence d'une page Web, le code source peut également être utilisé pour ajouter de l'interactivité, comme des fenêtres contextuelles, des formulaires et des menus déroulants.

Bien que l'internaute moyen n'ait jamais besoin d'afficher le code source HTML d'une page Web, il existe plusieurs raisons pour lesquelles certains pourraient vouloir le faire.

Pour les développeurs, l'affichage du code source peut être un moyen utile de comprendre comment une page est structurée et de déterminer quels éléments de style et de script sont utilisés. Pour les concepteurs, il peut être utile de voir comment d'autres concepteurs ont utilisé HTML pour créer des mises en page efficaces.

Dans certains cas, les utilisateurs peuvent également souhaiter afficher le code source pour résoudre les erreurs ou en savoir plus sur le fonctionnement d'un site Web ou d'une application Web particulier. Quelle que soit la raison, l'affichage du code source HTML est un processus relativement simple dans Chrome.

Comment afficher le code HTML d'une page Web dans Chrome sur un PC Windows

Le système d'exploitation Windows est l'un des systèmes les plus compatibles de Chrome. Chrome est construit sur le projet open-source Chromium, auquel Microsoft est un contributeur majeur. Cette compatibilité s'étend au domaine HTML, où le navigateur populaire permet aux utilisateurs de visualiser le code HTML de n'importe quel site Web.

Vous pouvez afficher le code HTML de deux manières.

Utiliser Afficher la source de la page

Cette méthode est simple :

  1. Ouvrez Chrome et accédez à la page où vous souhaitez afficher le code source HTML.
    Comment afficher le code HTML dans Chrome
  2. Faites un clic droit sur la page et sélectionnez Afficher la source de la page, ou appuyez sur Ctrl + U sur votre clavier pour ouvrir le code source dans un nouvel onglet.
    Comment afficher le code HTML dans Chrome

Le code source apparaîtra dans le nouvel onglet et vous pourrez le faire défiler pour afficher le balisage HTML de cette page.

Utilisation des outils de développement

Pour inspecter le code source d'une page Web à l'aide des outils de développement dans Google Chrome, suivez les étapes ci-dessous.

  1. Ouvrez Google Chrome et accédez à la page Web que vous souhaitez inspecter.
    Comment afficher le code HTML dans Chrome
  2. Appuyez sur Ctrl + Maj + I sur votre clavier. Le volet Outils de développement s'ouvrira dans un dock à côté de la page Web que vous consultez.
    Comment afficher le code HTML dans Chrome
  3. Cliquez sur l'onglet "Eléments" en haut du volet. Cela affichera le code source HTML de la page Web.
    Comment afficher le code HTML dans Chrome
  4. Vous pouvez maintenant revoir le code source de la page. Pour réduire un élément, cliquez sur le triangle à côté de son nom de balise. Pour afficher plus d'informations sur un composant, faites un clic droit dessus et sélectionnez "Inspecter".
    Comment afficher le code HTML dans Chrome

Gardez à l'esprit que cette méthode est la meilleure pour les pages HTML ; il est possible de visualiser le code source d'autres types de pages Web, mais la mise en forme peut être plus difficile à lire.

Comment afficher le code HTML d'une page Web dans Chrome sur un Mac

Si vous êtes un développeur Web, il est important de pouvoir afficher le code HTML d'une page Web. Cela vous permet de voir comment la page est structurée et de résoudre les problèmes qui peuvent survenir. Heureusement, c'est facile à faire dans Chrome sur un Mac. Suivez simplement ces étapes :

  1. Ouvrez Chrome et accédez à la page Web sur laquelle vous souhaitez afficher le code HTML.
    Comment afficher le code HTML dans Chrome
  2. Faites un clic droit sur la page et sélectionnez "Inspecter".
    Comment afficher le code HTML dans Chrome
  3. Un nouveau volet s'ouvrira en bas de l'écran affichant le code HTML.
    Comment afficher le code HTML dans Chrome
  4. Vous pouvez également cliquer sur des éléments spécifiques dans le code HTML pour voir comment ils sont stylisés sur la page. Par exemple, vous pouvez voir quels styles CSS sont appliqués à un élément en le sélectionnant puis en cliquant sur l'onglet "Styles" dans le volet qui s'ouvre.
    Comment afficher le code HTML dans Chrome
  5. Pour fermer le volet, cliquez sur le « X » dans le coin supérieur droit.
    Comment afficher le code HTML dans Chrome

Vous pouvez également utiliser les outils de développement Chrome pour afficher le code source.

  1. Ouvrez Google Chrome et accédez à la page Web que vous souhaitez inspecter.
    Comment afficher le code HTML dans Chrome
  2. Cliquez sur l'icône de menu (trois points) dans le coin supérieur droit du navigateur et sélectionnez Plus d'outils et Outils de développement dans le menu déroulant.
    Comment afficher le code HTML dans Chrome
  3. Le panneau Outils de développement s'ouvrira en bas de l'écran. Sélectionnez les "Éléments" en haut du volet.
    Comment afficher le code HTML dans Chrome
  4. Vous verrez maintenant le code HTML de la page actuelle affichée dans le panneau Éléments. Vous pouvez utiliser les différentes options du panneau pour inspecter et déboguer le code selon vos besoins.
    Comment afficher le code HTML dans Chrome

En quelques clics, vous pouvez facilement afficher le code HTML de n'importe quelle page Web dans Chrome sur un Mac. Cela peut être utile lorsque vous essayez de résoudre des problèmes de développement Web ou que vous souhaitez examiner de plus près la manière dont un site Web particulier est construit.

Comment afficher le code HTML d'une page Web dans Chrome sur l'application iPhone

Si vous utilisez un iPhone, vous pouvez afficher le code HTML de n'importe quelle page dans Chrome de deux manières :

Ajuster l'URL

Vous pouvez facilement visualiser le code HTML de n'importe quelle page en modifiant légèrement l'URL :

  1. Ouvrez Chrome et accédez à la page Web dont vous souhaitez afficher le code HTML.
    Comment afficher le code HTML dans Chrome
  2. Appuyez une fois dans la barre d'adresse pour lancer le mode d'édition.
    Comment afficher le code HTML dans Chrome
  3. Déplacez le curseur au début de l'URL.
    Comment afficher le code HTML dans Chrome
  4. Tapez "View-source" puis appuyez sur le bouton "Go". Le code HTML de la page Web sera affiché dans Chrome.
    Comment afficher le code HTML dans Chrome

Utilisation des outils de développement

Les outils de développement Chrome sont également disponibles sur iOS, mais un ensemble d'étapes différent est nécessaire pour le lancer par rapport aux PC.

  1. Appuyez sur les trois points dans le coin supérieur droit de l'écran et sélectionnez "Paramètres".
  2. Faites défiler vers le bas et appuyez sur "Avancé", puis activez la bascule à côté de "Outils de développement".
  3. Appuyez longuement sur une zone vide de la page, puis sélectionnez "Inspecter l'élément". Cela ouvrira un panneau latéral avec le code HTML de cette page.

Comment afficher le code HTML d'une page Web dans Chrome sur l'application Android

Lorsque vous utilisez l'application Chrome sur votre téléphone Android, vous souhaiterez peut-être afficher le code HTML d'une page Web. Cela peut être utile si vous essayez de résoudre un problème avec la page ou si vous voulez voir comment la page est structurée. Pour afficher le code HTML d'une page Web dans Chrome sur votre téléphone Android, procédez comme suit :

  1. Ouvrez Chrome sur votre Android.
    Comment afficher le code HTML dans Chrome
  2. Tapez "view-source :" suivi de l'URL de la page où vous souhaitez afficher le code source. Par exemple, si vous souhaitez afficher le code source de www.google.com, vous devez taper "view-source:www.google.com" dans la barre d'adresse de Chrome.
    Comment afficher le code HTML dans Chrome

Cela ouvrira le code HTML de cette page dans l'interface intégrée des outils de développement de Chrome. À partir de là, vous pouvez afficher et modifier le code comme vous le souhaitez. Gardez à l'esprit que cette méthode ne fonctionnera que si le site Web que vous essayez de consulter autorise l'accès à son code source. Si ce n'est pas le cas, vous ne pourrez rien voir d'autre qu'un message d'erreur.

Comment afficher le code HTML d'une page Web dans Chrome sur un iPad

Chrome sur l'application iPad facilite l'affichage du code HTML de n'importe quelle page Web. Suivez simplement ces étapes :

  1. Ouvrez Chrome et tapez "view-source :" suivi de l'URL de la page que vous souhaitez afficher. Par exemple, si vous souhaitez afficher le code source de www.alphr.com, vous devez taper "view-source:www.alphr.com" dans la barre d'adresse de Chrome.
    Comment afficher le code HTML dans Chrome
  2. Appuyez sur le bouton "Aller".
    Comment afficher le code HTML dans Chrome

Cela devrait charger le code source de la page dans un nouvel onglet dans Chrome. À partir de là, vous pouvez enregistrer ou partager le code selon vos besoins.

Le code source est le ciment qui maintient les pages ensemble

HTML est la base de tout site Web. Il fournit la structure et le contenu que les visiteurs voient lorsqu'ils chargent une page dans leur navigateur.

Alors que l'apparence finale d'une page peut être déterminée par CSS ou d'autres langages de style, le code HTML détermine la structure et le contenu de base de la page. Certains changements peuvent potentiellement casser la page. Pour cette raison, il est important d'avoir une bonne compréhension du langage HTML lors de la visualisation ou de la modification du code source.

N'oubliez pas non plus que même si l'affichage du code HTML peut être utile dans certains cas, les modifications apportées au code ne seront pas reflétées sur la page Web en direct. Seuls les changements publiés par l'administrateur du site seront visibles par les visiteurs.

Avez-vous essayé d'afficher le code HTML d'une page Web en utilisant l'une des méthodes décrites dans ce didacticiel ? Comment c'était?

Faites le nous savoir dans la section "Commentaires".

Sign up and earn $1000 a day ⋙

BaldurS Gate 3 est-il multiplateforme ? Pas encore

BaldurS Gate 3 est-il multiplateforme ? Pas encore

Après beaucoup de battage médiatique et d'attente, « Baldur's Gate 3 » est sorti. Mais avant de se lancer dans le jeu, de nombreux joueurs voudront savoir si oui ou non

Comment réparer lerreur de contrôleur DS4Windows ne détectant pas

Comment réparer lerreur de contrôleur DS4Windows ne détectant pas

Rencontrez-vous des problèmes de connexion avec votre manette ? Vous êtes prêt à jouer, mais sans utiliser votre manette, la partie est terminée. Tu n'es pas le seul joueur

Comment réinitialiser les compétences dans Diablo 4

Comment réinitialiser les compétences dans Diablo 4

Avez-vous cherché un moyen de modifier la construction de votre joueur sans recréer un nouveau personnage dans « Diablo 4 » ? Eh bien, vous avez de la chance. Le jeu vous permet

Comment régler la luminosité sur un PC Windows 10

Comment régler la luminosité sur un PC Windows 10

Le réglage de la luminosité de l'écran est une fonctionnalité cruciale, quel que soit l'appareil que vous utilisez. Mais il est particulièrement important d'obtenir le niveau de luminosité

Comment obtenir des fruits Yama In Blox

Comment obtenir des fruits Yama In Blox

Le Yama est l'un des Katanas maudits du jeu et porte le statut légendaire. Manier une arme aussi puissante dans le monde ouvert « Blox Fruits » vous offrira

Comment réparer ladaptateur réseau Windows 10 manquant

Comment réparer ladaptateur réseau Windows 10 manquant

La carte réseau du système d'exploitation Windows est un périphérique essentiel qui garantit le bon fonctionnement des connexions réseau. Puisque la carte réseau reçoit

Comment obtenir de laide sous Windows

Comment obtenir de laide sous Windows

Même si vous utilisez Windows depuis longtemps, vous pouvez parfois rencontrer des problèmes qui nécessitent l'assistance d'un expert. Que vous soyez confronté

Comment afficher les mots de passe Wi-Fi enregistrés dans Windows 11

Comment afficher les mots de passe Wi-Fi enregistrés dans Windows 11

Il y a peu de choses plus frustrantes que de se retrouver exclu de votre réseau Internet. Si vous n'avez pas noté le mot de passe, vous risquez de perdre l'accès

Où trouver lemplacement du fond décran Windows sur votre PC

Où trouver lemplacement du fond décran Windows sur votre PC

Voici l'emplacement du fond d'écran Windows pour Windows 8 et 10, afin que vous puissiez utiliser ces images haute résolution avec d'autres appareils ou des versions plus anciennes de Windows.

Comment tester la caméra sur un PC Windows 10

Comment tester la caméra sur un PC Windows 10

Si vous souhaitez prendre des photos avec votre PC Windows 10, vous devrez d'abord tester la fonction de l'appareil photo. Que vous souhaitiez simplement prendre quelques selfies pour

Comment supprimer des fichiers temporaires sur un PC Windows 10 ou 11

Comment supprimer des fichiers temporaires sur un PC Windows 10 ou 11

Une fois que votre ordinateur commence à être lent, c'est le signe que vous devez libérer de l'espace. Habituellement, la suppression des fichiers temporaires est un excellent point de départ.

Résumé des raccourcis des applications Films et TV sous Windows 10

Résumé des raccourcis des applications Films et TV sous Windows 10

Résumé des raccourcis des applications Films et TV sur Windows 10, Résumé des raccourcis des applications Films et TV sur Windows 10 pour vous offrir une expérience formidable. Peut être

Comment réparer lerreur déchec du chargement des messages sur Discord pour Windows

Comment réparer lerreur déchec du chargement des messages sur Discord pour Windows

Comment corriger l'erreur d'échec du chargement des messages sur Discord pour Windows, Discord n'est pas amusant si vous ne pouvez pas lire ce que les autres écrivent. Voici comment corriger l'erreur de messages

Comment afficher licône Ce PC sur le bureau Windows 11

Comment afficher licône Ce PC sur le bureau Windows 11

Comment afficher l'icône Ce PC sur le bureau de Windows 11, Pendant le processus d'utilisation de Windows 11, de nombreux utilisateurs doivent accéder à Ce PC (gestion).

Comment trouver rapidement des informations dans le registre Windows

Comment trouver rapidement des informations dans le registre Windows

Comment trouver rapidement des informations dans le registre Windows. Avez-vous du mal à trouver des informations dans le registre Windows ? Voici donc ci-dessous des moyens rapides de trouver le registre

Comment limiter le nombre de tentatives de connexion infructueuses sous Windows 10

Comment limiter le nombre de tentatives de connexion infructueuses sous Windows 10

Comment limiter le nombre de tentatives de connexion infructueuses sous Windows 10. Limiter le nombre de tentatives de connexion par mot de passe infructueuses sous Windows 10 contribue à accroître la sécurité de l'ordinateur. Voici comment

Comment créer de faux messages derreur sous Windows

Comment créer de faux messages derreur sous Windows

Comment créer de faux messages d'erreur dans Windows, Windows peut proposer des messages d'erreur assez créatifs, mais pourquoi n'essayez-vous pas de créer votre propre contenu pour qu'ils puissent se moquer ?

Façons d’ouvrir les outils Windows dans Windows 11

Façons d’ouvrir les outils Windows dans Windows 11

Les moyens d'ouvrir les outils Windows dans Windows 11, les outils d'administration Windows ou les outils Windows sont toujours utiles sous Windows 11. Voici comment trouver les outils Windows dans Windows 11.

Comment réparer lerreur de Windows Quick Assist qui ne fonctionne pas

Comment réparer lerreur de Windows Quick Assist qui ne fonctionne pas

Comment réparer l'erreur de non-fonctionnement de Windows Quick Assist, Windows Quick Assist vous aide à vous connecter facilement à un PC distant. Cependant, cela génère parfois aussi des erreurs. Mais,

Comment épingler des fichiers Word, Excel et PowerPoint à licône de lapplication correspondante dans la barre des tâches de Windows 11

Comment épingler des fichiers Word, Excel et PowerPoint à licône de lapplication correspondante dans la barre des tâches de Windows 11

Comment épingler des fichiers Word, Excel et PowerPoint à l'icône de l'application correspondante dans la barre des tâches de Windows 11, Comment épingler des fichiers Office à l'icône de la barre des tâches sous Windows 11 ? Inviter