Existe uma ferramenta muito útil construída na ferramenta de desenvolvimento do Chrome, que acabei de descobrir. Nem sei o nome dele, e não consigo encontrar no google. Eu diria que é uma ferramenta de inspeção de pixels.
Acho o seguinte método de como usá-lo:
1a. Inspecione um elemento html com a cor de fundo.
1b. Defina a cor de fundo de um elemento.
- Clique no seletor de cores.
- Mova o mouse sobre qualquer elemento da página (não na ferramenta dev)
Veja: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif
Minhas perguntas: Qual é o nome desta ferramenta? Como usar isso facilmente? Na maioria das vezes, não me importo com a cor, mas quero inspecionar os pixels de um ícone. Existe uma tecla de atalho desta ferramenta?
google-chrome-devtools
Skalár Wag
fonte
fonte
Respostas:
Para abrir o conta-gotas simplesmente:
Sua principal funcionalidade é inspecionar os valores de cor de pixel clicando neles, embora com seus novos recursos você também possa ver a paleta de cores existente em sua página ou paleta de design de material clicando no ícone de duas setas na parte inferior. Pode ser muito útil ao projetar sua página.
fonte
É chamado apenas de ferramenta conta-gotas. Pelo que estou ciente, não há nenhuma tecla de atalho para ele. A única maneira de usá-lo agora é clicando na caixa do seletor de cores na barra lateral de estilos e, a seguir, clicando na página como já fez.
fonte
--c: red, maneira mais fácil de obter uma propriedade de cor em seu painel de devtools.Atualmente, a ferramenta conta-gotas não está funcionando na minha versão do Chrome (conforme descrito acima), embora funcionasse para mim no passado. Ouvi dizer que ele está sendo atualizado na versão mais recente do Chrome.
No entanto, consigo capturar cores facilmente no Firefox.
A cor é copiada para a área de transferência e a ferramenta conta-gotas desaparece.
Caso você não consiga fazer o conta-gotas funcionar no Chrome, esta é uma boa solução.
Também acho mais fácil acessar :-)
fonte