Chaque navigateur Web moderne comprend une puissante suite d'outils de développement. Ces outils font toute une série de choses, allant de l'inspection des fichiers HTML, CSS et JavaScript actuellement chargés à l'affichage des ressources demandées par la page et du temps de chargement. Cet article explique comment utiliser les fonctions de base des outils de développement de votre navigateur.

Note: Avant de parcourir les exemples ci-dessous, ouvrez le site d'exemple pour débutants que nous avons créé lors de la série d'articles Premiers pas avec le Web. Vous devriez l'avoir ouvert lorsque vous suivez les étapes ci-dessous.

Comment ouvrir les outils de développement dans votre navigateur

Les outils de développement se trouvent dans votre navigateur dans une sous-fenêtre qui ressemble à peu près à ceci, selon le navigateur que vous utilisez :

Comment le remontez-vous ? Trois façons:

L'Inspecteur : explorateur DOM et éditeur CSS

Les outils de développement s'ouvrent généralement par défaut sur l'inspecteur, qui ressemble à la capture d'écran suivante. Cet outil montre à quoi ressemble le code HTML de votre page au moment de l'exécution, ainsi que le CSS appliqué à chaque élément de la page. Il vous permet également de modifier instantanément le HTML et le CSS et de voir les résultats de vos modifications reflétés en direct dans la fenêtre du navigateur.

Si tu ne le faites pas voir l'inspecteur,

• Appuyez/cliquez sur le Inspecteur languette.
• Dans Internet Explorer, appuyez/cliquez sur Explorateur DOM ou appuyez sur Ctrl + 1 .
• Dans Microsoft Edge ou Opera, appuyez/cliquez sur Éléments.
• Dans Safari, les commandes ne sont pas si clairement présenté, mais vous devriez voir le code HTML si vous n'avez pas sélectionné autre chose à afficher dans la fenêtre. Appuyez sur le bouton Style bouton pour voir le CSS.

Explorer l'inspecteur DOM

Pour commencer, cliquez avec le bouton droit (Ctrl-clic) sur un élément HTML dans l'inspecteur DOM et regardez le menu contextuel. Les options de menu disponibles varient selon les navigateurs, mais les plus importantes sont pour la plupart les mêmes :

