COMMENT: Afficher le code source d'une page Web dans chaque navigateur - 2022

Barre d'outils Google - comment traduire une page web (Janvier 2022).

La page Web que vous lisez est composée, entre autres, de code source. Ce sont les informations que votre navigateur Web télécharge et traduit en ce que vous lisez en ce moment.

La plupart des navigateurs Web offrent la possibilité de voir le code source d'une page Web sans qu'aucun logiciel supplémentaire ne soit nécessaire, quel que soit le type d'appareil utilisé.

Certains offrent même des fonctionnalités et une structure avancées, facilitant la lecture du code HTML et d’autres codes de programmation sur la page.

Pourquoi voudriez-vous voir le code source?

Il est possible que vous souhaitiez voir le code source d'une page pour plusieurs raisons. Si vous êtes un développeur Web, vous voudrez peut-être jeter un coup d'œil sous les couvertures du style ou de la mise en œuvre d'un autre programmeur. Peut-être que vous êtes en assurance qualité et que vous essayez de savoir pourquoi une certaine partie d'une page Web est rendue ou se comporte comme elle est.

Vous pourriez également être un débutant en train d'essayer d'apprendre à coder vos propres pages et en recherchant des exemples concrets. Bien sûr, il est possible que vous ne tombiez dans aucune de ces catégories et que vous souhaitiez simplement afficher la source par pure curiosité.

Vous trouverez ci-dessous des instructions sur la manière de visualiser le code source dans le navigateur de votre choix.

Google Chrome

En cours d'exécution sur: Chrome OS, Linux, Mac OS, Windows

La version de bureau de Chrome propose trois méthodes différentes pour afficher le code source d'une page. La première et la plus simple consiste à utiliser le raccourci clavier suivant: CTRL + U (COMMAND + OPTION + U sur macOS).

