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

Comment ajouter une zone de texte dans Canva
Comment ajouter une zone de texte dans Canva
Les outils créatifs de Canva vous permettent d'optimiser vos conceptions au maximum. Non seulement vous pouvez ajouter votre propre texte à vos projets dans Canva, mais vous pouvez également personnaliser n'importe quel élément dans la zone de texte. Cela permettra
Comment voir qui a consulté votre document Google
Comment voir qui a consulté votre document Google
Google Docs est un excellent outil de collaboration car il permet à plusieurs personnes de modifier et de travailler sur un seul document en même temps, sans perdre de vue qui fait quoi. Si vous ou votre organisation utilisez Google
Comment utiliser Firefox about:option de configuration browser.download.folderList
Comment utiliser Firefox about:option de configuration browser.download.folderList
La liste est l'une des centaines d'options de configuration de Firefox accessibles en saisissant about:config dans la barre d'adresse du navigateur.
Comment arrêter les vidéos en lecture automatique dans Firefox
Comment arrêter les vidéos en lecture automatique dans Firefox
Combien de fois avez-vous accédé à un site Web dans votre navigateur Firefox, pour voir apparaître une vidéo agaçante ? Voulez-vous désactiver la lecture automatique des vidéos dans votre navigateur ? Si c'est le cas, nous vous montrerons comment
Comment transférer tous vos e-mails de Hotmail vers Gmail
Comment transférer tous vos e-mails de Hotmail vers Gmail
Les lecteurs plus âgés se souviennent d'une époque où Hotmail, l'offre de messagerie gratuite de Microsoft, dominait le marché de la messagerie pendant une décennie au début du siècle. Le nom Hotmail a disparu depuis longtemps ; Microsoft a intégré la marque Hotmail dans le
Samsung Galaxy Note 8 vs iPhone X : le meilleur téléphone Android va de pair avec le produit phare d'Apple
Samsung Galaxy Note 8 vs iPhone X : le meilleur téléphone Android va de pair avec le produit phare d'Apple
Apple iPhone X ou Samsung Galaxy Note 8 ? C'est une question que beaucoup se sont posée, peu ont tenté de répondre – jusqu'à présent ! Oui, nous faisons l'impensable. Le Galaxy Note 8 de Samsung est sans doute le téléphone phare de l'entreprise
Comment forcer l'actualisation des vignettes d'images et de vidéos dans les dossiers de l'Explorateur
Comment forcer l'actualisation des vignettes d'images et de vidéos dans les dossiers de l'Explorateur
L'Explorateur Windows a une excellente fonctionnalité comme tout autre gestionnaire de fichiers pour afficher des aperçus miniatures d'images et de vidéos dans n'importe quel dossier. Pour vous assurer que les miniatures s'affichent instantanément à chaque fois que vous ouvrez un dossier, il met les miniatures en cache. Malheureusement, parfois, il ne parvient pas à générer une vignette pour certains fichiers ou à continuer à s'afficher