jQuery func to find out why an element is hidden

findHidden.js

function found(el, css) {
  console.log('Found candidate(s):', el);
  console.log('css:', css);
}

function findHidden(sel) {
  const transparent = 'rgba(0,0,0,0)';
  const el = $(sel);
  if (el.length === 0) {
    console.log('giving up, no more els');
    return null;
  }

  const css = el.css([
    'opacity',
    'filter',
    'display',
    'visibility',
    'color',
    'background-color',
    'scale',
    'font-size',
    'overflow',
    'padding',
    'border-width',
  ]);
  // console.log(css);

  if (css.opacity === '0') {
    return found(el, `opacity: ${css.opacity}`);
  }
  if (css.color === transparent) {
    return found(el, `color: ${css.color}`);
  }
  if (css.display === 'none') {
    return found(el, `display: ${css.display}`);
  }
  if (css.scale === '0') {
    return found(el, `scale: ${css.scale}`);
  }
  if (css['font-size'] === '0') {
    return found(el, `font-size: ${css['font-size']}`);
  }
  if (css.visibility === 'hidden' || css.visibility === 'collapse') {
    return found(el, `visibility: ${css.visibility}`);
  }
  if (el.height() === 0 || el.width() === 0) {
    return found(el, `height: ${el.height()}; width: ${el.width()}`);
  }

  return findHidden(el.parent());
}

function selectHiddenEl(cb) {
  $('body').append(`
    <div class="show_el" />
  `);
  const highlight = $('.show_el');

  function mouseOver(e) {
    if (e.target === highlight[0]) {
      return;
    }

    e.stopPropagation();
    const el = $(e.target);
    const o = el.offset();
    if (!el.hasClass('__showing')) {
      // console.log('highlighting', el);
      $(el).addClass('__showing');
      highlight.css({
        pointerEvents: 'none',
        border: '3px solid red',
        position: 'absolute',
        height: el.outerHeight(),
        width: el.outerWidth(),
        left: o.left,
        top: o.top,
      });
    }
  }

  function mouseOut(e) {
    $(e.target).removeClass('__showing');
  }

  function click(e) {
    e.stopPropagation();
    document.removeEventListener('mouseover', mouseOver);
    document.removeEventListener('mouseout', mouseOut);
    document.removeEventListener('click', click);

    const el = $(e.target);
    el.removeClass('__showing');
    highlight.remove();

    cb(el);
  }

  document.addEventListener('mouseover', mouseOver);
  document.addEventListener('mouseout', mouseOut);
  document.addEventListener('click', click);
}

usage.js

// if you have a CSS selector for the element you want to debug
findHidden('some css sel for jquery');

// or if you want to select it directly on the page
selectHiddenEl(findHidden);

https://www.sitepoint.com/hide-elements-in-css/