Une fois appuyé, ce raccourci ouvre un nouvel onglet de navigateur affichant le code HTML et un autre code pour la page active. Cette source est codée par couleur et structurée de manière à simplifier la compartimentation et la recherche de ce que vous recherchez. Vous pouvez également vous y rendre en saisissant le texte suivant dans la barre d'adresse de Chrome, ajoutée à gauche de l'URL de la page Web, puis en sélectionnant Entrer clé: voir la source: (i.e., view-source: https: //www.Go-Travels.com).

La troisième méthode consiste à utiliser les outils de développement de Chrome, qui vous permettent d'approfondir le code de la page et de le modifier à la volée à des fins de test et de développement. L’interface des outils de développement peut être ouverte et fermée à l’aide de ce raccourci clavier: CTRL + SHIFT + I (COMMAND + OPTION + I sur macOS). Vous pouvez également les lancer en prenant le chemin suivant.

Sélectionnez le bouton du menu principal de Chrome, situé dans le coin supérieur droit et représenté par trois points alignés verticalement.
Lorsque le menu déroulant apparaît, survolez la souris avec la souris. Plus d'outils option.
Lorsque le sous-menu apparaît, sélectionnez Outils de développement.

Android

Pour visualiser le code source d’une page Web dans Chrome pour Android, il suffit d’ajouter le texte suivant devant son adresse (ou URL) et de le soumettre: voir la source:. Un exemple de ceci serait view-source: https: //www.Go-Travels.com . Le code HTML et les autres codes de la page en question seront instantanément affichés dans la fenêtre active.

iOS

Bien qu'il n'existe pas de méthode native pour afficher le code source à l'aide de Chrome sur votre iPad, iPhone ou iPod touch, le plus simple et le plus efficace consiste à utiliser une solution tierce telle que l'application View Source.

Disponible à 0,99 $ dans l'App Store, View Source vous invite à entrer l'URL de la page (ou à la copier / coller depuis la barre d'adresse de Chrome, qui est parfois le chemin le plus simple à emprunter), et c'est tout. En plus d'afficher du code HTML et autre, l'application contient également des onglets affichant des ressources de page individuelles, le modèle d'objet de document (DOM), ainsi que la taille de la page, des cookies et d'autres détails intéressants.

Microsoft Edge

En cours d'exécution sur: Windows

Le navigateur Edge vous permet d'afficher, d'analyser et même de manipuler le code source de la page en cours via son interface Outils de développement. Pour accéder à cet ensemble d’outils pratique, vous pouvez utiliser l’un des raccourcis clavier suivants: F12 ou CTRL + U. Si vous préférez utiliser la souris, cliquez sur le bouton de menu de Edge (trois points situés dans le coin supérieur droit) et choisissez le menu Outils de développement F12 option de la liste.

Une fois que les outils de développement sont exécutés pour la première fois, Edge ajoute deux options supplémentaires au menu contextuel du navigateur (accessible en cliquant avec le bouton droit n'importe où dans une page Web): Inspecter l'élément et Voir la source, ce dernier qui ouvre la Débogueur partie de l'interface des outils de développement remplie avec le code source.

Mozilla Firefox

En cours d'exécution sur: Linux, MacOS, Windows

Pour afficher le code source d'une page dans la version de bureau de Firefox, vous pouvez appuyer sur CTRL + U (COMMAND + U sur macOS) sur votre clavier, ce qui ouvrira un nouvel onglet contenant du code HTML et un autre code pour la page Web active.

En tapant le texte suivant dans la barre d'adresse de Firefox, directement à gauche de l'URL de la page, la même source s'affichera dans l'onglet en cours: voir la source: ( c'est-à-dire, view-source: https: //www.dotdash.com ).

Un autre moyen d'accéder au code source d'une page consiste à utiliser les outils de développement de Firefox, accessibles en procédant comme suit.

Sélectionnez le bouton du menu principal, situé dans le coin supérieur droit de la fenêtre de votre navigateur et représenté par trois lignes horizontales.
Lorsque le menu contextuel apparaît, cliquez sur le bouton Développeur icône "clé".
Le menu contextuel du développeur Web devrait maintenant être visible. Sélectionnez le Source de la page option.

Firefox vous permet également d'afficher le code source d'une partie particulière d'une page, ce qui facilite l'identification des problèmes. Pour ce faire, commencez par sélectionner la zone qui vous intéresse avec votre souris. Ensuite, faites un clic droit et choisissez Voir la source de sélection depuis le menu contextuel du navigateur.

Android

L'affichage du code source dans la version Android de Firefox est réalisable en ajoutant le texte suivant à l'URL de la page Web: voir la source:. Par exemple, pour afficher la source HTML de Dotdash, vous devez envoyer le texte suivant dans la barre d'adresse du navigateur: view-source: https: //www.dotdash.com .

iOS

Notre méthode recommandée pour afficher le code source d'une page Web sur votre iPad, iPhone ou iPod touch consiste à utiliser l'application View Source, disponible dans l'App Store au prix de 0,99 €. Bien que non intégré directement à Firefox, vous pouvez facilement copier et coller une URL du navigateur dans l'application afin de dévoiler le code HTML et tout autre code associé à la page en question.

Apple Safari

Fonctionnant sur iOS et macOS

iOS

Bien que Safari pour iOS n'inclue pas la possibilité d'afficher le source de la page par défaut, le navigateur s'intègre de manière plutôt transparente à l'application View Source, disponible dans l'App Store au prix de 0,99 USD.

Après avoir installé cette application tierce, revenez dans le navigateur Safari et appuyez sur le bouton Partager, situé en bas de l'écran et représenté par un carré et une flèche vers le haut. La feuille de partage iOS devrait maintenant être visible, superposant la moitié inférieure de la fenêtre Safari. Faites défiler vers la droite et sélectionnez le Voir la source bouton.

Une représentation structurée, codée en couleur, du code source de la page active doit maintenant être affichée, ainsi que d'autres onglets vous permettant d'afficher les ressources de la page, les scripts, etc.

macOS

Pour afficher le code source d’une page dans la version de bureau de Safari, vous devez d’abord activer sa Développer menu. Les étapes ci-dessous vous guident à travers l'activation de ce menu masqué et l'affichage de la source HTML d'une page.

Sélectionner Safari dans le menu du navigateur, situé en haut de l'écran.
Lorsque le menu déroulant apparaît, sélectionnez le Préférences option.
Les préférences de Safari devraient maintenant être visibles. Clique sur le Avancée icône, située à l'extrême droite de la rangée supérieure.
Au bas de la section Avancé se trouve une option intitulée Afficher le menu de développement dans la barre de menu, accompagné d'une case à cocher vide. Cochez cette case une fois pour cocher cette case, puis fermez la fenêtre Préférences en cliquant sur le «x» rouge situé dans le coin supérieur gauche.
Sélectionnez le Développer menu, situé en haut de l'écran.
Lorsque le menu déroulant apparaît, sélectionnez Afficher la source de la page. Vous pouvez également utiliser le raccourci clavier suivant: COMMAND + OPTION + U.

Opéra

En cours d'exécution sur: Linux, MacOS, Windows

Pour afficher le code source de la page Web active dans le navigateur Opera, utilisez le raccourci clavier suivant: CTRL + U (COMMAND + OPTION + U sur macOS). Si vous préférez charger la source dans l'onglet en cours, saisissez le texte suivant à gauche de l'URL de la page dans la barre d'adresse, puis appuyez sur Entrez: view-source: ( i.e., view-source: https: //www.Go-Travels.com ).

La version de bureau d’Opera vous permet également d’afficher les sources HTML, CSS et d’autres éléments à l’aide de ses outils de développement intégrés. Pour lancer cette interface, qui apparaîtra par défaut sur le côté droit de la fenêtre de votre navigateur principal, appuyez sur le raccourci clavier suivant: CTRL + SHIFT + I (COMMAND + OPTION + I sur macOS).

L'ensemble d'outils de développement d'Opera est également accessible en procédant comme suit.

Sélectionnez le logo Opera, situé dans le coin supérieur gauche de la fenêtre de votre navigateur.
Lorsque le menu déroulant apparaît, survolez la souris avec la souris. Plus d'outils option.
Cliquer sur Afficher le menu du développeur.
Sélectionnez le logo Opera à nouveau.
Lorsque le menu déroulant apparaît, placez votre curseur sur Développeur.
Lorsque le sous-menu apparaît, sélectionnez Outils de développement.

Vivaldi

Il existe plusieurs façons d’afficher la source de la page dans le navigateur Vivaldi. Le plus simple est via le CTRL + U raccourci clavier, qui présente le code de la page active dans un nouvel onglet.

Vous pouvez également ajouter le texte suivant au début de l'URL de la page, qui affiche le code source dans le présent onglet: voir la source:. Un exemple de ceci serait view-source: http: //www.dotdash.com .

Une autre méthode consiste à utiliser les outils de développement intégrés du navigateur, accessibles en appuyant sur la touche CTRL + SHIFT + I combinaison ou par le Outils de développement option dans le navigateur Outils menu - trouvé en sélectionnant le V logo dans le coin supérieur gauche. L'utilisation des outils de développement permet une analyse beaucoup plus approfondie des sources de la page.