Clés pour lancer la console Yandex. Comment ouvrir la console dans le navigateur Yandex et d'autres navigateurs

De nombreuses personnes utilisent des navigateurs qui nous unissent réseau mondial Internet. Cependant, comment les pages Internet sont structurées, comment les rédiger vous-même - ces informations sont réservées à ceux qui souhaitent créer quelque chose de nouveau. Toutes ces fonctionnalités sont cachées pour les utilisateurs ordinaires, le tout pour des raisons de simplicité et d'intuitivité, mais dans cet article, nous examinerons le sujet de savoir comment ouvrir la console dans le navigateur Yandex, pourquoi elle a été créée, quelle langue elle prend en charge, et bien plus encore. . L'article est recommandé aux utilisateurs non seulement du navigateur Yandex

Pourquoi avez-vous besoin d’une console dans un navigateur ?

Il y a trois raisons de créer une console dans le navigateur :

1. Pour déboguer le navigateur lui-même au stade de la conception.
2. Former de jeunes professionnels aux fonctions d'un navigateur particulier.
3. Pour les professionnels de déboguer leurs pages Internet en temps réel.

Peu de gens le savent, mais vous pouvez rédiger votre propre site Web en utilisant seulement 2 choses : des connaissances et un bloc-notes. Cependant, cette méthode vous fait extrêmement perdre du temps, car vous devrez réenregistrer le document après chaque modification de paramètres. Une console de débogage spéciale vient à la rescousse - il s'agit d'un certain champ du navigateur qui contient absolument toutes les informations sur la page et son code source. En l'explorant, vous pouvez trouver beaucoup de choses intéressantes, y compris des erreurs de développement. Pour éviter de faire des erreurs, utilisez la console du navigateur.

Disons que vous avez créé une page Internet, mais que vous devez ajuster l'image aux dimensions requises, la sortie arrive à la console, qui a la capacité de déboguer la page en temps réel, ce qui permet d'économiser considérablement du temps et des efforts. Dans la prochaine partie de l'article, nous vous expliquerons comment ouvrir la console dans le navigateur Yandex. Ces connaissances vous aideront certainement si vous êtes un webmaster novice.

Comment ouvrir la console développeur dans Yandex

Pour ouvrir la console, vous aurez besoin d'un raccourci clavier spécial. Si vous lisez la documentation de n'importe quel navigateur, vous constaterez que l'utilisation d'une souris n'est même pas nécessaire. Il existe un nombre incroyable de raccourcis clavier qui peuvent répondre à tous vos désirs.

Instructions pour ouvrir la console dans le navigateur Yandex :

1. Lancez le navigateur depuis Yandex, puis attendez qu'il se charge complètement dans BÉLIER, cela ne prendra que quelques secondes.
2. Maintenant, ouvrez n'importe quelle page Internet, par exemple Google, mais cela n'a aucune importance, n'importe laquelle fera l'affaire.
3. Pour ouvrir les outils Yandex, appuyez sur les touches suivantes : « Ctrl + Shift + I »
4. Si vous souhaitez travailler spécifiquement avec JavaScript - il s'agit d'un langage de programmation, vous devrez alors maintenir enfoncées les touches suivantes : « Ctrl + Shift + J »

Cependant, dans différents navigateurs Il existe différentes manières d'ouvrir la console, c'est pourquoi dans le paragraphe suivant, nous passerons en revue les navigateurs les plus populaires.

Ouverture de la console dans d'autres navigateurs

Tout d’abord, cela vaut la peine d’être informé : n’essayez pas d’utiliser les mêmes combinaisons de touches sur différents navigateurs. Il y a eu de nombreux cas où des utilisateurs ont supprimé par erreur tous leurs favoris, et les récupérer peut être assez problématique, voire parfois impossible. Par conséquent, vous trouverez ci-dessous des exemples montrant comment ouvrir correctement les consoles.

1. Google Chrome. Il y a deux options : aller dans les paramètres, où il y aura un bouton pour ouvrir la console, ou appuyer sur la combinaison de touches « Ctrl + Shift + I ».
2. Opéra. Dans le menu "Outils de développement", il y aura un bouton " Code source", ou la combinaison de touches "Ctrl + U".
3. Firefox. Dans les paramètres du navigateur, soit « Ctrl + Maj + J ».
4. Safari. F12, ou allez dans « Modules complémentaires », où il y aura « Afficher le menu pour le développeur »

