Les développeurs de navigateurs ont pris soin de la commodité de ceux qui créent des sites qui s'ouvrent dans ces mêmes navigateurs, à savoir les webmasters. Ils ont ajouté à caractéristiques standards outils de développement avec lesquels vous pouvez facilement ouvrir et voir la source pages du site Web dans le navigateur: HTML, CSS, JavaScript (JS), obtenir diverses données utiles sur la structure du site, l'héberger analyse technique. En général, pour voir beaucoup de choses utiles.

Bien sûr, ces outils sont utilisés non seulement par les créateurs de sites pour le travail, mais aussi utilisateurs ordinaires, dont le code source vous permet de voir diverses charges utiles.

À partir de cet article, vous apprendrez comment afficher le code source de la page du site dans le navigateur (comment ouvrir le code HTML, CSS, JavaScript du site).

Comment ouvrir le code source de la page dans le navigateur

Il existe deux manières d'ouvrir le code source d'une page Web dans un navigateur :

1. Utilisation des raccourcis clavier ;
2. Ouvrir depuis le menu contextuel.

Ctrl+U- une combinaison de touches de raccourci pour afficher le code source de la page entière du site dans une nouvelle fenêtre séparée. Standard pour tous les navigateurs : Google Chrome Opéra, MozillaFirefox, navigateur Yandex, IE.

Vous pouvez également accéder aux outils de développement comme suit :

Pour trouver rapidement code souhaité, mot ou texte sur la page, vous pouvez utiliser la combinaison de raccourcis clavier de recherche standard pour tous les navigateurs : Ctrl + G.

Instruction vidéo :

Afficher le code de l'élément | explorer l'élément | inspecter l'élément

Si vous avez soudainement besoin de ne pas afficher l'intégralité du code source, mais d'en afficher uniquement une partie distincte, une section de la page, l'outil précédent ne fonctionnera pas. Pour ce faire, il existe une autre fonction dans les outils de développement, qui sera abordée ci-dessous.

Comment visualiser le code d'un élément sur une page :

Vous pouvez également utiliser des raccourcis clavier pour accès rapideà l'inspection des éléments.

Touches de raccourci (boutons) :

Google Chrome : Ctrl+Maj+I et Ctrl+Maj+C

Opéra : Ctrl+Maj+I et Ctrl+Maj+C

Mozilla Firefox : Ctrl+Maj+I et Ctrl+Maj+C

Navigateur Yandex : Ctrl+Maj+I et Ctrl+Maj+C

Après les actions effectuées, le code source s'ouvrira dans la même fenêtre du navigateur les pages Web:

Tout le code HTML sera dans la grande colonne de gauche. Et les styles CSS sont à droite.

L'avantage de cette méthode, bien sûr, est que l'utilisateur a la possibilité de modifier le code source, de modifier les styles. Autrement dit, vous pouvez modifier les styles sur le site et voir à quoi il ressemblera avec certains styles, sans avoir à apporter immédiatement des modifications aux fichiers qui se trouvent sur les serveurs d'hébergement. Pour modifier ou ajouter code de programmation, vous devez double-cliquer sur le fragment ou la section souhaitée. Bien entendu, la correction du code dans le navigateur ne sera pas effectuée sur les serveurs d'hébergement. Par conséquent, à l'avenir, dans tous les cas, vous devrez copier ce code et l'écrire dans des fichiers.

Ce didacticiel vidéo détaille et montre comment utiliser les outils de développement :

Ainsi, juste en ligne, directement dans le navigateur, vous pouvez visualiser le code source de la page du site, obtenir des informations de base sur le code HTML et CSS, les modifier et les copier, sans avoir à télécharger les fichiers de ce site sur votre ordinateur.

Soit dit en passant, les internautes inexpérimentés qui ont modifié le code de la page et s'attendent à ce qu'il soit enregistré seront déçus. Après tout, après avoir actualisé la page, toutes les modifications apportées à celle-ci seront perdues. Cela ne suffit pas pour pirater le site 🙂

Comment afficher le code source sur un téléphone Android

Je voudrais également noter que les outils de développement sont disponibles non seulement dans la version de bureau des navigateurs, c'est-à-dire sur les ordinateurs et les ordinateurs portables. Sur les téléphones et les tablettes (Android, IOS), vous pouvez également afficher le code source.

