Element counter

checkElementCount.js

// Paste into browser console and hover elements.

(function checkElementCount() {
  let current = null;
  let counter = null;

  function init() {
    document.body.addEventListener('mouseover', onMouseOver);
    updateCounter(getChildElementCount(document));
  }

  function onMouseOver(event) {
    if (current) {
      resetCurrent();
    }

    outlineElement(event.target);
    updateCounter(getChildElementCount(event.target))
  }

  function resetCurrent() {
    current.element.style['box-shadow'] = current.boxShadow;
    current.element = null;
  }

  function outlineElement(element) {
    current = { boxShadow: element.style['box-shadow'], element }
    element.style['box-shadow'] = 'inset 0px 0px 0px 2px #D980FA';
  }

  function getChildElementCount(element) {
    return element.querySelectorAll('*').length;
  }

  function updateCounter(count) {
    if (counter) {
      counter.textContent = count;
      return;
    }

    counter = document.createElement('div');

    counter.textContent = count;
    counter.style = 'padding: 10px; position: fixed; top: 0; left: 0; background-color: #D980FA; z-index: 99999999; color: white;';

    document.body.appendChild(counter);
  }

  init();
}());