En conclusion

Nous espérons que cet article vous a aidé à comprendre comment ouvrir la console dans le navigateur Yandex. Ces connaissances aideront particulièrement les étudiants, les jeunes développeurs, ainsi que les utilisateurs ordinaires qui souhaitent en savoir un peu plus sur la technologie informatique, car ils sont l'avenir de notre monde.

De nombreuses personnes utilisent des navigateurs qui nous unissent à l’Internet mondial. Cependant, comment les pages Internet sont structurées, comment les écrire vous-même - ce sont des informations réservées à ceux qui souhaitent créer quelque chose de nouveau. Toutes ces fonctionnalités sont cachées pour les utilisateurs ordinaires, le tout pour des raisons de simplicité et d'intuitivité, mais dans cet article, nous examinerons le sujet de savoir comment ouvrir la console dans le navigateur Yandex, pourquoi elle a été créée, quelle langue elle prend en charge, et bien plus encore. . L'article est recommandé aux utilisateurs non seulement du navigateur Yandex

Pourquoi avez-vous besoin d’une console dans un navigateur ?

Il y a trois raisons de créer une console dans un navigateur :

Peu de gens le savent, mais vous pouvez rédiger votre propre site Web en utilisant seulement 2 choses : des connaissances et un bloc-notes. Cependant, cette méthode vous fait extrêmement perdre du temps, car vous devrez réenregistrer le document après chaque modification de paramètres. Une console de débogage spéciale vient à la rescousse - il s'agit d'un certain champ du navigateur qui contient absolument toutes les informations sur la page et son code source. En l'explorant, vous pouvez trouver beaucoup de choses intéressantes, y compris des erreurs de développement. Pour éviter de faire des erreurs, utilisez la console du navigateur.

Disons que vous avez créé une page Internet, mais que vous devez ajuster l'image aux dimensions requises, la sortie arrive à la console, qui a la capacité de déboguer la page en temps réel, ce qui permet d'économiser beaucoup de temps et d'efforts. Dans la prochaine partie de l'article, nous vous expliquerons comment ouvrir la console dans le navigateur Yandex. Ces connaissances vous aideront certainement si vous êtes un webmaster novice.

Comment ouvrir la console développeur dans Yandex

L'ouverture de la console nécessitera un raccourci clavier spécial. Si vous lisez la documentation de n'importe quel navigateur, vous constaterez que l'utilisation d'une souris n'est même pas nécessaire. Il existe un nombre incroyable de raccourcis clavier qui peuvent répondre à tous vos désirs.

Instructions pour ouvrir la console dans le navigateur Yandex :

Cependant, différents navigateurs ont différentes manières d'ouvrir la console, c'est pourquoi dans le paragraphe suivant, nous passerons en revue les navigateurs les plus populaires.

Ouverture de la console dans d'autres navigateurs

Tout d’abord, cela vaut la peine d’être informé : n’essayez pas d’utiliser les mêmes combinaisons de touches sur différents navigateurs. Il y a eu de nombreux cas où les utilisateurs ont supprimé par erreur tous leurs favoris, et les récupérer peut être assez problématique, voire parfois impossible. Par conséquent, nous donnerons ci-dessous des exemples sur la façon d'ouvrir correctement les consoles.

En conclusion

Nous espérons que cet article vous a aidé à comprendre comment ouvrir la console dans le navigateur Yandex. Ces connaissances aideront particulièrement les étudiants, les jeunes développeurs, ainsi que les utilisateurs ordinaires qui souhaitent en savoir un peu plus sur la technologie informatique, car ils sont l'avenir de notre monde.

J'ai décidé d'écrire cet article sous l'impression de certains utilisateurs qui sont administrateurs de plusieurs sites, mais n'ont aucune idée de la console du navigateur, et reçoivent donc constamment des questions comme « comment puis-je changer la couleur du bouton » ou « mes messages privés ça ne marche pas, que dois-je faire ? Et aux questions « quelles erreurs sont affichées dans la console ? ou "que renvoie le serveur ?" Ils vous invitent simplement à voir par vous-même.