Pour cela, ajoutez le préfixe view-source à l'URL de la page inspectée :

Par example:

source d'affichage : https://site Web/turbo-mode-opera/

Donc, aujourd'hui, nous allons examiner quelques outils utiles pour les assistants Web qui facilitent la vie lors de la construction d'un site. Commençons par la console pour webmestres dans GoogleChrome. Et passons en revue les questions qui se posent le plus souvent au webmaster lors de la mise en page du site.

Pour accéder à la console, ouvrez votre site dans Google Chrome, cliquez sur clic-droit souris n'importe où sur la page Web, et sélectionnez "Afficher la source de la page" dans le menu déroulant contextuel, ou sur un élément spécifique à explorer en sélectionnant "Afficher la source de l'élément".

En haut, vous aurez plusieurs onglets répertoriés. Aujourd'hui nous allons parler de l'onglet "Eléments" , qui présente les éléments d'une page Web avec la mise en évidence des balises, des propriétés, la mise en évidence de l'imbrication des éléments, la représentation de la hiérarchie des éléments dans l'arborescence DOM (indice en bas, du parent racine à celui en cours d'examen), la possibilité d'éditer éléments, une liste de leurs propriétés, pensez à rechercher par éléments, et aussi Familiarisons-nous avec la visualisation des styles css associés aux éléments, etc.

Comment afficher tous les styles associés à un élément particulier ? Lequel est utilisé actuellement ? Dans quels fichiers se trouvent-ils ?

Alors, il n'y a rien de plus simple ! Nous ouvrons le navigateur Google Chrome, ouvrons notre site - la source des questions, faisons un clic droit sur l'élément souhaité s'il est visible dans le contexte de la page, et sélectionnons dans menu contextuel Rubrique "Voir le code de l'élément".

En bas, nous avons une console avec un onglet en surbrillance à gauche " Eléments"Et tous les styles associés à l'élément à droite, où: Styles calculés sont les styles "résumés" généraux qui ont été attribués à l'élément à partir de règles css et les paramètres du navigateur de l'utilisateur (son environnement), tandis que l'onglet est réduit.

Mais nous nous intéressons à l'onglet "Styles" déployé en dessous de celui-ci, qui liste tour à tour tous les styles affectés à l'élément, ainsi que les fichiers où ces règles sont précisées pour cet élément par son type, id, classe, nom, propriété, attribut, etc. En même temps, si la règle CSS est barrée, cela signifie qu'elle a été redéfinie plus tôt/suivant (ce qui permet de savoir facilement laquelle des règles CSS est prioritaire et s'applique à l'élément dans ce cas).

Sous la console se trouve une ligne qui affiche l'élément dans la hiérarchie du document, vous permettant facilement de visualiser la liste complète des éléments parents de la racine à l'élément sélectionné. Quelque chose comme de la chapelure.

Balise HTML non visible dans le contexte de la page ? Ou avez-vous besoin de trouver toutes les balises, par exemple, par une certaine classe, un nom, une propriété, un type ?

Ouvrez le site dans Google Chrome, faites un clic droit, appelez le menu contextuel, sélectionnez « Afficher le code de la page » . Appuyez sur la combinaison de touches "CTRL + F" en même temps, entrez la phrase dont nous avons besoin ( par exemple: classe = "rembourrage") et parcourez la liste des résultats trouvés, en parcourant simultanément tous les styles associés aux éléments souhaités sur le côté droit de la page.

Comment visualiser le code html de l'élément (des éléments) chargé dynamiquement (par exemple : par Ajax)

En attente de chargement de la page dans Google Chrome. Nous effectuons les actions nécessaires pour qu'Ajax fonctionne. Nous faisons un clic droit sur les données téléchargées, sélectionnons "Afficher le code de l'élément" dans le menu contextuel, examinons le résultat dans la console sur l'onglet "Eléments" à gauche.

Voir les changements de style CSS en temps réel

