Comment utiliser l'outil de sélecteur de couleurs dans Chrome Devtools

Pour vraiment utiliser le sélecteur de couleurs Chrome Devtools, ouvrez d'abord Devtools et cliquez sur les propriétés des couleurs, utilisez le panneau ou les valeurs d'entrée pour déboguer en temps réel, puis utiliser l'historique et le collecteur de couleurs pour améliorer l'efficacité. Les étapes spécifiques incluent: 1. Appuyez sur F12 ou cliquez avec le bouton droit pour vérifier l'élément pour ouvrir Devtools; 2. Cliquez sur le carré de couleur pour démarrer le sélecteur; 3. Faites glisser le curseur ou entrez la valeur pour ajuster la couleur et la prévisualiser en temps réel; 4. Utilisez l'étiquette historique pour réutiliser les couleurs pour maintenir la cohérence; 5. Cliquez sur l'icône de paille pour permettre au sélecteur de couleurs de ramasser rapidement les couleurs de la page.

Le sélecteur de couleurs de Chrome Devtools est en fait assez pratique, surtout lors du débogage des styles Web, qui peuvent rapidement ajuster les valeurs de couleur. Beaucoup de gens savent qu'il existe, mais ne sont pas assez qualifiés, ou ils ne connaissent pas ses compétences cachées. Cet article expliquera comment utiliser vraiment cet outil.

Comment ouvrir le sélecteur de couleurs

Pour utiliser le sélecteur de couleurs, vous devez d'abord ouvrir Chrome Devtools (clé de raccourci F12 ou cliquez avec le bouton droit sur l'élément de page pour sélectionner "Vérifier"). Trouvez ensuite les propriétés avec une couleur dans un style CSS, comme color , background-color ou border-color . Cliquez sur ce carré de couleur et le sélecteur de couleurs apparaîtra.

Pour le moment, vous pouvez voir:

• Panneau de couleurs (peut être traîné pour sélectionner les couleurs)
• Représentations Hex, RVB et HSL de la couleur actuelle
• Records de couleurs historiques

Si vous souhaitez passer rapidement à d'autres formats, cliquez simplement sur la section de valeur pour changer la méthode d'affichage.

Comment utiliser le sélecteur de couleurs pour déboguer les couleurs en temps réel

Le sélecteur de couleurs est non seulement utilisé pour voir les couleurs, mais également utilisé pour le débogage en temps réel. Vous pouvez faire glisser le curseur sur le panneau de couleur pour modifier la couleur, ou vous pouvez saisir manuellement les valeurs hexadécimales, RVB ou HSL. Les modifications seront reflétées immédiatement sur la page, ce qui vous permet de visualiser instantanément les résultats.

Quelques conseils:

• Maintenez le bouton gauche de la souris et faites glisser le curseur de couleur pour affiner la couleur
• Après avoir saisi la valeur, appuyez sur Entrée pour déclencher la mise à jour (certaines versions l'exigent)
• Cliquez sur la zone de contraste entre la "couleur initiale" et la "nouvelle couleur" pour changer rapidement l'état de couleur actuel

Si vous optimisez le schéma de couleurs, cette fonctionnalité est particulièrement utile et vous pouvez voir des modifications visuelles sans modifier à plusieurs reprises le code.

Une petite astuce de couleurs historiques et de cueilleurs de couleurs

Il y a un onglet "Historique" à droite du sélecteur de couleurs, qui sauvera les couleurs que vous avez utilisées récemment. Ceci est très utile pour maintenir la cohérence des couleurs. Par exemple, si vous utilisez la même couleur bleue à plusieurs endroits, vous pouvez choisir directement parmi l'histoire sans avoir à le remonter.

Une autre caractéristique qui est facilement négligée est le "collecteur de couleurs". Il y a une icône de paille au bas de l'interface du sélecteur de couleurs. Après avoir cliqué, la souris deviendra un sélecteur de couleurs. Vous pouvez le déplacer n'importe où sur la page et ramasser la couleur de ce point en un seul clic.

Ceci est très pratique lors de l'adaptation de l'interface utilisateur ou de la restauration des brouillons de conception, surtout lorsque vous n'êtes pas sûr de quelle couleur un certain élément utilise.

Fondamentalement, c'est tout. Bien que le sélecteur de couleurs ne soit qu'un gadget, il peut économiser beaucoup de temps après l'avoir utilisé. La clé est de l'essayer davantage et de se familiariser avec diverses méthodes de fonctionnement. Peu à peu, vous constaterez qu'il est plus flexible que vous ne le pensez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!