Bookmarklets

Element Counter

bookmarklets Web Dev Debugging

The Element Counter bookmarklet is a powerful tool for web developers to quickly analyze the structure of any webpage. This tool provides detailed information about the number and types of HTML elements used, helping developers understand and optimize their markup.

javascript:!function(){const n=document.createElement("div");n.style.cssText="\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        background: white;\n        padding: 20px;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        min-width: 300px;\n        max-width: 90vw;\n        max-height: 90vh;\n        overflow-y: auto;\n    ";const{total:e,counts:t}=function(){const n=document.getElementsByTagName("*"),e={},t=n.length;return Array.from(n).forEach((n=>{const t=n.tagName.toLowerCase();e[t]=(e[t]||0)+1})),{total:t,counts:Object.entries(e).sort((([,n],[,e])=>e-n))}}();n.innerHTML=`\n        <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">\n            <h3 style="margin: 0;">Element Counter</h3>\n            <button onclick="this.parentElement.parentElement.remove()" \n                    style="background: none; border: none; font-size: 20px; cursor: pointer;">×</button>\n        </div>\n        <div style="margin-bottom: 15px;">\n            <p style="margin: 0;">Total Elements: <strong>${e}</strong></p>\n        </div>\n        <div style="margin-bottom: 15px;">\n            <input type="text" id="elementSearch" \n                   placeholder="Search elements..." \n                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px;">\n        </div>\n        <div id="elementList" style="max-height: 400px; overflow-y: auto;">\n            ${t.map((([n,e])=>`\n                <div style="margin-bottom: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                    <div style="display: flex; justify-content: space-between; align-items: center;">\n                        <strong>${n}</strong>\n                        <span>${e}</span>\n                    </div>\n                </div>\n            `)).join("")}\n        </div>\n    `;const o=n.querySelector("#elementSearch"),i=n.querySelector("#elementList");o.addEventListener("input",(function(){const n=this.value.toLowerCase(),e=i.children;Array.from(e).forEach((e=>{const t=e.textContent.toLowerCase();e.style.display=t.includes(n)?"block":"none"}))})),document.body.appendChild(n)}();
Drag me to bookmark bar: 👉🏻 Element Counter

Why Use Element Counter?

The Element Counter bookmarklet is essential for developers who need to:

Features

  1. Comprehensive Element Analysis

    • Total element count
    • Per-tag counts
    • Sorted by frequency
    • Complete element list

  2. Search Functionality

    • Real-time element search
    • Filter by tag name
    • Easy to find specific elements
    • Case-insensitive search

  3. User-Friendly Interface

    • Clean, modern design
    • Scrollable element list
    • Clear count display
    • Easy to close popup

  4. Detailed Information

    • Element breakdown
    • Usage statistics
    • Quick overview
    • Organized presentation

How to Use

  1. Click the bookmarklet to activate the tool
  2. View the total element count
  3. Browse the list of elements by tag
  4. Use the search box to filter elements
  5. Close the popup when done

Best Practices