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

Rumeurs sur la date de sortie de la PS5: Quand Sony lancera-t-il sa prochaine console?
Rumeurs sur la date de sortie de la PS5: Quand Sony lancera-t-il sa prochaine console?
En mai, le PDG de Sony Interactive, John Kodera, a déclaré que la PS4 entrait dans la fin de son cycle de vie. Les pensées ont naturellement pivoté vers une nouvelle console, vraisemblablement appelée PS5. Kodera a laissé entendre que la PS5
Google Chrome 68 est sorti, marque les sites HTTP comme «non sécurisés»
Google Chrome 68 est sorti, marque les sites HTTP comme «non sécurisés»
Le navigateur Web le plus populaire, Google Chrome 68, a atteint la branche stable et est maintenant disponible pour Windows, Linux, Mac et Android.
Quinto Black CT v3.1: Design mis à jour, nouvelles fonctionnalités
Quinto Black CT v3.1: Design mis à jour, nouvelles fonctionnalités
Winamp est l'un des lecteurs multimédias les plus populaires disponibles pour Windows. Un de mes skins préférés pour Winamp, la version 2.7 de 'Quinto Black CT' est maintenant disponible.
Archives de balises: 0x80240031
Archives de balises: 0x80240031
Test de l'Asus Transformer 3 Pro: jouer à la Surface Pro 4 à son propre jeu
Test de l'Asus Transformer 3 Pro: jouer à la Surface Pro 4 à son propre jeu
Il n'y a pas de prix pour deviner qui Asus défie avec le Transformer 3 Pro. Avec sa béquille réglable, son clavier folio et sa conception 2-en-1, c'est l'image crachée de la Surface Pro 4 de Microsoft. Asus est clairement
Comment arrêter l'hébergement dans Parsec
Comment arrêter l'hébergement dans Parsec
Parsec est un logiciel d'accès à distance créé pour les sessions de jeu. Vous pouvez héberger une session de jeu en utilisant Parsec, et d'autres peuvent se joindre avec votre permission. Cependant, que se passe-t-il lorsque vous souhaitez arrêter l'hébergement ? Continuez à lire cet article, et
Facebook n'arrête pas de me déconnecter – que faire ?
Facebook n'arrête pas de me déconnecter – que faire ?
Facebook existe depuis plus d'une décennie maintenant, et il est difficile de se souvenir du monde qui l'a précédé. Tout le monde est tellement habitué à se connecter via Facebook, et c'est le principal outil de recherche pour trouver quelqu'un de nos jours, surtout que