google chrome devtools - tools - ¿Cómo usar el selector de color(cuentagotas)?

don''t open developer tools traduccion

Question

Hay una herramienta muy útil integrada en la herramienta de desarrollo de Chrome, que acabo de descubrir. Incluso no sé su nombre, y no puedo encontrarlo en Google. Yo diría que es una herramienta de inspección de píxeles.

Encuentro el siguiente método para usarlo:

1a. Inspeccione un elemento html con color de fondo.

1b. Definir el color de fondo de un elemento.

2. Haga clic en el selector de color.
3. Mueva el mouse sobre cualquier elemento de la página (no en la herramienta de desarrollo)

Ver: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Mis preguntas: ¿Cuál es el nombre de esta herramienta? ¿Cómo usarlo fácilmente? La mayoría de las veces no me importa el color, pero quiero inspeccionar los píxeles de un icono. ¿Hay alguna tecla de acceso rápido de esta herramienta?

Answer 1

Actualmente, la herramienta Cuentagotas no funciona en mi versión de Chrome (como se describió anteriormente), aunque funcionó para mí en el pasado. Escuché que se está actualizando en la última versión de Chrome.

Sin embargo, puedo capturar colores fácilmente en Firefox.

1. Abrir página en Firefox
2. Menú de hamburguesas -> Desarrollador web -> Cuentagotas
3. Arrastre la herramienta Cuentagotas sobre la imagen ... Haga clic .
   El color se copia en el portapapeles y la herramienta cuentagotas desaparece.
4. Pegar código de color

En caso de que no pueda hacer que la herramienta Cuentagotas funcione en Chrome, esta es una buena solución.
También me resulta más fácil acceder :-)

Answer 2

Para abrir Eye Dropper simplemente:

1. Abra DevTools F12
2. Ir a la pestaña Elementos
3. En la barra lateral de Estilos, haga clic en cualquier cuadro de vista previa de color

Su funcionalidad principal es inspeccionar los valores de color de los píxeles haciendo clic en ellos, aunque con sus nuevas características también puede ver la paleta de colores o la paleta de diseño de materiales de su página haciendo clic en el icono de dos flechas en la parte inferior. Puede ser bastante útil al diseñar su página.

Answer 3

Simplemente se llama la herramienta cuentagotas. No hay una tecla de acceso directo para él que yo sepa. La única forma en que puede usarlo ahora es haciendo clic en el cuadro de selección de color en la barra lateral de estilos y luego haciendo clic en la página como ya lo ha estado haciendo.