Bookmarklets

Cookie Inspector

bookmarklets Web Dev Debugging

The Cookie Inspector bookmarklet is a powerful tool for web developers to inspect and analyze cookies on any webpage. This tool provides detailed information about all cookies associated with the current domain, helping developers understand and debug cookie-related issues.

javascript:!function(){function n(n){const t=document.cookie.split(";");for(let o of t)if(o.trim().startsWith(n+"=")){const n=o.match(/expires=([^;]+)/);if(n)return new Date(n[1]).toLocaleString()}return"Session Cookie"}const t=document.createElement("div");t.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: 400px;\n        max-width: 90vw;\n        max-height: 90vh;\n        overflow-y: auto;\n    ";const o=document.cookie.split(";").map((t=>{const[o,e]=t.trim().split("=");return{name:decodeURIComponent(o),value:decodeURIComponent(e||""),domain:window.location.hostname,path:"/",expires:n(o)}}));t.innerHTML=`\n        <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">\n            <h3 style="margin: 0;">Cookie Inspector</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;">Domain: <strong>${window.location.hostname}</strong></p>\n            <p style="margin: 5px 0 0 0;">Total Cookies: <strong>${o.length}</strong></p>\n        </div>\n        <div style="margin-bottom: 15px;">\n            <input type="text" id="cookieSearch" \n                   placeholder="Search cookies..." \n                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px;">\n        </div>\n        <div id="cookieList" style="max-height: 400px; overflow-y: auto;">\n            ${o.map((n=>`\n                <div style="margin-bottom: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                    <div style="margin-bottom: 5px;">\n                        <strong>Name:</strong> ${n.name}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Value:</strong> ${n.value.length>50?n.value.substring(0,50)+"...":n.value}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Domain:</strong> ${n.domain}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Path:</strong> ${n.path}\n                    </div>\n                    <div>\n                        <strong>Expires:</strong> ${n.expires}\n                    </div>\n                </div>\n            `)).join("")}\n        </div>\n    `;const e=t.querySelector("#cookieSearch"),i=t.querySelector("#cookieList");e.addEventListener("input",(function(){const n=this.value.toLowerCase(),t=i.children;Array.from(t).forEach((t=>{const o=t.textContent.toLowerCase();t.style.display=o.includes(n)?"block":"none"}))})),document.body.appendChild(t)}();
Drag me to bookmark bar: 👉🏻 Cookie Inspector

Why Use Cookie Inspector?

The Cookie Inspector bookmarklet is essential for developers who need to:

Features

  1. Comprehensive Cookie Information

    • Cookie name and value
    • Domain and path details
    • Expiration date/time
    • Total cookie count

  2. Search Functionality

    • Real-time cookie search
    • Filter by name or value
    • Easy to find specific cookies
    • Case-insensitive search

  3. User-Friendly Interface

    • Clean, modern design
    • Scrollable cookie list
    • Truncated long values
    • Easy to close popup

  4. Detailed Cookie Properties

    • Full cookie details
    • Formatted expiration dates
    • Domain information
    • Path information

How to Use

  1. Click the bookmarklet to activate the tool
  2. View the list of all cookies for the current domain
  3. Use the search box to filter cookies
  4. Review cookie details including:
    • Name and value
    • Domain and path
    • Expiration date
  5. Close the popup when done

Best Practices