Quais são as cores das ferramentas de desenvolvedor do Chrome?

54

Nas versões anteriores do Chrome, as ferramentas do desenvolvedor permitiam a inspeção de elementos da página e os destacavam em azul. As versões recentes do Chrome destacam elementos em azul, mas também possuem áreas verde e laranja.

O que as cores significam?

insira a descrição da imagem aqui

Synetech
fonte
11
Isto é o que eu vim aqui para: azul # 9FC4E7 verde # laranja C2DDB6 # F8CB9C
fastmultiplication

Respostas:

54

As cores representam as áreas dos elementos correspondentes ao modelo de caixa CSS .

  • Azul é o conteúdo
  • Verde é o preenchimento
  • Laranja é a fronteira
  • Vermelho é a margem

(A escolha de tons semelhantes de laranja e vermelho provavelmente não é a melhor.)

Você pode ver isso na seção Métricas das ferramentas do desenvolvedor (que estão ocultas por padrão):

insira a descrição da imagem aqui

Synetech
fonte