Soit dit en passant, il est également pratique d'observer, si nécessaire, quels styles sont attribués à un élément à la volée, par exemple lors du défilement de la galerie et d'autres événements de minuterie. Tous les styles attribués via javascript en temps réel seront affichés dans la propriété style l'élément sélectionné dans la fenêtre de l'onglet Eléments.

Vue interactive de l'impact des règles css sur la présentation des balises html

Google Chrome fournit une console interactive pour style css. Et cela signifie que vous pouvez non seulement voir quels styles sont appliqués à l'élément, mais également passer le curseur de la souris sur un certain propriétés css, activez-le à l'aide de la case à cocher contextuelle à droite ou désactivez-le en décochant le drapeau et en affichant le résultat sur la page.

On change la structure de la présentation des éléments html à la volée (directement dans le navigateur)

Donc, nous avons déjà appris à explorer la structure d'un document Web dans Google Chrome, jetons maintenant un coup d'œil à l'édition d'éléments à la volée. Nous allons à la console de la manière qui nous convient. Nous trouvons l'élément souhaité dans l'onglet «Éléments», faites un clic droit dessus, appelant ainsi le menu contextuel contextuel:

• Ajouter un attribut- Ajoute un attribut à l'élément spécifié. Dès que le curseur devient actif, nous commençons à définir la propriété souhaitée. Par example: Écrivons name="itemImage", qui sera immédiatement ajouté à notre élément.
• Modifier l'attribut– si vous faites un clic droit sur un attribut d'un élément, l'élément devient disponible Éditerles attributs. Cliquez, modifiez.

Exemple d'utilisation : nous avons oublié le mot de passe enregistré sous les astérisques dans Google Chrome (si le mot de passe a été enregistré dans ce navigateur). Faites un clic droit sur l'élément avec l'entrée du mot de passe, cliquez sur "Afficher Code de l'article» , dans la console sur le côté gauche de l'onglet Éléments clic droit sur l'attribut type="password", clic gauche sur Éditerles attributs, modifier l'attribut type="le mot de passe" au type="texte", et ici nous avons déjà le même mot de passe sous forme de texte au lieu d'astérisques.

• Éditerhtml- clic droit sur un élément de la console Éléments, choisir Éditerhtml, changez le code à votre convenance.
• CopiecommeHTML- copier la partie de HTML dont nous avons besoin pour des recherches ultérieures, par exemple, dans un cahier, ou à d'autres fins où nous devons appliquer exactement la même mise en page. Nous gagnons du temps.
• CopieXPATH– copie la représentation XPATH de la structure de la racine de l'élément parent vers l'élément sélectionné.
• Supprimernœud– si vous devez supprimer l'élément actuellement sélectionné et tous ses enfants du contexte de la page Web, et voir le résultat.
• Motenvelopper- rendra la vue de la page Web dans le contexte de la console Éléments plus lisible.

Dans les articles suivants, nous continuerons à examiner les outils pour les webmasters, et en particulier, nous nous familiariserons avec le reste des onglets des outils pour les webmasters dans Google Chrome et pensez également au débogage erreurs de javascript en utilisant différents navigateurs

Il est nécessaire de voir rapidement toutes les modifications sur le site lui-même, sans affecter les fichiers et le code du site mis en ligne sur Internet. Par exemple, changez Schéma de couleur n'importe quel bloc, déplacer un élément qui est sorti, etc.

Pour ce faire, de nombreux webmasters utilisent serveurs locaux Denwer ou OpenServer en exécutant copie complète site sur votre ordinateur. Cette méthode est universelle et adaptée aux professionnels, avec elle vous pouvez vérifier le travail divers scénarios et plugins, expérimentez la modification de la conception et modifiez tous les fichiers du site, et après le test, transférez les modifications appropriées directement sur le site.

Pour les utilisateurs qui sont loin de l'art du webmaster, je recommande d'utiliser un navigateur à ces fins. Puisque j'utilise Chrome, je donnerai des instructions avec des captures d'écran pour ce navigateur particulier. Par analogie, vous pouvez travailler avec Opera, Yandex.Browser, Mozilla Firefox et d'autres navigateurs, le principe de leurs outils est similaire.

Instruction 1 : comment visualiser l'intégralité du code HTML du site dans le navigateur