Un webmaster qui ne sait pas utiliser les outils ou ne les connaît pas du tout n'est pas bon ; il devrait faire des efforts dans son développement et, entre la création du prochain chef-d'œuvre du Web, lire cet article afin de résoudre de manière indépendante les problèmes sur son site, ou du moins, fournit des informations plus complètes pour répondre aux demandes.

Je dirai tout de suite que cet article ne décrira pas toutes les fonctionnalités du panneau, mais les fonctionnalités et capacités de plusieurs onglets les plus intéressants pour un webmaster novice seront examinées en détail.

Le panneau de développement du navigateur est probablement l'outil le plus important d'un vrai webmaster, qui vous permet d'avoir une image complète de ce qui se passe lors du chargement d'une page du site et après.

Les informations obtenues à partir du panneau sont souvent suffisantes pour indiquer la cause de presque tous les problèmes sur le site ; il est pour le moins imprudent de négliger ces informations.

De nos jours, les développeurs de navigateurs n'oublient pas le panneau de développement ; il est forcément disponible dans n'importe quel format, plus ou moins ; navigateur moderne et on peut dire que sa présence est standard, vous êtes donc susceptible de le trouver dans votre navigateur, même si vous n'étiez pas au courant de son existence auparavant.

Il existe de nombreux navigateurs, il y a encore plus de nuances dans leur utilisation, mais à titre d'exemple, j'utiliserai le panneau du navigateur Chrom, mais n'ayez pas peur, le principe de son fonctionnement est le même pour presque tous les navigateurs et en comparant les fonctionnalité d'un navigateur avec un autre, vous trouverez souvent beaucoup de points communs entre leurs panneaux .

Jetons donc un coup d'œil à ce panneau.

Appuyez sur la touche F12 et le panneau du développeur apparaîtra.

Mes yeux se sont immédiatement déchaînés, je ne savais pas où regarder ni sur quoi appuyer. Allons-y dans l'ordre.

Par défaut, le premier onglet « Éléments » est ouvert.

Cet onglet affiche le code html de la page en cours.

À l'intérieur de l'onglet, vous pouvez obtenir des informations complètes non seulement sur l'emplacement des blocs html, mais également voir quels fichiers js et css sont inclus lors de leur chargement, et même vous familiariser avec le contenu de ces fichiers en cliquant simplement sur le lien correspondant. dans le code de la page.

A droite du code de la page, une colonne s'affiche avec les styles CSS et les règles en vigueur pour la page en cours ou le bloc html que vous sélectionnez.

C'est ici que commencent les miracles. L'onglet vous permet de modifier à la fois le code HTML et les règles CSS.

Sélectionnez le bloc html qui vous intéresse, sélectionnez-le et ses styles css seront affichés dans la colonne de droite. Faites un clic droit sur ce bloc et sélectionnez l'une des actions suggérées "Modifier en HTML" et vous pourrez éditer le code html de ce bloc. Vous verrez le résultat de cette édition immédiatement une fois terminée, toutes les éditions se font, pour ainsi dire, en ligne, le résultat est immédiatement affiché sur la page.

L'image est la même avec l'édition des règles CSS pour un bloc sélectionné. Vous pouvez voir quels styles s'appliquent à ce bloc dans à l'heure actuelle et, si nécessaire, ajustez-les, désactivez ceux qui sont inutiles ou vice versa - ajoutez une sorte de votre propre règle. Le résultat de ces actions sera immédiatement appliqué à l’élément.

Vous ne devriez pas penser que les modifications apportées au HTML et au CSS dans cet onglet affectent d'une manière ou d'une autre l'état réel des choses sur votre serveur et que vous modifiez réellement les fichiers HTML et CSS de votre site. Tout cela se produit uniquement dans le navigateur et vous devrez transférer vous-même toutes les modifications apportées à ces fichiers.

Si tout semble clair avec les fichiers HTML, un fichier correspond à une page, alors les styles de page peuvent être constitués de nombreux fichiers CSS et vous devez savoir exactement quels fichiers doivent être modifiés.

