Box Model Highlighter
This highlighter is the most used highlighter because it is used in elements' inspection..
How to activate it
It can be shown just by inspecting elements in the page: right click with the mouse on an element in the page, from the context menu choose inspect element. The box around the element and the dashed guidelines, are the box model highlighter itself.
Once the toolbox is open, moving the mouse over DOM nodes in the inspector will also display the box model highlighter on that element.
Where to test
- Any page, this too.
CSS Grid Highlighter
This highlighter is used to overlays a visual grid on top of
display:grid elements.
How to activate it
Inspect an element in the page that has display: grid.
Then, from the Rules' view panel, click on the grid's icon between
display's property name and grid's value.
A visual grid should be visible now, that represent the grid structure of the inspected element.
Where to test
- Playground area on the left, Grid section
- Grid by Example
- Jazz Poster | Jen Simmons
CSS Transform Highlighter
This highlighter draws an outline around a transformed element and an outline around where it would be if untransformed as well as arrows connecting the 2 outlines' corners.
How to activate it
Inspect an element in the page that has transform property
set.
Then, from the Rules' view panel, hover the transform's
value.
An overylay that shown the original element without transformation should be now visible on the page; that is the CSS Transform highlighter.
Where to test
- Playground area on the left, Basic transformations and CSS 3D transformations section
Selector Highlighter
This highlighter runs a given selector through
querySelectorAll on the document of the provided context
node and then uses the Box Model highlighter
to highlight the matching nodes.
How to activate it
Open the devtools (Tools > Web Developer > Toggle Tools) then from the rules' view click on the inspector's icon (the one after a CSS rule, with tooltip "Highlight all elements matching this selector").
Where to test
- Any page, this too.
Geometry Editor Highlighter
This highlighter allows you to change via drag & drop an element's
top, left, bottom,
right, width and height
dimensions, when they are set.
The highlighter displays lines and labels for each of the defined properties in and around the element (relative to the offset parent when one exists).
The highlighter won't be shown if the element doesn't have any of these properties set, but will be shown when at least one property is defined.
How to activate it
Inspect an element in the page that has position property
set to relative, absolute or
fixed; and at least one of the dimensions listed above.
Then, in the Computed's panel, under Box Model, click the
layout's icon displayed close to the
position's value.
Where to test
- Playground area on the left, Basic Positioning section.
- DevTools Demos - Positioning playground
Rulers Highlighter
The Rulers highlighter displays both horizontal and vertical rules on the page, along the top and left edges, with pixel graduations, useful for users to quickly check distances.
How to activate it
Open the devtools (Tools > Web Developer > Toggle Tools) then you should see the rulers icon in the toolbox's buttons area. Clicking the icon, will toggle the rulers.
If it's not visible, click on the Settings (the gear icon), and check Toggle rulers for the page under Available Toolbox buttons.
Where to test
- Any page, this too.
Measuring Tool Highlighter
The Measuring Tool highlighter is used to measure distances in a page. It allows users to click and drag with their mouse to draw an area whose dimensions will be displayed in a tooltip next to it. This allows users to measure distances between elements on a page.
How to activate it
Open the devtools (Tools > Web Developer > Toggle Tools) then you should see the measuring tool icon in the toolbox's buttons area. Clicking the icon, will toggle the tool.
If it's not visible, click on the Settings (the gear icon), and check Measure a portion of the page under Available Toolbox buttons.
Once the highlighter is active, hovering the mouse in the document should display a tooltip with the current coordinates. It is now possible to measure a portion of the page by keeping the mouse button pressed and releasing once the interesting area is covered.
Where to test
- Any page, this too.
Eye Dropper
The Eye Dropper highlighter displays a magnifier that tracks mouse moves and shows a magnified version of the page. On click, it samples the color at the pixel being hovered.
How to activate it
Open the devtools (Tools > Web Developer > Toggle Tools) then click on the eye dropper icon, close to the search box.
Where to test
- Any page, this too.