The outline property is useful when you want to visualize elements on the page. In the following sample code, we iterate over all the elements and set the
`outline` property with a random hex color:const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;
[].forEach.call(document.querySelectorAll('*'), (ele) => (ele.style.outline = `1px solid ${randomColor()}`));Of course, you will need an opposite command to reset the
`outline` property:[].forEach.call(document.querySelectorAll('*'), (ele) => ele.style.removeProperty('outline'));You can change the selector from
`*` to whatever you want to match the set of particular elements, for example:// Set the outline for links only
[].forEach.call(
document.querySelectorAll('a'),
...
);