Nous regardons la colonne avec les styles et remarquons qu'à côté de chaque bloc de style est affiché non seulement un lien vers un fichier CSS, mais aussi une ligne où cette règle est placée à l'intérieur fichier spécifié. En utilisant ces informations, vous pouvez facilement trouver fichier requis sur le serveur et un endroit pour modifier l'intérieur de ce fichier.

Après avoir maîtrisé cet onglet, vous pourrez résoudre les problèmes liés aux petites modifications de la mise en page et de son style d'affichage. éléments individuels, ce qui vous fera gagner beaucoup de temps et de nerfs. Cet onglet doit être étudié en premier.

Passons à l'onglet suivant - "Réseau".

Cet onglet n'offre pas autant de capacités d'édition que le précédent, mais les informations qui y sont obtenues n'en sont pas moins précieuses. Ici, nous pouvons suivre toutes les demandes envoyées à notre serveur pendant le chargement de la page en cours et obtenir les réponses de notre serveur à la suite de cette demande. Peut-être que ces informations sont trop complexes pour les webmasters débutants, où pouvons-nous trouver la réponse à la question « Pourquoi n'est-elle pas envoyée lorsque j'envoie un message privé dans le chat ? ») Si vous décidez de trouver la réponse à cette question et des questions comme celle-ci vous-même, puis regardez l'onglet "Réseau" avec tous les yeux.

Les pages des sites modernes ne sont plus des blancs HTML statiques comme avant ; les scripts de page eux-mêmes peuvent constamment envoyer diverses requêtes au serveur ou lors de certaines actions de l'utilisateur, et ce sont celles-là qui nous intéresseront en premier lieu.

Regardons quelques-uns action personnalisée qui enverra une requête au serveur et recevra une réponse du serveur, par exemple en modifiant l'envoi d'un message personnel à partir d'un chat privé. Ouvrez la page de discussion, ouvrez le panneau des développeurs dans l'onglet "Réseau" et essayez d'envoyer un message dans le chat.

Immédiatement après avoir cliqué sur le bouton « Envoyer » dans l'onglet du panneau, nous pourrons observer la demande adressée au fichier du serveur, et si nous cliquons dessus, nous recevrons des informations complètes sur le fichier auquel les données ont été envoyées et de quel type. de données.

La réponse du serveur peut être reçue dans l'onglet Aperçu de cette demande. Il est très important qu'une réponse soit attendue, puis l'action effectuée par l'utilisateur sera effectuée, sinon une erreur se produira. Si cela se produit, la réponse du serveur vous informera des causes du problème.

Le serveur peut renvoyer un texte d'erreur tel que "Avertissement..." ou "Erreur fatale...", ou renvoyer un numéro d'erreur serveur, tel que 404 ou 500, ou il peut arriver que l'onglet de réponse soit vide - aucune réponse n'a été reçue. reçu. Ces informations seront très utiles pour résoudre le problème survenu dans le service d'assistance où vous le contactez, elles vous indiqueront raisons possibles son apparition et indiquera souvent clairement où creuser.

Alors n’ignorons pas cet onglet ; les informations qui en sont obtenues sont très intéressantes et utiles, du moins pour le développement général. C'est toujours utile de savoir ce qui va où et d'où ce qui vient)

Parfois, il arrive que vous semblez avoir cliqué sur le bouton d'évaluation ou envoyé un message dans un chat personnel, mais rien ne se passe, vous avez regardé dans l'onglet "Réseau" du panneau du navigateur, mais les demandes au serveur ne sont tout simplement pas envoyées, la plupart probablement, un conflit est survenu dans les scripts js du site, il est donc temps d'aller dans l'onglet "Console".

L'onglet "Console" affiche un journal des problèmes rencontrés lors du chargement de la page dans les scripts js afin de pouvoir les suivre. Il peut également afficher des erreurs survenues lors de la tentative de chargement d'un fichier manquant lors du chargement de la page en cours. Les problèmes critiques sont affichés en rouge et c'est souvent leur solution qui restaure la fonctionnalité de l'ensemble du site s'il était cassé.

Les informations de l'onglet Console sont très utiles pour un webmaster ; elles permettent de suivre immédiatement l'apparition de conflits dans les scripts lors du chargement d'une page ou d'erreurs triviales. Le texte de l'erreur informe sur son type et l'endroit où elle s'est produite, le fichier js et l'endroit dans ce fichier où l'erreur a été remarquée sont indiqués, ce qui aide à résoudre ces erreurs.

