HTML Sight

Try it by clicking the following link:

Enable HTML Sight

You can install the functionality as a "bookmarklet" by adding that link to your bookmarks, which lets you enable HTML sight on any webpage just by clicking the bookmark.

There's also the option to turn it back off.

How it works

Learn more about bookmarklets here.

The code is below, but these are the general steps involved:

  1. List all the element types on the page like div, p, etc.
  2. Get a style element to insert, if it's running a second time, reuse the one we already added, otherwise create one.
  3. For each element, generate CSS to insert <tag> and </tag> before and after the tag in question.
  4. Insert the style element to the document's head.

const tags=Array.from(new Set(Array.from(document.body.querySelectorAll('*'), e => e.nodeName.toLowerCase())));

const style=document.querySelector('.html-sight') || document.createElement('style');
style.classList.add('html-sight');

style.innerHTML = tags.map(tag => `
${tag}:before{
  content: '<${tag}>';
}
${tag}:after {
  content: '';
}
`).join('\n');


document.head.appendChild(style);