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:
// Set the outline for links only
[].forEach.call(
document.querySelectorAll('a'),
...
);