Les développeurs de navigateurs ont veillé au confort de ceux qui créent des sites qui s'ouvrent dans ces mêmes navigateurs, à savoir les webmasters. Ils ont ajouté des outils de développement aux fonctionnalités standard, avec lesquels vous pouvez facilement ouvrir et afficher le code source de la page du site dans le navigateur: HTML, CSS, JavaScript (JS), obtenir diverses données utiles sur la structure du site, procéder à son analyse technique. En général, voyez beaucoup de choses utiles.
Bien entendu, ces outils sont utilisés non seulement par les créateurs de sites Web à des fins professionnelles, mais également par les utilisateurs ordinaires, pour qui le code source leur permet de visualiser diverses données utiles.
A partir de cet article vous apprendrez comment visualiser le code source d'une page de site web dans un navigateur (comment ouvrir le code HTML, CSS, JavaScript d'un site web).
Comment ouvrir le code source d'une page dans un navigateur
Il existe deux manières d'ouvrir le code source d'une page Web dans un navigateur :
- Utiliser des touches de raccourci ;
- Ouvrir à partir du 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, Opera, Mozilla Firefox, navigateur Yandex, IE.
Vous pouvez également accéder aux outils de développement comme suit :
Afin de trouver rapidement le code, le mot ou le texte souhaité sur une page, vous pouvez utiliser la combinaison de touches de raccourci de recherche standard pour tous les navigateurs : Ctrl + G.
Instructions 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 seulement une partie distincte, une zone de la page, alors l'outil précédent ne fonctionnera pas. À cette fin, les outils de développement ont une autre fonction, 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éder rapidement à l’inspection des éléments.
Raccourcis clavier (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 ces étapes, le code source de la page Web s'ouvrira dans la même fenêtre du navigateur :
Tout le code HTML sera dans la grande colonne de gauche. Et les styles CSS sont à droite.
L’avantage de cette méthode est bien entendu que l’utilisateur a la possibilité de modifier le code source et d’éditer les styles. Autrement dit, vous pouvez modifier les styles sur le site et voir à quoi cela ressemblera avec certains styles, sans avoir à apporter immédiatement des modifications aux fichiers situés sur les serveurs d'hébergement. Pour modifier ou ajouter du code de programme, vous devez double-cliquer sur le fragment ou la zone 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, vous devrez dans tous les cas copier ce code et l'écrire dans des fichiers.
Cette instruction vidéo décrit en détail et montre comment travailler avec les outils de développement :
Juste comme ça, juste en ligne, directement dans votre navigateur, vous pouvez visualiser le code source de la page du site, obtenir des données 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 .
D'ailleurs, 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 disparaîtront. 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 ne sont pas disponibles uniquement dans la version de bureau des navigateurs, c'est-à-dire sur les ordinateurs et les ordinateurs portables. Sur les téléphones et tablettes (Android, iOS), vous pouvez également consulter le code source.
Pour ce faire, ajoutez le préfixe view-source à l'URL de la page en cours d'inspection :
Par exemple:
voir la source :https://site/turbo-rezhim-opera/
Vous devez voir rapidement toutes les modifications sur le site lui-même, sans affecter les fichiers et le code du site publiés sur Internet. Par exemple, modifier la palette de couleurs d'un bloc, déplacer un élément qui a été déplacé, etc.
Pour ce faire, de nombreux webmasters utilisent des serveurs Denwer ou OpenServer locaux, exécutant une copie complète du site sur leur ordinateur. Cette méthode est universelle et adaptée aux professionnels ; elle peut être utilisée pour tester le fonctionnement de divers scripts et plugins, expérimenter des modifications de conception et modifier tous les fichiers du site, et après le test, transférer les modifications appropriées directement sur le site.
Pour les utilisateurs éloignés de l'art des webmasters, je recommande d'utiliser un navigateur à ces fins. Puisque j'utilise Chrome, je fournirai 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 d'un site dans un navigateur
Ouvrez la page Web requise de votre site. Faites un clic droit sur l'élément souhaité, 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 le navigateur Chrome
Important: Les commandes du menu déroulant peuvent différer, par exemple, pour les éléments actifs (liens, images, vidéos) et inactifs (texte, arrière-plan, divs) :
Figure 2. Menu déroulant du navigateur Chrome
Donc, si vous ne trouvez pas la commande dont vous avez besoin, faites simplement un clic droit ailleurs ou utilisez les raccourcis clavier de votre navigateur.
Revenons à la figure 1, elle montre la commande nécessaire pour visualiser tout le code HTML de la page web source, elle s'appelle " Afficher le code de la page". Cliquez sur la commande, un nouvel onglet s'ouvrira avec le code complet de la page web source, un gros plus à tout - la visualisation est disponible avec coloration syntaxique :
Figure 3. Fragment de code de ce site
Cet outil est très utile pour rechercher et éditer les éléments que vous recherchez.
Méthodes alternatives pour afficher tout le code HTML d'une page Web
Pour un accès plus rapide, vous pouvez utiliser d'autres manières d'appeler cet outil
- Sur la figure 1 on voit également que cette commande est disponible via un raccourci clavier + ;
- Collez view-source:site dans la barre d'adresse du navigateur au lieu de mon domaine, insérez votre adresse ;
Les deux méthodes sont universelles et devraient fonctionner dans tous les navigateurs.
Au début, certains peuvent penser que ce n'est pas du tout un outil nécessaire, mais visualiser l'intégralité du code HTML d'un 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 raccourcis clavier +ouvrez la fenêtre de recherche, dans le navigateur Chrome elle apparaît en haut à droite :
Figure 3. Recherche par code de site
Après avoir saisi une demande dans le formulaire de recherche, l'écran se déplacera vers le premier élément trouvé, à l'aide des flèches que vous pourrez déplacer entre eux et sélectionner celui dont vous avez besoin :
Figure 4. Recherche par code de site HTML
Instruction 2 : comment afficher et modifier le code HTML et CSS d'un site dans le navigateur Google Chrome
Maintenant, la partie la plus importante, dans laquelle je vais montrer comment modifier le code HTML et CSS d'un site Web dans un navigateur. puis transférez les modifications vers le navigateur.
Cet outil utile est toujours disponible dans votre navigateur ; expérimentez d'autres commandes qui vous permettront de modifier plus facilement votre site.
Si vous ouvrez une page Web, elle contiendra des éléments typiques qui ne changent pas en fonction du type et de l'orientation du site. L'exemple 4.1 montre le code d'un document simple contenant des balises de base.
Exemple 4.1. Code source de la page Web
Exemple de page Web
Titre
Premier paragraphe.
Deuxième paragraphe.
Copiez le contenu de cet exemple et enregistrez-le dans le dossier c:\www\ sous le nom example41.html. Après cela, lancez le navigateur et ouvrez le fichier via l'élément de menu Fichier > Ouvrir un fichier (Ctrl+O). Dans la boîte de dialogue de sélection de document, sélectionnez le fichier exemple41.html. La page Web illustrée sur la figure 1 s'ouvrira dans le navigateur. 4.1.
Riz. 4.1. Résultat de l'exécution de l'exemple
Élémentest destiné à indiquer le type du document actuel - DTD (définition du type de document, description du type de document). Ceci est nécessaire pour que le navigateur comprenne comment interpréter la page Web actuelle, car HTML existe en plusieurs versions, en plus, il existe XHTML (EXtensible HyperText Markup Language), qui est similaire au HTML, mais en diffère par la syntaxe. Pour que le navigateur ne se trompe pas et comprenne selon quelle norme afficher la page web, il faut paramétrer dans la première ligne de code
.
Il existe plusieurs types, ils diffèrent selon la version de HTML qu'ils ciblent. Dans le tableau 4.1. Les principaux types de documents avec leurs descriptions sont donnés.
Tableau 4.1. DTD valides | DOCTYPE |
Description |
|---|
| HTML4.01
|
|
|
Syntaxe HTML stricte. |
|
|
Syntaxe HTML de transition. |
|
|
Un document HTML utilise des frames. |
| HTML5
|
|
|
Cette version de HTML n'a qu'un seul doctype. |
| XHTML 1.0
|
|
|
Syntaxe XHTML stricte. |
|
|
Syntaxe de transition XHTML. |
|
|
Le document est écrit en XHTML et contient des frames. |
| XHTML1.1
|
|
|
Les développeurs de XHTML 1.1 s'attendent à ce qu'il remplace progressivement le HTML. Comme vous pouvez le constater, cette définition n'a pas de division en types, puisque la syntaxe est la même et obéit à des règles claires. |
La différence entre une description de document stricte et une description de transition réside dans une approche différente de l'écriture du code du document. Le HTML strict nécessite le strict respect de la spécification HTML et est impitoyable. Le HTML transitionnel est plus souple concernant certains défauts de code, ce type est donc préférable à utiliser dans certains cas.
Par exemple, en HTML et XHTML strict, la présence de la balise est obligatoire
, et en HTML de transition, il peut être omis et non spécifié. Dans le même temps, nous rappelons que le navigateur affichera le document dans tous les cas, qu'il corresponde ou non à la syntaxe. Ce type de contrôle est effectué à l'aide d'un validateur et s'adresse principalement aux développeurs pour traquer les erreurs dans le document.</p>
<p>À l'avenir, nous utiliserons principalement des<!DOCTYPE>, sauf indication contraire. Cela nous permettra d’éviter les erreurs courantes et nous apprendra à écrire du code syntaxiquement correct.</p>
<p>Vous pouvez souvent trouver du code HTML sans en utiliser<!DOCTYPE>, la page Web sera toujours affichée dans ce cas. Cependant, il peut arriver qu'un même document apparaisse différemment dans le navigateur lorsque vous utilisez<!DOCTYPE>et sans cela. De plus, les navigateurs peuvent afficher ces documents à leur manière, ce qui fait que la page « s'effondre », c'est-à-dire sera affiché complètement différemment de ce dont le développeur a besoin. Pour éviter de telles situations, ajoutez toujours<!DOCTYPE>au début du document.</p><p>Étiqueter <html>définit le début du fichier HTML, l'en-tête est stocké à l'intérieur ( <head>) et le corps du document ( <body>
).</p><p>Titre du document, également appelé bloc <head>, peut contenir du texte et des balises, mais le contenu de cette section n'est pas directement affiché sur la page, sauf dans le conteneur <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Étiqueter <meta>est universel et ajoute toute une classe de fonctionnalités, notamment, à l'aide de balises méta, comme on appelle généralement cette balise, vous pouvez modifier l'encodage de la page, ajouter des mots-clés, une description du document et bien plus encore.</p><p>
<title>Exemple de page Web
Étiqueter
Pour que le navigateur comprenne qu'il s'agit d'un encodage UTF-8 (format de transformation Unicode), et cette ligne est ajoutée.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>détermine le titre d'une page Web ; c'est l'un des éléments importants conçus pour résoudre de nombreux problèmes. Dans le système d'exploitation Windows, le texte du titre est affiché dans le coin supérieur gauche de la fenêtre du navigateur (Figure 4.2).</p>
<p>Étiqueter <title>Riz. 4.2. Vue d'en-tête dans le navigateur</p><p>est obligatoire et doit impérativement être présent dans le code du document.</head> Vous devez ajouter une balise de fermeture</p><p>pour indiquer que le cartouche du document est terminé. <body>Corps du document</p><p>
<h1>Titre</h1>
</p><p>destiné à placer des balises et le contenu d’une page Web. <h1>HTML propose six titres de texte de différents niveaux qui indiquent l'importance relative de la section suivant le titre. Oui, tague <h6>sert à indiquer le cap du sixième niveau et est le moins significatif. <h1>...<h6>Par défaut, le titre du premier niveau est affiché dans la plus grande police en gras et les titres des niveaux suivants sont plus petits. Balises</p><p>
<!-- Комментарий -->
</p><p>Faites référence aux éléments de bloc, ils commencent toujours sur une nouvelle ligne, et après eux, d'autres éléments apparaissent sur la ligne suivante. De plus, un espace blanc est ajouté avant et après le titre.</p>
<p>Certains textes peuvent être masqués et empêchés d'être affichés dans le navigateur en en faisant un commentaire.</p>
<h2>Bien que ce texte ne soit pas vu par l'utilisateur, il sera quand même transmis dans le document, donc si vous regardez le code source, vous pourrez découvrir des notes cachées.</h2>
<p>Pendant longtemps, l’option « afficher la source de la page » m’a été inutile et sans intérêt. Jusqu'à présent, apprendre le HTML sur Codecademy et concevoir mes propres sites Web ne sont pas devenus mon nouveau passe-temps. C'est là que s'est posée la question : où trouver des cas réels et emprunter des solutions intéressantes pour sa « tirelire » ? La réponse était étonnamment simple, comme toutes les choses ingénieuses : regardez le code source de la page dans Google Chrome ! Je partage avec vous mes modestes trouvailles.</p>
<p>Quel est le code source de la page</p>
<h2>Si, comme moi, vous faites tout juste vos premiers pas en programmation HTML, ce serait une bonne idée de découvrir quel est le code source d'une page.</h2>
<p>Le code source, également connu sous le nom de code de page HTML, est du texte en Hyper Text Markup Language (HTML). Il inclut le contenu réel de la page (texte, tableaux) et les balises. Ces dernières font office d'instructions pour le navigateur : comment afficher le contenu, quel type de formatage utiliser, où insérer un lien hypertexte ou un fichier média. Eh bien, pour nous, programmeurs débutants, le code source est le meilleur terrain d'entraînement : nous trouvons un site intéressant, l'espionnons, le sauvegardons et utilisons des fragments réussis. Comment?</p>
<ol><li>Comment afficher le code source sur la page du navigateur Google Chrome <b>Trouvez la page que vous aimez. Par exemple, j'étais intéressé par la conception du menu du site. Il existe trois manières d'ouvrir le code source dans le navigateur Google Chrome :</b> Cliquez sur l'icône</li>
<li>menu <b>dans le coin supérieur droit du navigateur et sélectionnez « Plus d’outils ». Entre autres, il existe une option « Afficher le code source ». Franchement, j'utilise rarement cette méthode : il y a beaucoup de mouvements inutiles. Cela peut être encore plus simple.</b> Appuyez sur la combinaison de touches</li>
<li>Ctrl+U</li>
</ol><p>– une nouvelle fenêtre avec le code source s'ouvre ;</p>
<h2>Comment modifier et enregistrer le code source</h2>
<p>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 éditer et sauvegarder le code source ?</p>
<p>Option 1. « Manuellement »</p>
<p>Après avoir ouvert le code source de la page, appelez le menu contextuel et sélectionnez l'option « Enregistrer sous » et enregistrez le fichier sur votre disque dur. Nous modifions le fichier dans le Bloc-notes ou le Bloc-notes, enregistrons les modifications et l'ouvrons via le navigateur. Les résultats de nos modifications (réussies et moins réussies) seront reflétées dans la fenêtre du navigateur.</p><p>Option 2. Pour les pros</p>
<p>Lorsque vous « jouez » avec le code source tous les jours, le processus « enregistrer - ouvrir - modifier - enregistrer - vérifier » devient fatiguant. Pour ma part, j'ai trouvé une solution sous la forme d'installer un plugin pour Google Chrome - Firebug Lite. Il vous permet de modifier et d'enregistrer le code source sans quitter la fenêtre du navigateur.</p>
<p>Nous allons donc aujourd'hui examiner plusieurs outils utiles pour les webmasters qui facilitent la vie lors de la conception d'un site Web. Commençons par la console du webmaster dans Google Chrome. Et passons en revue les questions qui se posent le plus souvent à un webmaster lors de la mise en page d’un site Web.</p>
<p>Pour accéder à la console, ouvrez votre site Web dans Google Chrome, faites un clic droit n'importe où sur la page Web et sélectionnez « Afficher le code de la page » dans le menu déroulant contextuel, ou sur un élément spécifique à étudier en sélectionnant « Afficher l'élément de code ». ".</p>
<p>En haut, vous aurez plusieurs onglets répertoriés. Aujourd'hui, nous allons parler de l'onglet « Éléments » <b>,
</b> qui présente les éléments d'une page web avec une mise en évidence des balises, des propriétés, une mise en évidence de l'imbrication des éléments, une représentation de la hiérarchie des éléments dans l'arborescence DOM (un indice en bas, du parent racine au courant), la possibilité pour éditer des éléments, une liste de leurs propriétés, pensez à effectuer une recherche par éléments, ainsi que Faisons connaissance avec la visualisation des styles CSS, etc., associés aux éléments.</p>
<h3>Comment puis-je afficher tous les styles associés à un élément spécifique ? Lequel est utilisé actuellement ? Dans quels fichiers se trouvent-ils ?</h3>
<p>Alors rien de plus simple ! Ouvrez le navigateur Google Chrome, ouvrez notre site Internet - la source des questions, faites un clic droit sur l'élément souhaité s'il est visible dans le contexte de la page, et sélectionnez « Afficher le code de l'élément » dans le menu contextuel.</p>
<p>En bas nous avons une console avec un onglet en surbrillance à gauche " Éléments" et tous les styles associés à l'élément à droite, où : <b>Styles calculés</b>– ce sont des styles généraux « résumés » qui ont été attribués à l'élément à partir des règles CSS et des paramètres du navigateur de l'utilisateur (son environnement), et en même temps l'onglet est réduit.</p>
<p>Mais nous nous intéressons à l'onglet « Styles », développé en dessous, qui liste tour à tour tous les styles attribués à l'élément, ainsi que les fichiers où ces règles sont précisées pour cet élément par son type, son identifiant, sa classe, son nom, sa propriété. , attribut, etc. De plus, si une règle CSS est barrée, cela signifie qu'elle a été redéfinie plus tôt/plus tard (ce qui permet de savoir facilement laquelle des règles CSS est prioritaire et est appliquée dans ce cas à l'élément).</p>
<p>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 des « miettes de pain ».</p>
<h3>Balise html non visible dans le contexte de la page ? Ou avez-vous besoin de rechercher toutes les balises, par exemple, par une classe, un nom, une propriété ou un type spécifique ?</h3>
<p>Ouvrez le site dans Google Chrome, faites un clic droit, appelez le menu contextuel, sélectionnez <b>«
</b> Afficher le code de la page <b>»
</b>. Appuyez en même temps sur la combinaison de touches « CTRL + F », entrez la phrase dont nous avons besoin ( <b>Par exemple</b><i>:
</i><i>classe = »</i><i>rembourrage"</i>) et parcourez la liste des résultats trouvés, en visualisant simultanément tous les styles associés aux éléments souhaités sur le côté droit de la page.</p>
<h3>Comment visualiser le code html d'un ou plusieurs éléments chargés dynamiquement (par exemple : via Ajax)</h3>
<p>Nous attendons que la page se charge dans Google Chrome. Nous effectuons les actions nécessaires au fonctionnement d'Ajax. Faites un clic droit sur les données chargées, sélectionnez « Afficher le code de l'élément » dans le menu contextuel et examinez le résultat dans la console dans l'onglet « Éléments » à gauche.</p>
<h3>Afficher les changements de style CSS en temps réel</h3>
<p>À propos, 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 d'une galerie et d'autres événements programmés. Tous les styles attribués via javascript en temps réel seront affichés dans la propriété <b>style</b>élément sélectionné dans la fenêtre de l'onglet « Éléments ».</p>
<h3>Visualisez de manière interactive l'impact des règles CSS sur la présentation des balises HTML</h3>
<p>Google Chrome fournit une console interactive pour les styles CSS. Cela signifie que vous pouvez non seulement voir quels styles sont appliqués à l'élément, mais également déplacer le curseur de la souris sur une propriété CSS spécifique, l'activer à l'aide de la case à cocher contextuelle à droite ou la désactiver en décochant l'indicateur et afficher le résultat résultant sur la page.</p>
<h3>On change la structure de présentation des éléments html à la volée (directement dans le navigateur)</h3>
<p>Ainsi, nous avons déjà appris à explorer la structure d'un document Web dans Google Chrome, nous allons maintenant examiner brièvement l'édition d'éléments à la volée. Nous allons à la console de la manière qui nous convient. On retrouve l'élément souhaité dans l'onglet « Éléments », on fait un clic droit dessus, appelant ainsi le menu contextuel contextuel :</p>
<ul><li><b>Ajouter un attribut</b>– ajoute un attribut pour l'élément spécifié. Dès que le curseur devient actif, nous commençons à définir la propriété souhaitée. <b>Par exemple</b>: écrivons name="itemImage", qui sera immédiatement ajouté à notre élément.</li>
<li><b>Modifier l'attribut</b>– si vous faites un clic droit sur un attribut d'élément, l'élément devient disponible <b>modifier</b><b>attribut</b>. Cliquez et modifiez.</li>
</ul><p><b>Exemple d'utilisation :</b> 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 le mot de passe saisi, cliquez sur « Afficher le code de l'élément » <b>,
</b> dans la console sur l'onglet de gauche <b>Éléments</b> clic droit sur l'attribut type="password", clic gauche sur <b>Modifier</b><b>attribut</b> changer l'attribut <i>tapez = "</i><i>mot de passe"</i> sur <i>tapez = "</i><i>texte"</i>, et maintenant, au lieu d'astérisques, le même mot de passe est affiché sous forme de texte.</p>
<ul><li><b>Modifier</b><b>HTML</b>– faites un clic droit sur l’élément dans la console <b>Éléments</b>, sélectionner <b>Modifier</b><b>HTML,</b> changez le code à votre guise.</li>
<li><b>Copie</b><b>comme</b><b>HTML</b>– nous copions la partie du HTML dont nous avons besoin pour des recherches plus approfondies, par exemple dans un bloc-notes, ou à d'autres fins où nous devons appliquer exactement la même mise en page. Nous gagnons du temps.</li>
<li><b>Copie</b><b>XPATH</b>– copie la représentation XPATH de la structure de la racine de l'élément parent vers l'élément sélectionné.</li>
<li><b>Supprimer</b><b>nœud</b>– 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.</li>
<li><b>Mot</b><b>envelopper</b>– affichera une vue de page Web dans le contexte de la console <b>Éléments</b> plus lisible.</li>
</ul><p>Dans les articles suivants, nous continuerons à considérer les outils pour les webmasters, et en particulier nous nous familiariserons avec les onglets restants des outils pour les webmasters dans <b>Google Chrome</b>, et envisagez également de déboguer les erreurs javascript à l'aide de différents navigateurs</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
</div>
</article>
</div>
</div>
<div id="secondary">
<aside id="search-2" class="widget widget_search clearfix">
<form action="/" class="search-form searchform clearfix" method="get">
<div class="search-wrap">
<input type="text" placeholder="Recherche" class="s field" name="s">
<button class="search-icon" type="submit"></button>
</div>
</form>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries clearfix">
<h3 class="widget-title"><span>Derniers messages</span></h3>
<ul>
<li>
<a href="https://olegshein.ru/fr/system-and-update/chto-znachit-apparat-vremenno-nedostupen-chto-znachit-telefon-abonenta/">Que signifie « le téléphone de l'abonné est temporairement indisponible » ?</a>
</li>
<li>
<a href="https://olegshein.ru/fr/the-sounds-and-music/kak-sozdat-gruppu-v-odnoklassnikah-kak-sozdat-gruppu-v-odnoklassnikah-dlya-prodvizheniya-svoego-bizn/">Comment créer un groupe à Odnoklassniki pour promouvoir votre entreprise Créer un groupe dans les intérêts d'Odnoklassniki</a>
</li>
<li>
<a href="https://olegshein.ru/fr/application/na-alekse-zakaz-zamorozhen-chto-znachit-zamorozhennyi-zakaz-na/">Commande gelée sur Aliexpress : qu'est-ce que cela signifie et comment y faire face</a>
</li>
<li>
<a href="https://olegshein.ru/fr/pots/zapros-finansovyh-dokumentov-delovye-linii-kak-napisat-pretenziyu-v/">Comment rédiger une réclamation auprès des Business Lines ?</a>
</li>
<li>
<a href="https://olegshein.ru/fr/instructions/ts-magic-player-dlya-opera-udobnoe-rasshirenie-dlya-prosmotra-torrentov-onlain/">Service MAGic Cast Désactiver et supprimer TS Magic Player</a>
</li>
<li>
<a href="https://olegshein.ru/fr/oshibki-i-devajjsov/skype-skachat-besplatno-na-russkom-yazyke-novaya-versiya-skaip-skype-skachat/">Skype téléchargement gratuit version russe Télécharger la dernière version de Skype</a>
</li>
<li>
<a href="https://olegshein.ru/fr/system-and-update/kak-udalit-stranicu-moi-mir-kak-udalit-stranicu-i-akkaunt/">Comment supprimer une page et un compte dans mon monde Comment supprimer une page sur mail</a>
</li>
<li>
<a href="https://olegshein.ru/fr/malfunction/ustanovka-i-nastroika-qt-creator-pochemu-ya-lyublyu-qt-i-vy-vse-tozhe-dolzhny/">Pourquoi j'aime Qt et vous devriez tous l'aimer aussi Programmation Qt pour les débutants</a>
</li>
</ul>
</aside>
<aside id="text-5" class="widget widget_text clearfix">
<div class="textwidget">
<script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script>
<div id="vk_groups"></div>
</div>
</aside>
<aside id="text-4" class="widget widget_text clearfix">
<div class="textwidget">
</div>
</aside>
<aside id="text-3" class="widget widget_text clearfix">
<div class="textwidget">
</div>
</aside>
</div>
</div>
</div>
<footer id="colophon" class="clearfix">
<div class="footer-socket-wrapper clearfix">
<div class="inner-wrap">
<div class="footer-socket-area">
<div class="footer-socket-right-section">
</div>
<div class="footer-socket-left-sectoin">
<div class="copyright">2024 <a href="https://olegshein.ru/fr/" title="olegshein.ru"><span>olegshein.ru</span></a>. Club informatique d'Oleg Shein. <br></div>
</div>
</div>
</div>
</div>
</footer>
<a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a>
</div>
<script type="text/javascript">
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = {
"sidebar": "colormag_right_sidebar",
"margin_top": 10,
"margin_bottom": 0,
"stop_id": "",
"screen_max_width": 0,
"screen_max_height": 0,
"width_inherit": false,
"refresh_interval": 1500,
"window_load_hook": false,
"disable_mo_api": false,
"widgets": ['text-3']
};
</script>
<script type="text/javascript">
(function(w, doc) {
if (!w.__utlWdgt) {
w.__utlWdgt = true;
var d = doc,
s = d.createElement('script'),
g = 'getElementsByTagName';
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.async = true;
s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js';
var h = d[g]('body')[0];
h.appendChild(s);
}
})(window, document);
</script>
<div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common"
data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln."
data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true"
class="uptolike-buttons"></div>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var pwebcontact_l10n = pwebcontact_l10n || {};
pwebcontact_l10n.form = {
"INIT": "Initializing form...",
"SENDING": "Sending...",
"SEND_ERR": "Wait a few seconds before sending next message",
"REQUEST_ERR": "Request error: ",
"COOKIES_ERR": "Enable cookies and refresh page to use this form"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {
"visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
"visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c",
"width": "Auto"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script>
<div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr">
<div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free">
<span class="pweb-text">Des questions ?</span>
<span class="pweb-icon"></span>
</div>
<div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr">
<div class="pwebcontact-container-outset">
<div id="pwebcontact1_container" class="pwebcontact-container">
<div class="pwebcontact-container-inset">
<form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8">
<div class="pweb-fields">
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-name pweb-field-name">
<div class="pweb-label">
<label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">Nom</label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none">
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-email pweb-field-email">
<div class="pweb-label">
<label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">E-mail <span class="pweb-asterisk">*</span> </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none">
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-textarea pweb-field-message">
<div class="pweb-label">
<label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">Message <span class="pweb-asterisk">*</span> </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-buttons">
<div class="pweb-field">
<button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Envoyer</button>
</div>
</div>
</div>
</div>
</div>
<div class="pweb-msg pweb-msg-after">
<div id="pwebcontact1_msg" class="pweb-progress">
<script type="text/javascript">
document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..."
</script>
</div>
</div>
<input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token">
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block");
new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), {
'background_color': '#000000',
'color': '#ffffff',
'max_width': 250,
'opacity': 0.95,
'position': 'center'
});
});
</script>
<script type="text/javascript">
jQuery(document).on('ready post-load', function() {
jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox');
});
jQuery(document).on('ready post-load', easy_fancybox_handler);
jQuery(document).on('ready', easy_fancybox_auto);
</script>
<div id="mistape_dialog" data-mode="comment" data-dry-run="0">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<div id="mistape_confirm_dialog" class="mistape_dialog_screen">
<div class="dialog-wrap">
<div class="dialog-wrap-top">
<h2>Signaler une faute de frappe</h2>
<div class="mistape_dialog_block">
<h3>Texte qui sera envoyé à nos rédacteurs :</h3>
<div id="mistape_reported_text"></div>
</div>
</div>
<div class="dialog-wrap-bottom">
<div class="mistape_dialog_block comment">
<h3><label for="mistape_comment">Votre commentaire (facultatif) :</label></h3>
<textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea>
</div>
<div class="pos-relative">
</div>
</div>
</div>
<div class="mistape_dialog_block">
<a class="mistape_action" data-action="send" data-id="389" role="button">Envoyer</a>
<a class="mistape_action" data-dialog-close role="button" style="display:none">Annuler</a>
</div>
<div class="mistape-letter-front letter-part">
<div class="front-left"></div>
<div class="front-right"></div>
<div class="front-bottom"></div>
</div>
<div class="mistape-letter-back letter-part">
<div class="mistape-letter-back-top"></div>
</div>
<div class="mistape-letter-top letter-part"></div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html> 