Powrót do wpisów

Linkowanie wewnętrzne – podświetlanie linkujących elementów

Patryk

Artykuł z 17 sierpnia, 2026

Wklej poniższy kod do konsoli DEVTOOLS aby podświetlić na wybranej podstronie elementy linkujące – uproszczenie wyszukiwania elementów

(function highlightLinksAndButtons() {
  function isRealHref(href) {
    if (!href) return false;
    const trimmed = href.trim().toLowerCase();
    return !(
      trimmed === '' ||
      trimmed === '#' ||
      trimmed.startsWith('javascript:void') ||
      trimmed === 'javascript:;'
    );
  }

  function hasRealLink(el) {
    const tag = el.tagName.toLowerCase();

    // 1. Sam element to <a>
    if (tag === 'a') {
      return isRealHref(el.getAttribute('href'));
    }

    // 2. Sam element to <button>
    if (tag === 'button') {
      const hasOnclick = el.hasAttribute('onclick') || typeof el.onclick === 'function';
      const isSubmit = el.type === 'submit' && el.closest('form');
      return !!(hasOnclick || isSubmit);
    }

    // 3. Element jest "opakowany" w <a href="..."> (np. <a><span class="btn">...)
    const ancestorLink = el.closest('a');
    if (ancestorLink && isRealHref(ancestorLink.getAttribute('href'))) {
      return true;
    }

    // 4. Element ma onclick / data-href
    const hasOnclick = el.hasAttribute('onclick') || typeof el.onclick === 'function';
    const hasDataHref = el.dataset && (el.dataset.href || el.dataset.url || el.dataset.link);
    if (hasOnclick || hasDataHref) return true;

    return false;
  }

  // Wybieramy prawdziwe linki/buttony + "fałszywe" przyciski (span/div ostylowane jak button)
  const candidates = document.querySelectorAll(
    'a, button, [role="button"], [role="link"], [class*="btn" i], [class*="button" i]'
  );

  // Deduplikacja: jeśli dziecko i rodzic oba matchują, bierzemy tylko najbardziej "zewnętrzny" wizualnie
  const elements = Array.from(candidates);
  let greenCount = 0;
  let redCount = 0;

  elements.forEach((el) => {
    const ok = hasRealLink(el);
    el.style.outline = ok ? '3px solid limegreen' : '3px solid red';
    el.style.outlineOffset = '2px';
    ok ? greenCount++ : redCount++;
  });

  console.log(`Sprawdzono ${elements.length} elementów.`);
  console.log(`Zielone (mają linkowanie): ${greenCount}`);
  console.log(`Czerwone (brak linkowania): ${redCount}`);
})();