Visualize elements on page with the outline style
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:
[].forEach.call(
document.querySelectorAll('a'),
...
);