Comment afficher le code source d’une page Web dans Google Chrome

Le code source d’une page est une collection de balises HTML, de vues CSS et de scripts JavaScript. Vous pouvez faire une analogie avec les tâches que l’enseignant donne aux élèves. Les étudiants doivent accomplir un certain nombre de tâches (fonctions) pour atteindre le résultat. Dans notre cas, l’enseignant est le navigateur, et les tâches effectuées sont le code en discussion.

Dans cet article, nous verrons comment ouvrir le code de la page à l’aide de raccourcis clavier et des paramètres de base du navigateur, d’outils de développement ou d’un clic droit banal.

Qu’est-ce que le code de page ?

Composants standard du code source de la page :

  • ligne HTML;
  • Combinaison de style ou lien vers CSS;
  • Fichiers/liens/programmes créés avec JavaSkript.

Chacun d’eux est « examiné » par le navigateur pour obtenir les données nécessaires. Grâce à l’ensemble des informations, nous obtenons tout le contenu de la page. Dans le code, tout est contenu dans une variante légèrement différente, il n’y a pas d’images là-bas. Il y a un script, des références, des caractères et d’autres éléments de code.

Affichage du code source dans Chrome
Exemple d’affichage du code source de la page dans le navigateur Google Chrome

En termes simples, toutes les informations du site sont collectées dans un petit texte structuré, dans lequel toutes les données sont indiquées dans une langue spéciale.

Il utilise certains éléments qui aident à construire correctement une page Web. Comment et pourquoi un tel ensemble de données devrait-il être analysé?

Pourquoi vous devez afficher le code

Après avoir analysé ou visualisé le code, sachant ce qui est quoi et quelles données sont responsables de quoi, vous pouvez effectuer le travail du navigateur. C’est-à-dire que nous pouvons résoudre tous les problèmes associés à la redirection vers le site. C’est la tâche principale du client, à laquelle il peut faire face en étudiant le code, mais il est facile d’obtenir d’autres paramètres.

Après avoir étudié le code, vous pouvez :

  • Afficher les balises pour analyser un site spécifique;
  • Découvrez si un élément particulier se trouve sur la page. Par exemple, il est facile de vérifier la présence de certains scripts, compteurs, certains codes et bien d’autres parties;
  • Définissez les paramètres des pièces. Par exemple, leur police ou leur couleur;
  • Accédez aux pièces jointes et autres éléments contenus sur la page;
  • Voir tous les liens qui sont contenus sur le site;
  • Identifiez les problèmes avec le code qui vous empêchent d’accéder au site ou d’effectuer certaines actions lorsque vous y êtes connecté.

Ce sont des données très utiles, après un examen attentif de laquelle vous pouvez explorer pleinement la page Web. Grâce à ces informations, il est possible de détecter facilement tous les liens nécessaires et de les utiliser, de trouver toutes les pièces jointes sur la plate-forme Web.

Bien sûr, ce ne sont pas toutes les données qui peuvent être extraites lors de l’examen du code. Le code de l’élément contient plusieurs fois plus d’informations, mais pour cela, vous devez avoir plus de connaissances.

Règle de priorité

Pour afficher le code de la page dans Google Chrome :

  • Allez sur la page qui nous intéresse et cliquez n’importe où avec le bouton droit de la souris pour ouvrir le menu contextuel.
  • Dans la liste, nous trouvons « Afficher le code de la page » et cliquez dessus.
Code source dans Google Chrome
Fonction pour afficher le code source de la page dans Google Chrome

En outre, vous pouvez accéder au code à l’aide d’un raccourci clavier ou d’outils de développement. Les outils, à leur tour, peuvent également être invoqués par une combinaison rapide.

Examinons de plus près ces méthodes.

Utilisation des raccourcis clavier

Une option simple et rapide, il suffit d’appuyer sur deux boutons sur le panneau du clavier en même temps.

Pour ouvrir le code, appuyez sur Ctrl + U. Dans la nouvelle fenêtre, absolument tout le code de la page s’ouvre.

Voilà, commençons à étudier les données, les liens, les titres, les scripts et autres informations.

Utilisation des outils de développement

Pour ouvrir le code source d’une page via les outils de développement :

  • Dans le coin supérieur droit du navigateur, cliquez sur trois points.
  • Dans le menu qui s’ouvre, sélectionnez « Outils supplémentaires » – « Outils de développement ».
  • Dans la fenêtre d’outils qui s’ouvre, sélectionnez l’onglet Eléments.
Outils de développement Chrome
Outils de développement dans Google Chrome

Combinaison rapide pour accéder aux outils de développement Ctrl + Maj + I

Il reste à extraire les données nécessaires du code et à les utiliser à vos propres fins. Si vous rencontrez des problèmes ou d’autres nuances, vous pouvez facilement modifier ce code, puis enregistrer le résultat.

Par exemple, dans les réseaux sociaux, vous pouvez changer la couleur de l’avatar du bleu à l’orange. Changez le nombre d’amis, de followers, de likes, mais tout cela sera invalide sur le site, uniquement sur votre appareil.

Bien sûr, cette fonction n’est pas nécessaire pour ajouter des abonnés dans les réseaux sociaux, car son utilisation est très large. Par exemple, vous pouvez facilement modifier la structure de la page du site personnel de services ou de produits, modifier les données qui ne peuvent pas être modifiées dans l’éditeur du site Web (le cas échéant).

Alors, comment changer le code?

Comment modifier et enregistrer le code source

Comment afficher le code de la page dans Google Chrome compris, mais comment le changer?

Certains croient à tort que pour cela, vous devez être un programmeur expérimenté, connaître toutes les subtilités de l’affaire et bien plus encore. Bien sûr, ce n’est pas le cas, tout est beaucoup plus simple.

Voici le plan ci-dessous :

  • Ouvrez la page nécessaire.
  • Appuyez sur la touche « F12 » (elle est située sur le dessus du clavier).
  • Cela ouvre le code que vous pouvez rétablir.
  • Au bas de la page Web, nous examinons les données reçues, à la recherche de ce qui doit être changé. Il peut s’agir d’un élément spécifique ou d’une grande partie des données disponibles.
  • Cliquez sur la partie requise du code affiché avec le bouton droit de la souris et dans la liste des commandes possibles qui apparaît, sélectionnez « Modifier au format HTML ».
  • Le morceau de code nécessaire sera ouvert dans un nouvel onglet, où vous pourrez modifier les informations.
  • Une fois le travail terminé, vous devez enregistrer les données modifiées. Pour ce faire, revenez au bouton « F12 » et fermez la dernière fenêtre.

Regarder les changements! La page est modifiée en changeant les informations dans le code, et sans avoir certaines connaissances du domaine de la programmation. Si, pour une raison quelconque, le contenu n’a pas changé, mettez à jour la plate-forme Web.

Nous espérons que cet article vous a été utile et que vous avez appris ce qu’est le code d’une page Web, pourquoi elle est créée et ce qu’elle contient, comment et pourquoi elle doit être modifiée.

Mike Lombardi/ author of the article

Ingénieur AQ, chef du département des tests automatisés de logiciels. Connaissance de Java, C/C++, JSP, HTML, XML, JavaScript, SQL et Oracle PL/SQL. Journaliste et chroniqueur dans le domaine des technologies de l'information. Créateur et administrateur de sites web.

OldVersions.INFO