In past versions of Chrome, the developer tools allowed you to inspect page elements and would highlight them in blue. Recent versions of Chrome highlight elements in blue, but also have green and orange areas as well.
What do the colors mean?
In past versions of Chrome, the developer tools allowed you to inspect page elements and would highlight them in blue. Recent versions of Chrome highlight elements in blue, but also have green and orange areas as well.
What do the colors mean?
The colors represent the areas of elements corresponding to the CSS box-model.
(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):
Update 2021
Also purple dashed area is displayed now. It represents the available space to expand:
CSS box model parameters (content/padding/border/margin).
Official docs: Inspect and Edit Pages and Styles: Examine and edit box model parameters