Find all HTML elements used on a page

Last Friday, I needed to get a list of all HTML elements used on a web page. To achieve this, I ran the following JavaScript code in DevTools:

Array.from(
	new Set(
		Array.from(document.querySelectorAll("*"), el =>
			el.tagName.toLowerCase()
		)
	)
);

I passed the universal selector (*) to the document.querySelectorAll() method to get a NodeList of all elements on the page. I wanted an array, so I passed the NodeList to the Array.from() method. This method accepts a map function as its second parameter, so I passed the arrow function expression el => el.tagName.toLowerCase() to get each element’s tagName in lowercase. To remove duplicate tag names, I passed the array to the Set() constructor. Finally, I passed the Set to the Array.from() method to turn it back into an array.

I made a demo on CodePen.