Top 20 Useful Bookmarklets for Developers

Why Developers Love Bookmarklets

Bookmarklets are powerful micro-tools that can instantly transform any webpage. For developers, they're invaluable for debugging, testing, and analyzing websites without opening DevTools or installing extensions.

Essential Developer Bookmarklets

🐛 Debugging Tools

javascript:(function(){var errors=[];window.onerror=function(msg,url,line){errors.push(msg+' at '+url+':'+line);return true};alert(errors.length?errors.join('\n'):'No errors detected')})();

javascript:(function(){document.querySelectorAll('*').forEach(el=>{if(el._listeners||el.onclick||el.onmouseover){el.style.border='2px solid red';el.title='Has event listeners'}})})();

javascript:(function(){var d=document.createElement('div');d.style='position:fixed;bottom:0;right:0;background:#000;color:#0f0;padding:10px;max-height:200px;overflow:auto;z-index:9999';d.id='mini-console';document.body.appendChild(d);var log=console.log;console.log=function(){var msg=Array.from(arguments).join(' ');d.innerHTML+='<div>'+msg+'</div>';log.apply(console,arguments)}})();

🎨 CSS & Styling Tools

javascript:(function(){var classes=new Set();document.querySelectorAll('[class]').forEach(el=>el.classList.forEach(c=>classes.add(c)));alert('Classes ('+classes.size+'):\n'+Array.from(classes).sort().join('\n'))})();

javascript:(function(){var d=document.createElement('div');d.style='position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,rgba(255,0,0,.1)0,rgba(255,0,0,.1)1px,transparent 1px,transparent 100px),repeating-linear-gradient(0deg,rgba(255,0,0,.1)0,rgba(255,0,0,.1)1px,transparent 1px,transparent 100px);pointer-events:none;z-index:9999';d.onclick=function(){this.remove()};document.body.appendChild(d)})();

javascript:(function(){document.querySelectorAll('style,link[rel="stylesheet"]').forEach(el=>el.remove());document.querySelectorAll('*').forEach(el=>el.removeAttribute('style'))})();

⚡ Performance Analysis

javascript:(function(){document.querySelectorAll('img').forEach(img=>{var info=document.createElement('div');info.style='position:absolute;background:red;color:white;padding:2px;font-size:10px;z-index:9999';info.textContent=img.naturalWidth+'x'+img.naturalHeight;img.parentElement.style.position='relative';img.parentElement.appendChild(info)})})();

javascript:(function(){var r={img:document.images.length,script:document.scripts.length,style:document.styleSheets.length,iframe:document.querySelectorAll('iframe').length};alert('Resources:\n'+Object.entries(r).map(([k,v])=>k+': '+v).join('\n'))})();

javascript:(function(){document.querySelectorAll('img[loading="lazy"],img[data-src]').forEach(img=>{img.style.border='3px solid orange';img.title='Lazy loaded'})})();

🔍 SEO & Accessibility

javascript:(function(){var h=[];document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(el=>{h.push(el.tagName+': '+el.textContent.trim())});alert(h.join('\n'))})();

javascript:(function(){document.querySelectorAll('img').forEach(img=>{if(!img.alt){img.style.border='5px solid red';img.title='Missing alt text'}else{img.style.border='5px solid green';img.title='Alt: '+img.alt}})})();

javascript:(function(){var meta=[];document.querySelectorAll('meta').forEach(m=>{meta.push((m.name||m.property||'charset')+': '+(m.content||m.charset))});alert('Meta Tags:\n'+meta.join('\n'))})();

📝 Form & Input Tools

javascript:(function(){document.querySelectorAll('input[type="hidden"]').forEach(el=>{el.type='text';el.style.background='yellow';el.style.border='2px solid red'})})();

javascript:(function(){document.querySelectorAll('input[type="text"]').forEach(i=>i.value='Test');document.querySelectorAll('input[type="email"]').forEach(i=>i.value='test@example.com');document.querySelectorAll('textarea').forEach(t=>t.value='Test content')})();

javascript:(function(){document.querySelectorAll('input[type="password"]').forEach(el=>el.type='text')})();

🛠️ Utility Tools

javascript:(function(){document.designMode=document.designMode=='on'?'off':'on';alert('Design mode: '+document.designMode)})();

javascript:(function(){alert('Cookies:\n'+document.cookie.split(';').join('\n'))})();

javascript:(function(){var ls=[];for(var i in localStorage){ls.push(i+': '+localStorage[i].substring(0,50)+'...')};alert('LocalStorage:\n'+ls.join('\n'))})();

javascript:(function(){var start=Date.now();setInterval(function(){document.title=Math.floor((Date.now()-start)/1000)+'s'},1000)})();

javascript:(function(){window.open('https://api.qrserver.com/v1/create-qr-code/?size=200x200&data='+encodeURIComponent(location.href))})();

Installation Tips

Creating Your Own Developer Bookmarklets

These examples are just the beginning. You can create custom bookmarklets for your specific development workflow:

• API endpoint testers
• Environment switchers
• Feature flag toggles
• Debug mode activators
• Performance profilers
• A/B test switchers