Jetez un œil à cet onglet lors du chargement des pages de votre site, qu'y verrez-vous ? Y a-t-il beaucoup de messages rouges ? Très souvent, un seul message d'erreur dans cet onglet suffit pour que tous les scripts du site cessent de fonctionner. Vous ne devez donc absolument pas négliger ces informations, et si vous remarquez des entrées dans la console, vous devez alors prendre des mesures pour identifier et résoudre les problèmes. . Idéalement, il ne devrait y avoir aucun rouge dans la console.

J'espère que maintenant, après vous être familiarisé avec les onglets répertoriés du panneau des développeurs, il vous sera plus facile de travailler avec vos sites, d'identifier et de résoudre les problèmes sans contacter des spécialistes, ou de fournir à ces spécialistes des informations plus complètes sur l'état des choses.

Les navigateurs Web disposent de bien plus de fonctionnalités que celles nécessaires à la navigation régulière sur le Web. Il existe des fonctionnalités pour faciliter la recherche d'informations, des tonnes de stockage, des outils de gestion des données et même des outils pour tester et développer des sites Web. La console du navigateur Yandex contient divers outils pour travailler avec le côté invisible des sites : code JavaScript, données et appareils connectés, cookies, cache, certificats de sécurité, etc. La console développeur est un outil extrêmement utile non seulement entre les mains d'un programmeur ; parfois même un non-spécialiste doit utiliser ce panneau.

Le panneau de développement est implémenté pour résoudre cinq tâches principales :

Les outils de développement et la console du navigateur Yandex sont des outils universels : ils contiennent tout ce dont un programmeur a besoin et bien plus encore.

Comment ouvrir la console dans le navigateur Yandex ?

Il existe plusieurs façons d'appeler la console dans le navigateur Yandex :

• Via « Paramètres du navigateur Yandex » ;
• Depuis menu contextuel pages ;
• Utilisation de raccourcis clavier.

Via le menu du navigateur

Tous les outils nécessaires sont placés dans une seule section " Outils supplémentaires" De là, nous pouvons accéder directement à la console, aux outils de développement, ou simplement ouvrir le code HTML de la page.

Comment ouvrir la console développeur dans le navigateur Yandex :

De la même manière, on peut ouvrir le code HTML après avoir cliqué sur « Afficher le code de la page », et également aller dans « Outils de développement » en cliquant sur l'élément correspondant.

Depuis le menu contextuel

C'est l'un des plus des moyens simples ouvrir rubrique obligatoire, pour l'implémenter il suffit de faire 3 clics :

Via des raccourcis clavier

Pour lancer la console dans le navigateur Yandex, nous pouvons utiliser des raccourcis clavier. Ils vous permettent d'ouvrir non seulement la console elle-même, mais également les outils de développement.

Comment allumer la console à l'aide des raccourcis clavier :

Une autre façon d'accéder au panneau souhaité est d'appuyer sur la touche F12.

Description des éléments du panneau développeur

Il est temps d'examiner de plus près tous les onglets de la console développeur et leurs fonctions. Sur description détaillée Cela prendra beaucoup de temps, nous parlerons donc brièvement du rôle de chacun d'eux.

Onglets du panneau Développeur :

• "Elements" affiche du code HTML structuré. Il maintient une structure de code précise et des règles d'imbrication. En plus du code HTML, il affiche les styles CSS pour chaque bloc ou élément. Permet de comprendre la structure, de voir les classes d'éléments et les styles qui leur sont attribués ;
  
• « Console » affiche les erreurs dans le code de la page et vous permet d'exécuter votre propre code JavaScript, qui sera instantanément traité dans le navigateur ;
  
• « Sources » est un onglet qui contient tous les fichiers avec du code JavaScript et CSS connectés à la ressource. Vous permet d'afficher à la fois le code connecté localement et les fichiers hébergés sur d'autres ressources (il peut s'agir de JQuery, de métriques Google, de Yandex et d'autres fichiers de thème, scripts) ;
  