Ouvrez la page Web requise de votre site. Nous faisons un clic droit sur l'élément requis, un menu déroulant contextuel du navigateur avec les commandes disponibles apparaîtra :

Figure 1. Affichage de l'intégralité du code HTML d'une page Web dans Navigateur Chrome

Important: Les commandes du menu déroulant peuvent différer, par exemple, pour les éléments actifs (liens, images, vidéos) et les éléments inactifs (texte, arrière-plan, divs) :

Figure 2. Menu déroulant du navigateur Chrome

Par conséquent, si vous ne trouvez pas la commande requise, faites simplement un clic droit ailleurs ou utilisez les raccourcis clavier du navigateur.

En revenant à la figure 1, elle montre la commande nécessaire pour afficher l'intégralité du code HTML de la page Web d'origine, elle s'appelle " Afficher le code de la page". Cliquez sur la commande pour ouvrir nouvel onglet avec le code complet de la page Web d'origine, un gros plus pour tout - la visualisation est disponible avec la coloration syntaxique :

Figure 3. Extrait de code pour ce site

Cet outil est très utile pour trouver et éditer les éléments que vous recherchez.

Autres moyens d'afficher tout le code HTML d'une page Web

Pour un accès plus rapide, vous pouvez utiliser d'autres moyens d'appeler cet outil

1. Sur la figure 1, on voit aussi que commande donnée accessible par raccourci clavier + ;
2. Collez dans la barre d'adresse de la source d'affichage du navigateur : site au lieu de mon domaine, collez votre adresse ;

Les deux méthodes sont universelles et devraient fonctionner dans tous les navigateurs.

Au début, il peut sembler à certains que ce n'est pas du tout bon outil, mais l'affichage de l'intégralité du code HTML du site est idéal pour trouver les éléments nécessaires dans le code, il peut s'agir de liens, de balises, de balises méta, d'attributs et d'autres éléments.

Combinaison de touches de raccourci +ouvrez le champ de recherche, dans le navigateur Chrome, il apparaît en haut à droite :

Figure 3. Recherche par code de site

Après avoir fait une demande au formulaire de recherche, l'écran passera au premier élément trouvé, en utilisant les flèches vous pouvez vous déplacer entre eux et sélectionner celui dont vous avez besoin :

Figure 4. Rechercher par Code HTML placer

Instruction 2 : Comment afficher et modifier le code HTML et CSS du site Web dans le navigateur Google Chrome

Maintenant, la partie la plus importante, dans laquelle je montrerai comment vous pouvez modifier le code HTML et CSS du site dans le navigateur. puis transférez les modifications vers le navigateur.

comme ça outil utile toujours disponible dans votre navigateur, expérimentez d'autres commandes qui vous faciliteront l'édition du site.

Pendant longtemps, l'option "afficher le code source de la page" m'a été inutile et sans intérêt. Jusqu'à présent, apprendre le HTML à Codecademy et créer mes propres sites n'est pas devenu mon nouveau passe-temps. Ici, la question s'est posée : où trouver des cas réels et emprunter des solutions intéressantes pour votre « tirelire » ? La réponse était étonnamment simple, comme tout génie : visualisez le code source de la page dans Google Chrome ! Je partage avec vous mes modestes trouvailles.

Qu'est-ce que le code source de la page

Si vous faites comme moi vos premiers pas en programmation HTML, il ne sera pas superflu de savoir quel est le code source d'une page.

Le code source, également appelé code HTML de la page, est un texte en Hyper Text Markup Language (HTML). Il comprend le contenu réel de la page (texte, tableaux) et les balises. Ces derniers jouent le rôle d'instructions pour le navigateur : comment afficher le contenu, quel type de formatage utiliser, où insérer un lien hypertexte ou un fichier multimédia. Eh bien, pour nous, programmeurs débutants, le code source est le meilleur terrain d'entraînement : nous trouvons un site intéressant et regardons, sauvegardons, utilisons des fragments réussis. Comment?

Comment afficher le code source dans la page du navigateur Google Chrome

Trouvez la page que vous aimez. Par exemple, je me suis intéressé au design du menu du site. Open source dans Navigateur Google Chrome peut être fait de trois manières :

