Какие инструменты разработчика Chrome выделяют цвета?

35305
Synetech

В предыдущих версиях Chrome инструменты разработчика позволяли просматривать элементы страницы и выделяли их синим цветом. Последние версии Chrome выделяют элементы синим цветом, но также имеют зеленую и оранжевую области.

Что означают цвета?

Какие инструменты разработчика Chrome выделяют цвета?

47
Вот для чего я пришел: синий # 9FC4E7 зеленый # C2DDB6 оранжевый # F8CB9C fastmultiplication 6 лет назад 1

2 ответа на вопрос

45
Synetech

The colors represent the areas of elements corresponding to the CSS box-model.

  • Blue is the content
  • Green is the padding
  • Orange is the border
  • Red is the margin

(The choice of similar shades of orange and red are probably not the best.)

You can see this in the Metrics section of the developer tools (which is hidden by default):

enter image description here

0
Nils von Barth

CSS box model parameters (content/padding/border/margin).

Official docs: Inspect and Edit Pages and Styles: Examine and edit box model parameters

Похожие вопросы