• « Réseau » est un onglet très important, puisque nous pouvons utiliser les informations qu'il contient pour augmenter les performances du site. Cela affiche le temps nécessaire pour charger le contenu multimédia et les fichiers JS externes. Si le site utilise des images haute résolution ou si elles sont chargées à partir d'une ressource externe, le chargement du site prendra plus de temps. Cet onglet montre quel contenu provoque le ralentissement de la ressource Web ;
  
• « Performances » est une page permettant de vérifier les performances d'une ressource en détail. Après la procédure de test du site Web, des statistiques apparaissent pour chaque élément de la page avec informations complètes par vitesse de téléchargement ;
  
• « Mémoire » est similaire à l'onglet précédent, mais il affiche des informations sur le poids de la page. Nous pouvons étendre les données et étudier en détail le poids de tous les éléments de la page. Non seulement le poids des images ou du texte est pris en compte, mais aussi tous les objets, éléments HTML et CSS, etc. ;
  
• « Application » donne accès à tout le stockage : cookies, cache, stockage local, sessions, polices, scripts et plus encore. Il existe également un outil utile « Clear Storage », il est conçu pour effacer tout le stockage ;
  
• « Sécurité » offre des informations sur les certificats de sécurité et la fiabilité de la connexion ;
  
• "Audits" est un outil permettant d'auditer rapidement un site Web. A la fin des travaux, le résultat est présenté en 5 catégories : « Performance », « Progressivité de l'application Web », « Facilité d'utilisation », « Meilleure pratique» (conseils pour améliorer la page) et « SEO ».
  

Quelques points supplémentaires :

Nous savons maintenant pourquoi cela est nécessaire et comment ouvrir la console dans le navigateur Yandex, et nous nous sommes également brièvement familiarisés avec les fonctions de chaque élément des outils de développement. En utilisant pleinement cet outil de développement, il devient possible de développer un site Web mieux et plus rapidement. Utilisateurs réguliers La console est utile pour fournir des captures d'écran des dysfonctionnements du site et effacer les données temporaires.

Bonjour, chers amis. Le panneau de développement (console) du navigateur est un outil indispensable pour tout propriétaire de site Web, avec lequel vous pouvez visualiser rapidement le code html de la page et styles CSS. Et renseignez-vous également sur les erreurs survenues lors du chargement du site et vérifiez l'adaptabilité du site.

Aujourd'hui, nous envisagerons de travailler avec le code HTML, les styles CSS et l'adaptabilité dans le panneau des développeurs. Ce sont les outils nécessaires pour résoudre la plupart des problèmes.

Pour une compréhension générale de l'image, donnons un exemple dans lequel vous pourriez avoir besoin du panneau de développement.

Disons que vous êtes venu sur mon blog et que vous étiez intéressé par la police que j'utilise ou la couleur, etc. En général, il peut s'agir de n'importe quel élément du site. Et vous vouliez faire la même chose sur votre site Web.

Ensuite, vous parcourez le panneau de développement du navigateur jusqu'à l'élément souhaité, où vous pouvez voir le code html et les styles CSS correspondants.

Une autre option pour utiliser le panneau est lorsque vous souhaitez faire quelque chose sur le site, mais que vous ne savez pas encore à quoi cela ressemblera.

Dans ce cas, vous pouvez également utiliser le panneau des développeurs et voir à quoi ressemblera votre idée dans le navigateur. Après tout, tout ce que vous faites dans le panneau des développeurs n'est visible que par vous. Et pour que les visiteurs puissent voir vos expériences, vous devrez transférer des styles et des codes vers les fichiers du site.

Ouvrir le panneau des webmasters et se familiariser avec l'interface

Le panneau des développeurs est présent dans tous les navigateurs modernes. Pour l'ouvrir, vous devez appuyer sur la touche F12 de votre clavier.

L'interface du panneau diffère selon les navigateurs, mais les principes de fonctionnement sont similaires.

Je préfère le panneau du navigateur Firefox.

Le panneau lui-même est divisé en deux moitiés et contient des onglets et des outils de travail.

Dans le panneau, vous pouvez visualiser le code HTML de la page et le modifier directement ici. Pour cela, sélectionnez l'élément souhaité et appuyez sur bouton droit souris et sélectionnez dans le menu "Modifier commeHTML (ModifiercommeHTML)".

