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

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?

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):

Parâmetros do modelo de caixa CSS (conteúdo / preenchimento / borda / margem).

Documentos oficiais: Inspecionar e editar páginas e estilos: examinar e editar parâmetros de modelo de caixa