1. Cliquez sur l'icône menu dans le droit coin supérieur navigateur et sélectionnez " Outils supplémentaires". Entre autres, il existe une option pour "Afficher le code source". J'avoue que je m'en sers rarement. Par ici: beaucoup de mouvements inutiles. Cela peut être rendu encore plus facile.
2. Appuyez sur la combinaison de touches Ctrl+U- ouvre une nouvelle fenêtre avec le code source ;
3. Pour les fans du menu contextuel : faites un clic droit sur la page et sélectionnez l'option "Afficher le code de la page".

Nous avons fait face à la tâche de visualiser le code HTML de la page dans le navigateur. Nous passons à l'étape la plus intéressante.

Comment modifier et enregistrer le code source

Pour apprendre à créer des sites Web, il ne suffit pas de lire le code HTML de quelqu'un d'autre. Vous devez jouer avec, expérimenter, apporter des modifications et vérifier le résultat. Vous pouvez même commencer par compiler quelques échantillons réussis. Comment modifier et enregistrer le code source ?

Option 1. "Manuellement"

Après avoir ouvert le code source de la page, nous appelons le menu contextuel et sélectionnons l'option "Enregistrer sous" et enregistrons le fichier dans Disque dur. Nous modifions le fichier dans le Bloc-notes ou le Bloc-notes, enregistrons les modifications et ouvrons via le navigateur. Les résultats de nos changements (réussis et moins bons) seront reflétés dans la fenêtre du navigateur.

Option 2. Pour les pros

Lorsque vous "jouez" avec le code source tous les jours, le processus de "enregistrer - ouvrir - modifier - enregistrer - vérifier" est fatigant. Pour ma part, j'ai trouvé une solution sous la forme de l'installation d'un plugin pour Google Chrome - Firebug Lite. Il vous permet de modifier et d'enregistrer le code source sans quitter la fenêtre de votre navigateur.

Ctrl+U

Comment visualiser le code source d'un élément ?

Cliquez avec le bouton droit de la souris sur l'élément de page qui vous intéresse.

Google Chrome : "Afficher le code de l'élément"

Opéra : "Inspecter l'élément"

Firefox : "Analyser l'élément"

Dans d'autres navigateurs, recherchez un élément de menu similaire.

Bonjour!

Surtout au début de l'article, j'ai exposé tout le point, pour ceux qui recherchent une réponse rapide.

L'information peut être connue de beaucoup, mais puisque j'écris pour les blogueurs novices, les programmeurs Web et autres mineurs, cet article d'aide doit être présent.

À l'avenir, vous étudierez certainement le code source des pages et des éléments individuels.

Regardons exemple spécifique comment vous pouvez utiliser l'affichage de la source de la page.

Par exemple, nous voulons voir ce que mots clés(mots-clés) sont utilisés pour une page spécifique. Nous allons sur la page Web qui nous intéresse et appuyez sur Ctrl + U. Le code source de cette page s'ouvrira dans une fenêtre séparée ou dans un onglet séparé. Appuyez sur Ctrl+F pour rechercher un morceau de code. Dans ce cas, nous tapons dans la boîte de recherche le mot " mots clés". Vous serez automatiquement redirigé vers un extrait de code avec cette balise META et le mot recherché sera mis en surbrillance.

Par analogie, vous pouvez rechercher et étudier d'autres extraits de code.

L'affichage de l'intégralité du code source d'une page n'est dans la plupart des cas pas très pratique, de sorte que dans tous les navigateurs, il est possible d'afficher le code d'un seul élément ou fragment.

Prenons un exemple concret pour visualiser le code de l'élément. Par exemple, voyons si le lien a attribut non suivi. Nous faisons un clic droit sur le lien qui nous intéresse et dans le menu contextuel déroulant, un clic gauche sur l'élément "Afficher le code de l'élément" ou similaire (selon votre navigateur). Ci-dessous, dans une fenêtre spéciale pour l'analyse de code, nous obtenons quelque chose de similaire.

Nous voyons que est présent dans le code du lien. Cela signifie que ce lien ne "fuira" pas et ne sera pas PR. Nous en parlerons plus en détail dans de prochains articles. Pour l'instant, l'important est que vous sachiez maintenant comment afficher le code source de la page et le code source d'un élément individuel.