Pour travailler avec des styles, vous devez accéder à la section du panneau CSS, où vous pouvez ajouter des styles ou désactiver ceux existants en décochant la case à côté d'eux. Tout peut être changé.

Ici vous pouvez savoir dans quel fichier se trouvent les styles et sur quelle ligne.

Comment analyser un élément HTML sur un site Web et connaître ses styles CSS

Regardons mon exemple, qui se trouve dans chaque article.

Afin d'analyser l'élément souhaité, vous devez faire un clic droit dessus et sélectionner l'élément de menu .

Le principe du travail avec le code dans le panneau est que vous devez sélectionner le code HTML dans la fenêtre de gauche, et dans la fenêtre de droite, il y aura des styles pour cet élément.

Et si tout est assez simple avec les styles, alors lorsque vous travaillez avec du code HTML, vous devez comprendre son intégrité. Autrement dit, chaque élément possède des balises dans lesquelles il se trouve. Il peut s'agir de paragraphes, de liens, d'images, etc. Le plus souvent, ce sont des blocs DIV qui ont une balise d'ouverture < div> et fermeture div>. Et tout cela est clairement visible sur le panneau.

Lors de la copie ou de l’édition, il est important de comprendre où commence et où il se termine un bloc. Faire la moindre erreur ici peut perturber toute la mise en page du modèle.

Dans le tutoriel vidéo, j'entrerai dans le détail sur ce point. Et si vous souhaitez maîtriser rapidement les connaissances de base du html et du css, je vous conseille d'aller sur la page "Gratuitement" et téléchargez les cours d'Evgeniy Popov.

Comment copier le code HTML du panneau vers les fichiers du site

Il peut y avoir de nombreuses idées pour utiliser le panneau de développement. Après expérimentation dans le panel, le résultat doit être transféré dans les fichiers du site. Et il y a ici une certaine difficulté. Le fait est que le panneau affiche du code HTML et que la plupart des sites modernes, y compris ceux de la plateforme WordPress, sont créés à l'aide du langage de programmation PHP. Et c'est comme le ciel et la terre.

Regardons donc un exemple de copie d'une bannière de mon blog et de son transfert vers un autre site.

Pour ce faire, vous devez ouvrir le panneau du développeur en examinant l'élément souhaité. Après avoir déterminé le début du bloc DIV, appuyez sur le bouton droit du guidon et sélectionnez l'élément de menu "Copier externeHTML"

Le code a été copié dans le presse-papiers et vous devez maintenant le coller à l'endroit où vous souhaitez voir cette bannière.

Ce processus est assez difficile à décrire, je suggère donc de regarder un didacticiel vidéo dans lequel tout est expliqué et montré en détail.

Comment transférer des styles du panneau de développement vers les fichiers du site

Une fois que vous avez décidé du code et des styles, vous pouvez commencer à les transférer vers les fichiers du site. Puisque pour l'instant toutes ces modifications ne sont visibles que par vous dans le navigateur, et si vous actualisez la page, toutes les modifications disparaîtront.

, pour moi c'est plus pratique. Puisque lorsque vous travaillez dans Notepad++, il y a une mise en évidence du code et une numérotation des lignes. Et cela est très utile lorsque vous n’avez pas seulement besoin de copier des styles, mais aussi d’apporter des modifications à ceux existants. Ces styles sont faciles à trouver par numéro de ligne.

Comment vérifier la réactivité du modèle dans le panneau du développeur

Pour passer le panneau en mode adaptatif, vous devez appuyer sur la combinaison de touches CTRL+SHIFT+M ou sur le bouton du panneau développeur, qui se trouve différemment selon les navigateurs.

Conclusion

Dans cet article, je n'ai pas regardé tous les outils du panel développeur, mais uniquement ceux qui peuvent être utiles et qui sont le plus souvent utilisés par de nombreux webmasters.

L'utilisation du panel et les compétences nécessaires pour travailler avec le code et les styles sont indispensables lorsque l'on travaille avec des sites Web et des programmes d'affiliation.

Mettez l'outil en service, il vous sera utile encore de nombreuses fois.

Si vous avez des questions, je me ferai un plaisir d'y répondre dans les commentaires.

Mes amis, je vous souhaite du succès. Rendez-vous dans de nouveaux articles.

Cordialement, Maxim Zaitsev.