• Supprimer le nœud(parfois Supprimer l'élément). Supprime l'élément actuel.
• Modifier en HTML(parfois Ajouter un attribut/Éditer le texte). Vous permet de modifier le code HTML et de voir les résultats à la volée. Très utile pour le débogage et les tests.
• :hover/:actif/:focus. Force l'activation des états des éléments afin que vous puissiez voir à quoi ressemblerait leur style.
• Copier/Copier au format HTML. Copiez le code HTML actuellement sélectionné.
• Certains navigateurs ont également Copier le chemin CSS et Copier XPath disponible, pour vous permettre de copier le sélecteur CSS ou l'expression XPath qui sélectionnerait l'élément HTML actuel.

Essayez de modifier une partie de votre DOM maintenant. Double-cliquez sur un élément ou cliquez dessus avec le bouton droit et choisissez Modifier en HTML dans le menu contextuel. Vous pouvez apporter toutes les modifications que vous souhaitez, mais vous ne pouvez pas enregistrer vos modifications.

Explorer l'éditeur CSS

Par défaut, l'éditeur CSS affiche les règles CSS appliquées à l'élément actuellement sélectionné :

Ces fonctionnalités sont particulièrement pratiques :

• Les règles appliquées à l'élément actuel sont affichées du plus au moins spécifique.
• Cochez les cases à côté de chaque déclaration pour voir ce qui se passerait si vous supprimiez la déclaration.
• Cliquez sur la petite flèche à côté de chaque propriété abrégée pour afficher les équivalents longs de la propriété.
• Cliquez sur le nom ou la valeur d'une propriété pour afficher une zone de texte dans laquelle vous pouvez saisir une nouvelle valeur pour obtenir un aperçu en direct d'un changement de style.
• À côté de chaque règle se trouvent le nom du fichier et le numéro de ligne dans lesquels la règle est définie. En cliquant sur cette règle, les outils de développement sautent pour l'afficher dans sa propre vue, où elle peut généralement être modifiée et enregistrée.
• Vous pouvez également cliquer sur l'accolade fermante de n'importe quelle règle pour faire apparaître une zone de texte sur une nouvelle ligne, où vous pouvez écrire une toute nouvelle déclaration pour votre page.

Vous remarquerez un certain nombre d'onglets cliquables en haut de la visionneuse CSS :

• Calculé: Ceci affiche les styles calculés pour l'élément actuellement sélectionné (les valeurs finales normalisées appliquées par le navigateur).
• Mise en page: Dans Firefox, cette zone comprend deux sections :
  • Modèle de boîte: représente visuellement le modèle de boîte de l'élément actuel, afin que vous puissiez voir en un coup d'œil le remplissage, la bordure et la marge qui lui sont appliqués, ainsi que la taille de son contenu.
  • Grille: Si la page que vous inspectez utilise CSS Grid, cette section vous permet d'afficher les détails de la grille.
• Polices: Dans Firefox, le Polices L'onglet affiche les polices appliquées à l'élément actuel.

En savoir plus

Apprenez-en davantage sur l’Inspector dans différents navigateurs :

• Inspecteur Chrome DOM

Le débogueur JavaScript

Le débogueur JavaScript vous permet de surveiller la valeur des variables et de définir des points d'arrêt, des endroits dans votre code où vous souhaitez suspendre l'exécution et d'identifier les problèmes qui empêchent votre code de s'exécuter correctement.

Pour accéder au débogueur :

Firefox: Sélectionnez ➤ Développeur web ➤ Débogueur ou appuyez sur Ctrl + Shift + S pour ouvrir le débogueur JavaScript. Si les outils sont déjà affichés, cliquez sur l'icône Débogueur languette.

Chrome: ouvrez les outils de développement puis sélectionnez le Sources languette. (L'opéra fonctionne de la même manière.)

Bord et Internet Explorer 11: Appuyez sur F12 puis, Ctrl + 3 , ou si les outils sont déjà affichés, cliquez sur l'onglet Débogueur.

Safari: ouvrez les outils de développement, puis sélectionnez l'onglet Débogueur.

Explorer le débogueur

Il y a trois volets dans le débogueur JavaScript sur Firefox.

Liste de fichiers

Le premier volet de gauche contient la liste des fichiers associés avec le page que vous déboguez. Sélectionnez le fichier avec lequel vous souhaitez travailler dans cette liste. Cliquez sur un fichier pour le sélectionner et afficher son contenu dans le volet central du débogueur.

Code source

Définissez les points d'arrêt où vous souhaitez suspendre l'exécution. Dans l'image suivante, la surbrillance du numéro 18 montre que la ligne a un point d'arrêt défini.

Regarder les expressions et les points d'arrêt

Le volet de droite affiche une liste des expressions de surveillance que vous avez ajoutées et des points d'arrêt que vous avez définis.

Dans l'image, la première section, Regarder les expressions, montre que la variable listItems a été ajoutée. Vous pouvez développer la liste pour afficher les valeurs du tableau.

La rubrique suivante Points d'arrêt, répertorie les points d'arrêt définis sur la page. Dans example.js, un point d'arrêt a été défini sur l'instruction listItems.push(inputNewItem.value);

Les deux dernières sections n'apparaissent que lorsque le code est en cours d'exécution.

Le Pile d'appels La section vous montre quel code a été exécuté pour accéder à la ligne actuelle. Vous pouvez voir que le code se trouve dans la fonction qui gère un clic de souris et que le code est actuellement en pause sur le point d'arrêt.

La dernière partie Portées, montre quelles valeurs sont visibles à partir de différents points de votre code. Par exemple, dans l'image ci-dessous, vous pouvez voir les objets disponibles pour le code dans la fonction addItemClick.

En savoir plus

Découvrez le débogueur JavaScript dans différents navigateurs :

La console Javascript

La console JavaScript est un outil incroyablement utile pour déboguer JavaScript qui ne fonctionne pas comme prévu. Elle vous permet d'exécuter des lignes de JavaScript sur la page actuellement chargée dans le navigateur et signale les erreurs rencontrées lorsque le navigateur tente d'exécuter votre code. Pour accéder à la console dans n'importe quel navigateur :

Si les outils de développement sont déjà ouverts, cliquez ou appuyez sur l'onglet Console.

Sinon, Firefox permet d'ouvrir la console directement en utilisant Ctrl + Shift + K ou en utilisant la commande de menu : Menu ➤ Développeur Web➤Console Web, ou Outils ➤ Développeur Web ➤ Console Web. Sur un autre navigateur, ouvrez les outils de développement, puis cliquez sur l'onglet Console.

Cela vous donnera une fenêtre comme celle-ci :

Pour voir ce qui se passe, essayez de saisir les extraits de code suivants dans la console un par un (puis d'appuyer sur Entrée) :

1. alert("Bonjour !");
2. document.querySelector("html").style.backgroundColor = "violet";
3. var monImage = document.createElement("img"); myImage.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(monImage);

Essayez maintenant de saisir les versions incorrectes suivantes du code et voyez ce que vous obtenez.

1. alerte("Bonjour !);
2. document.cheeseSelector("html").style.backgroundColor = "violet";
3. var monImage = document.createElement("img"); myBanana.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(monImage);

Vous commencerez à voir le type d'erreurs renvoyées par le navigateur. Souvent, ces erreurs sont assez énigmatiques, mais il devrait être assez simple de comprendre ces problèmes !

En savoir plus

En savoir plus sur la console JavaScript dans différents navigateurs :

• Console JavaScript Chrome (l'inspecteur d'Opera fonctionne de la même manière)

Les gens utilisent un navigateur non seulement pour afficher des pages sur des sites Web, mais également pour en créer de nouvelles. Le mode développeur dans le navigateur Yandex (et tout autre) permet à l'utilisateur d'accéder aux outils nécessaires à la programmation Web.

Lisez l'article et vous découvrirez pourquoi ce mode est nécessaire et comment la console développeur est activée dans ce navigateur Web.

A quoi sert le mode développeur ?

Les outils de développement sont des modules spéciaux créés et utilisés par des webmasters tiers pour différentes tâches. Initialement dans Navigateur Yandex Plusieurs plugins sont déjà installés qui peuvent vous aider à effectuer des tâches de développement Web de base.

La Developer Console propose un certain nombre d'options pour personnaliser et tester les pages en temps réel. Parmi eux:

• Visualisez le code HTML de la page.
• Surveiller la progression de toutes les actions effectuées par les utilisateurs sur un site Web spécifique.
• Inspection des fichiers journaux, qui contiennent des références à des erreurs survenues lors du fonctionnement des scripts, etc.

Il est peu probable que les utilisateurs ordinaires qui n'ont pas besoin de tester, de créer et de vérifier les erreurs des pages du site Web aient besoin du service « outils de développement ». Mais les webmasters peuvent en avoir besoin, par exemple, pour déboguer une page, ajuster une image à une certaine taille, etc.

Un utilisateur moyen peut avoir besoin d'une boîte à outils de développement, par exemple s'il a aimé une police ou une couleur sur une page particulière et souhaite connaître son nom. Tout élément peut être visualisé en ouvrant le code html et les styles css utilisés sur cette page. Ensuite, vous pouvez copier les données nécessaires (par exemple, le style et le code du bouton) et les coller dans votre site.

Activation des modes

Comment activer le mode développeur ? L'interface avec les outils est activée de plusieurs manières. Tout d'abord, ouvrez le navigateur Yandex sur n'importe quelle page.

La première façon est d'ouvrir la console avec les outils :

1. Dans le coin supérieur droit du navigateur Web, cliquez sur l'icône « paramètres » (avec trois bandes horizontales).
2. Dans la liste qui s'ouvre, sélectionnez l'élément « avancé ».
3. Ensuite, cliquez sur « Plus d'outils ».
4. Sélectionnez le bon outil.

La deuxième méthode s'adresse à ceux qui ne souhaitent pas ouvrir la console avec la souris. Pour ce faire, vous pouvez utiliser des touches de raccourci pour activer l'outil requis, avec n'importe quelle disposition de clavier et que la touche "" ait été enfoncée ou non. Verrouillage des majuscules»:

• Ctrl+U (pour le clavier russe – la lettre « G ») – pour afficher le code de la page (« Afficher le code de la page »). Pour apporter des modifications, cliquez sur le bouton « Modifier ».
• Ctrl+Shift+J (« O ») – pour ouvrir la console Java (« console JavaScript »). Les outils s'ouvrent après avoir cliqué sur l'onglet « Console ».
• Ctrl+Shift+I (Ш) – pour sélectionner les outils de développement (« Outils de développement »).

Les outils de développement peuvent être ouverts avec une seule touche – « F12 ». Ensuite, cliquez sur le même onglet « Console ». Sur Système Mac Les outils de développement sont activés en appuyant sur Cmd" ⌘, "Option" ⌥ et "I".

Les développeurs d'extensions peuvent également utiliser la console. Pour ce faire, vous avez besoin de :

1. Ouvrez le navigateur Yandex.
2. Collez le lien navigateur://extensions/ dans la barre d'adresse (la même méthode fonctionne dans Chrome).
3. Suis le.

Vous serez dirigé ici :

Cochez la case en haut où il est écrit « Mode développeur ». Après cela, l'utilisateur a le choix de quoi faire avec les extensions :

• Pour mettre à jour les extensions installées dans le navigateur, cliquez sur « mettre à jour les extensions ».
• Si vous avez besoin de le tester, sélectionnez l'option « Charger l'extension décompressée », puis cliquez sur le fichier souhaité.

Pour activer les extensions, vous devez vous rendre dans la section « Modules complémentaires ». Ici, vous verrez une liste de toutes les extensions installées dans les navigateurs. Certains d’entre eux peuvent être actifs, tandis que d’autres peuvent être désactivés. Vous pouvez lancer et désactiver des extensions à l'aide de commutateurs spéciaux.

Ainsi, sachant ouvrir le mode développeur, un spécialiste peut accélérer considérablement le travail sur les pages d'un site Web.

Google Chrome est actuellement l'un des navigateurs Web les plus populaires utilisés par les développeurs. Chrome DevTools peut considérablement améliorer votre flux de travail en vous aidant à développer, tester et déboguer vos sites directement dans votre navigateur. Beaucoup d'entre vous utilisent probablement Chrome DevTools régulièrement, mais consultez ces trucs et astuces supplémentaires pour améliorer votre productivité de manière exponentielle.

Raccourcis clavier Chrome Devtools et autres utilitaires de développement de Google :

Que sont les DevTools de Google Chrome ?

Outils Développeur Google Chrome, également connu sous le nom de Chrome DevTools, sont des outils permettant de créer et de déboguer des sites Web intégrés directement au navigateur. Ils offrent aux développeurs plus accès profondà leurs applications Web et à leur navigateur. Vous pouvez tout faire, du test de votre fenêtre d'affichage sur un appareil mobile à la modification HTML/CSS à la volée, et même à l'utiliser pour mesurer les performances des éléments individuels de votre site.

Pour utiliser la dernière version des outils de développement, vous devrez utiliser Google Chrome Canari, qui est expérimental Version Chrome. Canary peut être exécuté à côté de Chrome afin que vous puissiez vérifier tout problème pouvant survenir.

Vous pouvez améliorer votre développement en utilisant chrome://drapeaux permettant des fonctionnalités expérimentales dans les outils de développement. Vous pouvez ensuite utiliser le panneau de paramètres dans les outils de développement pour basculer entre les expériences individuelles.

Pour activer les fonctions expérimentales du panneau de développement, activez cet élément :

Ouverture des outils de développement Chrome

Il existe plusieurs façons d'ouvrir Chrome DevTools.

1. Ouvrez le menu de votre navigateur

Vous pouvez ouvrir Chrome DevTools à partir du menu Chrome, cliquer sur Plus d'outils, puis sur Outils de développement.

2. Ouvrir en cliquant avec le bouton droit

Vous pouvez également cliquer avec le bouton droit sur n'importe quel élément de la page Web et cliquer sur Afficher le code, ce qui lancera Chrome DevTools.

3. Ouvrir à l'aide des touches de raccourci

Vous pouvez également utiliser les raccourcis clavier suivants :

• Les fenêtres: F12 ou Ctrl + Maj + I
• Mac: Cmd + Opt + I

Vous trouverez ci-dessous quelques-unes des centaines de choses que vous pouvez faire avec Chrome DevTools. Cela constitue également une bonne introduction aux outils si vous ne les avez jamais utilisés auparavant. Note. Nous utilisons Google Canary pour tous ces exemples car il existe des fonctionnalités plus récentes telles que palettes de conception matérielle et des données chronologiques agrégées.

Changement de fichier rapide

Vous pouvez facilement accéder à n'importe quel fichier du projet ou de la page Web en cours en appuyant sur Ctrl + P (Cmd + P) lorsque Chrome DevTools est ouvert et en recherchant le nom.

JolieImpression()

Saviez-vous que Chrome DevTools propose un superbe formatage pour les styles compressés et les scripts Java compressés ? Vous pouvez facilement modifier le formatage du code que vous entrez en appuyant sur (), ce qui reviendra à l'apparence normale du code compressé réel.

Modification d'un élément HTML

Vous pouvez modifier le HTML à la volée en affichant les modifications de l'aperçu en sélectionnant n'importe quel élément, en sélectionnant un élément DOM à l'intérieur du panneau et en double-cliquant sur la balise d'ouverture pour la modifier. Les balises de fermeture seront automatiquement mises à jour pour vous. Toutes les modifications apparaîtront dans votre navigateur comme si les modifications avaient été apportées au code source.

Modifier les propriétés CSS

Tout comme la modification du HTML, vous pouvez également modifier le CSS dans Chrome DevTools et prévisualiser à quoi ressemblera le résultat. C’est probablement l’une des utilisations les plus courantes de cet outil. Sélectionnez simplement l'élément que vous souhaitez modifier et sous le panneau de style, vous pouvez ajouter/modifier n'importe quel élément. Propriété CSS ce que vous voulez.

Rechercher dans le code source

Vous pouvez rechercher rapidement votre code source en appuyant sur Ctrl + Shift + F (Cmd + Opt + F).

Vous pouvez également effectuer une recherche à l'aide des sélecteurs CSS en appuyant sur Ctrl + F (Cmd + F

Points d'arrêt Javascript

Lors du débogage Javascript, il est parfois utile de définir des points d'arrêt. Vous pouvez définir des points d'arrêt dans Chrome DevTools en cliquant sur le numéro de ligne que vous souhaitez rompre et en appuyant sur Ctrl+R(Cmd+R) pour actualiser la page. La page s'exécutera alors directement jusqu'à ce point d'arrêt.

Aller au numéro de ligne

Vous pouvez accéder automatiquement à une ligne de votre code en appuyant sur Ctrl + O (Cmd + O) et en utilisant la syntaxe de ligne. Dans l'exemple ci-dessous, nous avons tapé : 200 : 10 et appuyé sur Entrée pour accéder à la ligne 200 de la colonne 10.

Plusieurs curseurs

Avez-vous plusieurs lignes à ajouter ? Peut-être souhaitez-vous ajouter une taille de police à plusieurs classes. Vous pouvez facilement ajouter plusieurs curseurs en appuyant sur Ctrl + Clic (Cmd + Clic) et en saisissant des informations sur plusieurs lignes en même temps. C'est une astuce très pratique.

Modification de la position du Dock DevTools

Vous pouvez également modifier la position du dock Chrome DevTools. Vous avez le choix entre trois options : inférieure, latérale et non ancrée (flottant). Pour basculer entre les positions du dock, vous pouvez appuyer sur Ctrl + Shift + D (Cmd + Shift + D). Ensuite, dans le coin supérieur droit, sélectionnez la position dans laquelle la station d'accueil doit être située.

Effacement des cookies

Vous pouvez également nettoyer facilement biscuits Avec en utilisant Chrome Outils de développement. Cela peut être particulièrement utile lors du test et du débogage de plugins tiers. Allez simplement dans l’onglet Ressources et sous la section Cookies, vous pouvez cliquer avec le bouton droit et supprimer tous les cookies stockés dans votre navigateur.

Mode appareil

Vous pouvez tester votre site Web et vos requêtes multimédias pour vous assurer que la mise en page réactive fonctionne en passant en mode appareil. Ou peut-être avez-vous besoin de voir à quelle résolution d'écran une page est affichée afin de savoir où appliquer les requêtes multimédias. Pour accéder au mode Appareil, cliquez sur la petite icône de téléphone dans Chrome DevTools ou vous pouvez appuyer sur Ctrl + Maj + M (Cmd + Maj + M). Vous pouvez ensuite choisir le périphérique que vous souhaitez émuler, l'orientation et même la résolution. Vous pouvez également modifier la limitation du réseau pour voir comment votre site Web s'affichera sur une connexion 2G classique.

Palettes de couleurs personnalisées et sélection de couleurs

Changer le format de couleur

Vous pouvez basculer entre les formats RGBA, HSL et Hex en faisant Maj+Clic sur un bloc de couleur.

Capteurs d’émulation d’appareil

Une fonctionnalité intéressante de Chrome DevTools est que vous pouvez même simuler des écrans tactiles. Pour ce faire, cliquez sur Console, Émulation et Capteurs.

Basculer l'état de l'élément

Avez-vous déjà essayé de comprendre d'où vient un style caché, par exemple : l'attribut de survol ? Dans Firefox, les outils de développement vous permettent de voir cela lors de la sélection d'un élément, mais pas dans Chrome DevTools. Cependant, Chrome DevTools a quelque chose de mieux appelé basculer l'état des éléments. Cela permet de forcer l'état d'un élément :

Copier l'image en tant que données URI (encodées en base64)

Vous pouvez enregistrer n'importe quelle image d'une page Web en tant qu'URI de données ou plutôt l'encoder en base64. Pas besoin d'utiliser convertisseur en ligne gratuit, puisqu'il est déjà intégré à Chrome DevTools. Pour ce faire, cliquez simplement sur le panneau Réseau, cliquez sur l'image, puis cliquez dessus avec le bouton droit et sélectionnez Copier l'image en tant qu'URL de données.

Vous recevrez ensuite une image au format suivant : "URURIsdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAFt..."

Afficher l'agent utilisateur Shadow DOM

Lorsque vous traitez des éléments tels que des boutons et des entrées, le navigateur Web crée généralement attributs cachés. Pour voir ces clics dans les paramètres, appuyez sur F1 (?), vous pouvez activer "Afficher l'agent utilisateur DOM". Comme vous pouvez le voir dans cet exemple, nous pouvons maintenant voir que la racine fantôme # en cours de construction est en cours de construction. Vous pouvez même aller plus loin et appliquer des styles CSS aux attributs cachés.

Sélectionnez le prochain incident (viya)

Chrome DevTools facilite la sélection de l'occurrence suivante, puis l'application simultanée des modifications dans toutes les sections. Pour ce faire, double-cliquez simplement sur ce que vous souhaitez modifier, puis appuyez sur Ctrl + D (Cmd + D) pour chaque événement que vous souhaitez sélectionner, puis lorsque vous le saisissez, modifiez-les tous en même temps.

Espaces de travail – connexion de fichiers locaux au projet

Les espaces de travail sont une fonctionnalité très puissante de Chrome DevTools. Par défaut, lorsque vous modifiez des éléments dans les outils de développement, ils disparaissent après l'actualisation de la page. C'est idéal pour de petits ajustements ici et là, mais les espaces de travail vous permettent en fait d'enregistrer ces modifications en les enregistrant sur votre disque.

Pour ce faire, cliquez avec le bouton droit sur le dossier et sélectionnez « Ajouter un dossier à l'espace de travail local ». Ensuite, pour le rendre permanent, cliquez avec le bouton droit sur le fichier et sélectionnez « Mapper à la ressource du système de fichiers... ».

Pellicule réseau

La fonction de pellicule en ligne vous permet de voir comment votre page est rendue du début à la fin, en capturant des captures d'écran au fur et à mesure de son chargement. Il pourrait être très bon moyen voyez comment votre police est rendue et si vous rencontrez des problèmes tels que

Pour l'exécuter, cliquez sur le panneau Chronologie et appuyez sur Ctrl + R (Cmd + R) pour actualiser la page. Vous pouvez ensuite cliquer sur le panneau Résumé dans le panneau Agrégé.

DOMContentLoaded

Dans les outils de développement, vous pouvez voir exactement le temps DOMContentLoaded et le temps de chargement total. Pour l'exécuter, cliquez sur le panneau Réseau, cliquez sur Afficher l'aperçu et appuyez sur Ctrl + R (Cmd + R) pour actualiser la page. Une ligne bleue apparaîtra pour DOMContentLoaded ainsi qu'une ligne rouge pour le temps de chargement total. En règle générale, tout ce qui reste ou touche la ligne bleue sont des actifs qui bloquent le DOM ou sont appelés actifs bloquant le rendu.

Validation HTML Google AMP

Utiliser les outils de développement Firefox dans Google Chrome

Saviez-vous que vous pouvez exécuter les outils de développement Firefox dans Google Chrome ? Valence est un ajout expérimental de l'équipe Firefox qui permet aux outils de développement Firefox de déboguer une plus large gamme de navigateurs. Valence nécessite Chrome 37.0 ou version ultérieure.

Comment utiliser le panneau de développement dans le navigateur pour travailler avec le code du site 9. Comment activer le mode développeur dans Chrome

Panneau de développement dans le navigateur pour travailler avec du code

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 et les styles CSS de la page. 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 chaque navigateur moderne. 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 ce faire, sélectionnez l'élément souhaité, faites un clic droit et sélectionnez « Modifier en HTML » dans le menu.

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 un exemple sur mon formulaire d'abonnement, qui se trouve dans chaque article.

Afin d'analyser l'élément souhaité, vous devez cliquer dessus avec le bouton droit et sélectionner l'élément de menu « Examiner l'élément ».

Tout 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 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

. 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 « Gratuit » et de télécharger 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 la plupart des sites modernes, y compris ceux de la plateforme WordPress, sont créés en utilisant le langage 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 le HTML externe »

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.

Puis ouvrez dans un nouvel onglet panneau administratif site - "Apparence" - "Éditeur" - un fichier responsable des styles. Il s'agit généralement de style.css.

Je préfère faire toutes ces manipulations via une connexion ftp, 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 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.

1zaicev.ru

Mode développeur dans le navigateur Yandex : comment l'activer, pourquoi il est nécessaire

Les gens utilisent un navigateur non seulement pour afficher des pages sur des sites Web, mais également pour en créer de nouvelles. Le mode développeur dans le navigateur Yandex (et tout autre) permet à l'utilisateur d'accéder aux outils nécessaires à la programmation Web.

Lisez l'article et vous découvrirez pourquoi ce mode est nécessaire et comment la console développeur est activée dans ce navigateur Web.

A quoi sert le mode développeur ?

Les outils de développement sont des modules spéciaux créés et utilisés par des webmasters tiers pour diverses tâches. Initialement, le navigateur Yandex dispose déjà de plusieurs plugins installés, avec lesquels vous pouvez effectuer des tâches de développement Web de base.

La Developer Console propose un certain nombre d'options pour personnaliser et tester les pages en temps réel. Parmi eux:

• Visualisez le code HTML de la page.
• Surveiller la progression de toutes les actions effectuées par les utilisateurs sur un site Web spécifique.
• Inspection des fichiers journaux, qui contiennent des références à des erreurs survenues lors du fonctionnement des scripts, etc.

Il est peu probable que les utilisateurs ordinaires qui n'ont pas besoin de tester, de créer et de vérifier les erreurs des pages du site Web aient besoin du service « outils de développement ». Mais les webmasters peuvent en avoir besoin, par exemple, pour déboguer une page, ajuster une image à une certaine taille, etc.

Un utilisateur moyen peut avoir besoin d'une boîte à outils de développement, par exemple s'il a aimé une police ou une couleur sur une page particulière et souhaite connaître son nom. Tout élément peut être visualisé en ouvrant le code html et les styles css utilisés sur cette page. Ensuite, vous pouvez copier les données nécessaires (par exemple, le style et le code du bouton) et les coller dans votre site.

Activation des modes

Comment activer le mode développeur ? L'interface avec les outils est activée de plusieurs manières. Tout d'abord, ouvrez le navigateur Yandex sur n'importe quelle page.

La première façon est d'ouvrir la console avec les outils :

1. Dans le coin supérieur droit du navigateur Web, cliquez sur l'icône « paramètres » (avec trois bandes horizontales).
2. Dans la liste qui s'ouvre, sélectionnez l'élément « avancé ».
3. Ensuite, cliquez sur « Plus d'outils ».
4. Sélectionnez le bon outil.

La deuxième méthode s'adresse à ceux qui ne souhaitent pas ouvrir la console avec la souris. Pour ce faire, vous pouvez utiliser des raccourcis clavier pour activer l'outil requis, avec n'importe quelle disposition de clavier et que la touche « Caps Lock » ait été enfoncée ou non :

• Ctrl+U (pour le clavier russe – la lettre « G ») – pour afficher le code de la page (« Afficher le code de la page »). Pour apporter des modifications, cliquez sur le bouton « Modifier ».
• Ctrl+Shift+J (« O ») – pour ouvrir la console Java (« console JavaScript »). Les outils s'ouvrent après avoir cliqué sur l'onglet « Console ».
• Ctrl+Shift+I (Ш) – pour sélectionner les outils de développement (« Outils de développement »).

Les outils de développement peuvent être ouverts avec une seule touche – « F12 ». Ensuite, cliquez sur le même onglet « Console ». Sur un système Mac, les outils de développement sont activés en appuyant sur Cmd⌘, Option⌥ et I.

Les développeurs d'extensions peuvent également utiliser la console. Pour ce faire, vous avez besoin de :

1. Ouvrez le navigateur Yandex.
2. Collez le lien navigateur://extensions/ dans la barre d'adresse (la même méthode fonctionne dans Chrome).
3. Suis le.

Vous serez dirigé ici :

Cochez la case en haut où il est écrit « Mode développeur ». Après cela, l'utilisateur a le choix de quoi faire avec les extensions :

• Pour mettre à jour les extensions installées dans le navigateur, cliquez sur « mettre à jour les extensions ».
• Si vous avez besoin de le tester, sélectionnez l'option « Charger l'extension décompressée », puis cliquez sur le fichier souhaité.

Pour activer les extensions, vous devez vous rendre dans la section « Modules complémentaires ». Ici, vous verrez une liste de toutes les extensions installées dans les navigateurs. Certains d’entre eux peuvent être actifs, tandis que d’autres peuvent être désactivés. Vous pouvez lancer et désactiver des extensions à l'aide de commutateurs spéciaux.

Ainsi, sachant ouvrir le mode développeur, un spécialiste peut accélérer considérablement le travail sur les pages d'un site Web.

brauzerok.ru

Comment activer le mode développeur Android

Parfois, afin d'effectuer un certain nombre de certaines actions système sur un appareil mobile basé sur Android (par exemple, définir une carte mémoire comme stockage principal ou activer le débogage USB), le mode développeur Android est requis. Qu'est-ce que c'est et avec quoi est-il mangé, comment l'activer et comment le désactiver - toutes ces questions urgentes seront abordées dans le matériel d'aujourd'hui sur le blog informatique LiveLenta.com

Le mode développeur Android offre à l'utilisateur des fonctionnalités supplémentaires qui seront certainement utiles lors de l'enregistrement de l'affichage lors de l'utilisation. commandes adb shell, installation de récupération personnalisée, de récupération de données et d'autres tâches. La gamme de fonctionnalités disponibles dans ce mode est vraiment énorme. Pour l’observer, il faut absolument observer toute cette diversité par soi-même.

Remarque importante : ce qui suit décrit le schéma de menu visuel par défaut, disponible sur presque tous les téléphones sans exception : LG, Moto, Nexus, HTC, Sony Xperia, Pixel, Samsung. Après une observation attentive, vous remarquerez que sur des appareils individuels (Xiaomi, Meizu, ZTE), les éléments de menu correspondants ont un nom différent ou sont contenus dans une branche hiérarchique différente de la structure du menu. Si vous ne parvenez pas à trouver immédiatement l'élément de menu spécifié dans les instructions, étudiez la section « Avancé » et les sous-catégories de menu similaires.

Comment activer le mode développeur Android sur votre téléphone ou votre tablette ?

La procédure d'activation du menu sur tous les gadgets avec Android 6, 7 et Versions précédentesà bord, elle s'effectue de manière totalement identique.

Pour accéder au mode développeur Android, répétez les étapes suivantes :

1. Appuyez sur l'icône Paramètres et en bas du menu qui s'ouvre, développez la branche « À propos de la tablette » ou « À propos du téléphone ». Dans mon cas, l'élément de menu dont j'avais besoin s'appelait « Aide ».

3. Enfin, le dernier point de notre étude de la structure du menu d'options sera l'option « Build Number ». Cliquez dessus 7 fois de suite, et du coup, le message « Vous êtes devenu développeur ! » apparaîtra à l'écran. Cela indiquera que nous avons atteint notre objectif - le mode développeur Android est activé.

Remarque : Après quelques clics (environ 3-4), des messages apparaîtront à l'écran indiquant que le mode développeur Android sera bientôt activé. Cela nous indiquera que les actions effectuées étaient correctes, alors faites-y attention.

À la suite de ces manipulations, une nouvelle catégorie apparaîtra dans le menu des paramètres - « Pour les développeurs ».

Sur certains modèles, vous devrez régler manuellement le déclencheur de mode sur la position « On », mais sur la plupart des appareils, vous n'avez pas besoin de le faire : tout fonctionne de la même manière.

En théorie, cette technique peut ne pas être valable sur un certain nombre d'appareils dotés d'une version du système d'exploitation considérablement modifiée, mais d'après mon expérience, cela ne s'est jamais produit. Tout a très bien fonctionné sur de nombreux appareils fabriqués en Chine.

Comment désactiver le mode développeur Android et éliminer l'élément de menu des paramètres « Pour les développeurs » ?

Comment se débarrasser d'un nouvel élément de menu et comment désactiver le mode lui-même n'est pas moins souvent demandé sur Internet que son activation.

Les paramètres standard du système d'exploitation vous permettent de désactiver le mode développeur à l'aide d'un simple commutateur situé dans la même section du menu « Pour les développeurs ». Cependant, lorsqu'il est désactivé, l'élément de menu lui-même ne disparaît pas et reste « suspendu » à sa place. Si vous souhaitez vous en débarrasser définitivement, suivez ces itérations :

1. Ouvrez Paramètres -> Applications et activez la fonction pour afficher tous les programmes installés.

2. Recherchez le programme appelé « Paramètres » dans la liste et appuyez dessus.

3. Ouvrez maintenant la section « Stockage ».

4. Cliquez sur le bouton « Effacer les données »

5. Après un moment, un message d'avertissement apparaîtra devant vous indiquant que toutes les informations sur le programme sélectionné seront définitivement supprimées et qu'il n'y aura aucun moyen de le restaurer. Cela s'applique aux comptes professionnels, aux paramètres, aux bases de données et à d'autres éléments de configuration du système d'exploitation existants. Cependant, il n’y a pas lieu de craindre que tout cela se produise. En fait, rien de grave ne se produira, vous pouvez donc cliquer en toute sécurité sur le bouton « OK » et confirmer votre décision.

Suite à toutes les actions entreprises, la section de menu « Pour les développeurs » disparaîtra du menu des options visuelles.

Sur un certain nombre de gadgets de certaines marques, l'option « Effacer les données » n'est pas disponible pour module logiciel"Paramètres". Si tel est le cas, la suppression de l'option de menu du mode développeur ne fonctionnera que lorsque vous rétablirez les paramètres d'usine de l'appareil, perdant ainsi les informations utilisateur.

Si vous décidez d'utiliser cette technique, créez d'abord copie de sauvegarde données dans l'un des stockages externes (la synchronisation avec votre compte convient également) Entrée Google). Lorsque cela est fait, ouvrez le menu Paramètres -> Sauvegarde et réinitialisation.

DANS cette section menu, sélectionnez l’option « Réinitialiser les paramètres ».

Après avoir lu le message d'avertissement, cliquez sur le bouton « Réinitialiser l'appareil », sauf si vous avez décidé de ne pas le faire. Après cela, toutes les données utilisateur seront supprimées et vous recevrez un téléphone complètement réinitialisé aux paramètres d'usine, sur lequel vous pourrez « visser » l'ancien carnet d'adresses, une liste des applications téléchargées et d'autres paramètres du système d'exploitation.

Nous avons donc compris ce qu'est le mode développeur Android et comment l'utiliser. Sa fonctionnalité est vraiment géniale, mais soyez prudent. Suite à certaines opérations dans le menu "Pour les développeurs", vous pouvez recevoir téléphone défectueux, des erreurs apparaissant périodiquement ou systémiquement ou son inopérabilité totale.

Remarque importante : les éditeurs ne sont pas responsables des dysfonctionnements de votre téléphone et des pertes de données résultant d'une manipulation expérimentale du menu développeur. Vous effectuez toutes les actions avec celui-ci à vos risques et périls, vous devez donc d'abord vous familiariser avec l'élément que vous allez modifier et ne pas le faire sans réfléchir.

Ces dernières années, le navigateur Google Chrome est devenu le plus populaire parmi les internautes ordinaires et les utilisateurs impliqués dans le développement Web.

En six semaines, Chrome a connu plusieurs versions clés et le système lui-même est constamment mis à jour avec de nouveaux outils de développement, grâce auxquels le navigateur a acquis un système de paramètres très flexible. De nombreuses personnes se sont depuis longtemps familiarisées avec toutes les fonctions du navigateur, par exemple avec la fonction d'édition CSS en direct, à l'aide de la console, ainsi qu'avec le débogueur. Cet article est destiné à présenter les onze astuces principales et astuces utiles qui peuvent améliorer le niveau de performances de l'ensemble du système et rendre l'utilisation du navigateur aussi confortable que possible.

Si vous avez déjà utilisé la fonction Sublime Text, vous avez probablement toujours besoin de l'option Aller à n'importe quoi. Les développeurs notent qu'une fonction similaire pour ceux qui utilisent activement Idea peut avoir un nom différent - "Rechercher partout", et vous pouvez l'appeler en appuyant simplement deux fois sur la touche "Shift".

La bonne nouvelle est qu’une fonction de ce type figure dans la boîte à outils du développeur. Pour l'activer, vous devez maintenir enfoncée la combinaison de deux touches Ctrl et P (si vous utilisez AppleMac, vous devrez alors maintenir enfoncés Cmd et P) au moment où le PR sera présenté à votre attention afin d'effectuer recherche rapide et en ouvrant n'importe quel fichier du projet que vous utilisez.

Effectuer une recherche dans le code de type source

Cependant, que se passe-t-il si la recherche doit être effectuée dans le code du type source ? Pour rechercher dans chaque fichier téléchargé sur la page du navigateur elle-même, vous devrez maintenir trois touches enfoncées : Ctrl, Shift et F - pour fonctionner Systèmes Windows; Cmd, Opt et F. Cette technique de recherche est capable de prendre en charge les recherches d'expressions régulières.

Après avoir ouvert le fichier dont vous avez besoin dans l'onglet spécial "Sources", les outils de développement complets permettront à l'utilisateur d'accéder à une ligne de n'importe quel type pour ce fichier. Pour que cette procédure soit mise en œuvre, vous devrez maintenir enfoncées les touches Ctrl et G – pour les logiciels Windows ; Cmd et L si vous utilisez un Apple Mac. Après cela, entrez le numéro de la ligne.

Vous pouvez également utiliser une méthode supplémentaire en appuyant sur la combinaison de deux touches Ctrl et O, cependant, vous n'aurez pas à saisir de texte pour rechercher, mais à saisir deux points, puis le numéro que contient la ligne. L'utilisateur peut également aller beaucoup plus loin dans la procédure. Vous devez saisir le nom du fichier, ainsi que le numéro, en utilisant deux points comme signe de division entre les valeurs individuelles. Dans ce cas, le nom du fichier peut être saisi avec une abréviation.

Récupérer des éléments DOM lors de l'utilisation de la console

La console, qui est responsable des outils de développement, peut facilement prendre en charge certains fonctions utiles, ainsi que des variables pour récupérer le DOM :

• est équivalent à document.querySelector(). Peut renvoyer le premier élément qui correspond exactement aux données du sélecteur CSS. Disons que $(DIV) - peut implémenter le renvoi du premier élément DIV directement dans la zone de la page principale.
• $$() est la valeur équivalente à document.querySelectorAll(). L'option est capable de renvoyer la liste entière avec les éléments (cette liste s'appelle NodeList). Presque tous les éléments sont entièrement conformes au sélecteur CSS.
• $0-$4 - Ces valeurs enregistrent l'historique des éléments DOM qui appartenaient aux cinq derniers. Vous les avez sélectionnés dans l'onglet spécial « Éléments », et ici la valeur $0 apparaît comme la plus récente.

Comment utiliser plusieurs carets et sélections

Lors de l'édition du fichier, vous avez la possibilité d'installer des chariots. Cela peut être fait en maintenant la touche Ctrl enfoncée, puis en cliquant sur la zone dont vous avez besoin. Les chariots peuvent être installés en même temps à plusieurs endroits.

Lorsque ce paramètre est activé sur l'onglet console, chaque résultat individuel sera enregistré. Les données ne seront pas effacées la prochaine fois que vous lancerez la page dans le navigateur. Un tel système apporte beaucoup de commodité au travail avec le système, en particulier lorsque vous devez vérifier l'historique complet des erreurs survenues avant de quitter la page.

Amélioration des sources qui ont été minimisées

Chrome Developer Tools dispose d'un « prettener » intégré pour les codes sources qui ont été minimisés pour les rendre plus faciles à lire. Le bouton lui-même est situé tout en bas à gauche dans le fichier ouvert sur ce moment temps (onglet spécial « Sources »).

Comment utiliser le mode appareil

La boîte à outils du développeur a la possibilité d'utiliser un mode puissant, conçu pour créer des pages optimisées pour les smartphones et les tablettes. Si vous saisissez des informations concernant ce problème dans un moteur de recherche Google, vous pouvez facilement trouver une vidéo dans laquelle les développeurs démontrent la plupart des fonctionnalités auxiliaires, par exemple l'agrandissement du format de l'écran, la mise en œuvre de l'émulation tactile de l'écran tactile et la possibilité d'émuler un écran tactile faible. -Connexion Internet de qualité.

Comment les capteurs des appareils sont-ils émulés ?

Le système possède une caractéristique aussi importante du mode instrument que l'imitation de capteurs spéciaux d'appareils portables (les accéléromètres et les écrans tactiles en sont des exemples). Vous pouvez également spécifier des coordonnées géographiques. Habituellement, l'objet lui-même se trouve tout en bas dans l'onglet « Éléments », là où se trouve l'onglet « Émulation », puis « Capteurs ».

Lorsque vous choisissez une couleur tout en travaillant avec l'éditeur de style, vous avez la possibilité de cliquer sur l'échantillon de couleur, puis une fenêtre apparaîtra dans laquelle l'utilisateur pourra sélectionner la nuance de couleur dont il a besoin. Pendant que la fenêtre reste en mode actif, le pointeur de votre souris se transforme en loupe pour faciliter la sélection d'une couleur. L'ensemble de la procédure est effectué de manière claire et rapide.

Mode d'état de l'élément de force

La boîte à outils de développement offre la possibilité d'induire des états CSS d'éléments DOM. À titre d'exemple, :hover et :focus pourraient être utilisés. Dans le même temps, l’écriture de leurs styles est simplifiée. Ce type de fonctionnalité peut être disponible en mode accessible là où se trouve l'éditeur CSS.