Principal Chrome Comment afficher la source HTML dans Google Chrome

Comment afficher la source HTML dans Google Chrome



Ce qu'il faut savoir

  • Faites un clic droit sur la page Web et choisissez Afficher la source de la page .
  • Raccourci : Appuyez sur Ctrl + DANS (PC Windows) ou Commande + Option + DANS (Mac).
  • Pour utiliser les outils de développement de Chrome, sélectionnez Menu (trois points) > Plus d'outils > Outils de développement .

Cet article explique comment accéder au code source HTML d'un site Web dans le navigateur Web Google Chrome, ainsi qu'accéder et utiliser les outils de développement de Chrome. Afficher le code source d'un site est un excellent moyen pour les débutants d'apprendre le HTML.

Afficher le code source dans Chrome

Alors, comment visualiser le code source d’un site Web ? Voici les instructions étape par étape pour le faire à l'aide du navigateur Google Chrome.

  1. Ouvrez le Navigateur Web Google Chrome (si vous n'avez pas Google Chrome installé , C'est un téléchargement gratuit).

  2. Accédez au page Web que vous aimeriez examiner .

  3. Clic-droit la page et regardez le menu qui apparaît. Dans ce menu, cliquez sur Afficher la source de la page .

    Afficher la source de la page dans le menu contextuel du navigateur Web Chrome
  4. Le code source de cette page apparaîtra désormais sous la forme d'un nouvel onglet dans le navigateur.

  5. Alternativement, vous pouvez également utiliser les raccourcis clavier de Ctrl + DANS sur un PC pour ouvrir une fenêtre avec le code source d'un site affiché. Sur un Mac, ce raccourci est Commande + Option + DANS .

Hilary Allison / Lifewire

cómo enviar un snapchat sin que ellos lo sepan

Utilisez les outils de développement de Chrome

En plus du simpleAfficher la source de la pagecapacité qu'offre Google Chrome, vous pouvez également profiter de leur excellent Outils de développement pour creuser encore plus profondément dans un site. Ces outils vous permettront non seulement de voir le HTML, mais également le CSS qui s'applique aux éléments d'affichage de ce document HTML.

Pour utiliser les outils de développement de Chrome :

  1. Ouvrir Google Chrome .

  2. Aller vers la page Web que vous souhaitez examiner .

  3. Sélectionnez le menu à trois points dans le coin supérieur droit de la fenêtre du navigateur.

  4. Dans le menu, survolez Plus d'outils puis choisissez Outils de développement dans le menu qui apparaît.

    Élément de menu Outils de développement dans Google Chrome
  5. Une fenêtre s'ouvrira affichant le code source HTML à gauche du volet et le CSS associé à droite.

  6. Alternativement, si vous faites un clic droit un élément dans une page Web et sélectionnez Inspecter dans le menu qui apparaît, les outils de développement de Chrome apparaîtront et mettront en évidence la partie spécifique que vous avez choisie dans le HTML avec le CSS correspondant affiché à droite. C'est très utile si vous souhaitez en savoir plus sur un élément particulier d'un site.

    cómo sacar a la gente de tu hulu
Comment inspecter un élément sur un Mac

La visualisation du code source est-elle légale ?

Au fil des années, de nombreux nouveaux concepteurs de sites Web se sont demandés s'il était acceptable de consulter le code source d'un site et de l'utiliser pour leur formation et, en fin de compte, pour leur travail. Bien que copier le code d'un site en gros et le faire passer pour le vôtre sur un site Web ne soit certainement pas acceptable, utiliser ce code comme tremplin pour tirer des leçons est en fait le nombre de progrès réalisés dans ce secteur.

cómo instalar mods para minecraft windows 10

Comme nous l'avons mentionné au début de cet article, vous auriez du mal à trouver aujourd'hui un professionnel du Web qui n'a pas appris quelque chose en consultant les sources d'un site ! Oui, voir le code source d’un site est légal. Utiliser ce code comme ressource pour créer quelque chose de similaire est également sûr. Prendre le code tel quel et le faire passer pour votre travail est le point où vous commencez à rencontrer des problèmes.

En fin de compte, les professionnels du Web apprennent les uns des autres et améliorent souvent le travail qu'ils voient et qui s'en inspirent. N'hésitez donc pas à consulter le code source d'un site et à l'utiliser comme outil d'apprentissage.

Plus que du HTML

Une chose à retenir est que les fichiers sources peuvent être très compliqués (et plus le site Web que vous consultez est complexe, plus le code de ce site est susceptible de l'être). En plus de la structure HTML qui compose la page, il y aura également des CSS (feuilles de style en cascade) qui dicteront l'apparence visuelle de ce site. De plus, de nombreux sites Web incluent aujourd'hui des fichiers de script avec le code HTML.

Il est probable que plusieurs fichiers de script soient inclus ; en fait, chacun alimente différents aspects du site. Franchement, le code source d'un site peut sembler écrasant, surtout si vous débutez dans ce domaine. Ne soyez pas frustré si vous ne parvenez pas à comprendre immédiatement ce qui se passe sur ce site. La visualisation de la source HTML n'est que la première étape de ce processus. Avec un peu d'expérience, vous commencerez à mieux comprendre comment tous ces éléments s'assemblent pour créer le site Web que vous voyez dans votre navigateur. Au fur et à mesure que vous vous familiariserez avec le code, vous pourrez en apprendre davantage, et cela ne vous semblera pas si intimidant.

FAQ
  • Comment modifier le code HTML dans Chrome ?

    Ouvrez les outils de développement dans Chrome en appuyant sur Ctrl (ou Commande sur un Mac) + Maj + I . De là, appuyez sur Ctrl ( Commande sur Mac) + O et sélectionnez le fichier source enregistré que vous souhaitez modifier pour l'ouvrir.

  • Comment afficher le code source de la page dans Chrome si Afficher la source est désactivé ?

    Si un site Web a désactivé l'option Afficher la source, vous pourrez peut-être toujours jeter un œil sous le capot. En haut de la fenêtre du navigateur, sélectionnez Voir > Développeur > Voir la source , qui devrait extraire le code source de la page Web.

  • Comment afficher le code source d'un site dans Chrome à l'aide de mon appareil Android ?

    Accédez au site Web que vous souhaitez consulter à l'aide de l'application Chrome de votre appareil, puis sélectionnez la barre d'adresse du navigateur. Déplacez le curseur de texte à l'extrême gauche, devant l'URL, et tapez voir la source , puis appuyez Entrer ou sélectionnez Aller .

Des Articles Intéressants

Choix De L'Éditeur

Smartsheet – Comment ajouter une liste déroulante
Smartsheet – Comment ajouter une liste déroulante
L'ajout de nouvelles listes déroulantes dans Smartsheet peut se faire en quelques étapes rapides. Vous pouvez également modifier et supprimer des listes déroulantes existantes de vos feuilles intelligentes. Si vous vous demandez comment ajouter une liste déroulante à vos smartsheets,
Gardez la barre des tâches visible avec le clavier tactile dans Windows 10
Gardez la barre des tâches visible avec le clavier tactile dans Windows 10
Voici comment garder la barre des tâches visible avec le clavier tactile dans Windows 10. Vous pouvez rendre la barre des tâches visible lorsque le virtuel.
Comment réparer un écran gelé sur un téléphone Android
Comment réparer un écran gelé sur un téléphone Android
Quel que soit le type de téléphone Android que vous possédez ou sa nouveauté, le système d'exploitation peut parfois se bloquer ou simplement cesser de fonctionner à l'improviste. Que votre Android se soit figé sur son écran de verrouillage ou qu'il ne le soit pas
iPad ne charge pas - Essayez ces correctifs
iPad ne charge pas - Essayez ces correctifs
Un iPad peut arrêter de se charger pour de nombreuses raisons différentes. Alors que la plupart des utilisateurs réagissent à ce problème en se rendant dans l'Apple Store le plus proche, certains problèmes peuvent être résolus sans l'aide d'un professionnel. Cependant, vous devez identifier pourquoi votre iPad est
Date de sortie de Super Smash Bros Ultimate : Votre guide complet sur tout Super Smash Bros sur Switch
Date de sortie de Super Smash Bros Ultimate : Votre guide complet sur tout Super Smash Bros sur Switch
Super Smash Bros pour Switch a été initialement confirmé en mars mais, lors de l'E3 de cette année, Nintendo a finalement révélé qu'il prendrait la forme de Super Smash Bros Ultimate. Destiné à être à la hauteur de son nom, Super Smash Bros
Quelle est la différence entre DVD+R et DVD-R ?
Quelle est la différence entre DVD+R et DVD-R ?
Les supports DVD+R et DVD-R présentent de petites différences entre eux, principalement autour de la manière dont ils gèrent les défauts et la réécriture.
Les imprimantes Brother sont-elles compatibles avec AirPrint ?
Les imprimantes Brother sont-elles compatibles avec AirPrint ?
Les nouvelles technologies vous permettent d'imprimer des photos, des documents et des pages Web, ainsi que de les numériser, en utilisant la connexion Internet. C'est beaucoup plus pratique que de transférer des fichiers vers l'imprimante via des câbles. La technologie AirPrint d'Apple vous permet d'imprimer