Useful bookmarklets

bookmarklets.html

<h1>Useful bookmarklets</h1>
<ul>

<li><a href="javascript:(function() { const urls = ['http://localhost:3000', 'https://produktion.com']; const defaultURL = urls[0];const currentOrigin = window.location.origin;const currentIndex = urls.indexOf(currentOrigin);const nextURL = currentIndex === -1 ? defaultURL : urls[(currentIndex + 1) % urls.length];window.open(window.location.href.replace(currentOrigin, nextURL));})()">Open the current URL but in a different environments</a></li>

<li><a href="javascript:(function() { const selector=prompt('Selector','.');const all=document.querySelectorAll(selector);console.log(all),[...all].map((e=>e.classList.add('debug-outline')));var newScript=document.createElement('style'),content=document.createTextNode('.debug-outline { outline: 1px solid #f0f; }');newScript.appendChild(content);var bodyClass=document.getElementsByTagName('head')[0];bodyClass.insertBefore(newScript,bodyClass.childNodes[2]),window.speechSynthesis.speak(new SpeechSynthesisUtterance(`${all.length} found`)),setTimeout((()=>{newScript.remove(),[...all].map((e=>e.classList.remove('debug-outline')))}),5e3);}());">Evaluate a query selector, log the result, add a debug-outline, and read out the number of results</a></li>

<li><a href="javascript:(function() { const beep = () => { const audioCtx = new (window.AudioContext || window.webkitAudioContext)();const oscillator = audioCtx.createOscillator(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); oscillator.connect(audioCtx.destination); oscillator.start(); setTimeout(() => oscillator.stop(), 200); }; let countdown = 3; const interval = setInterval(() => { countdown--; if (countdown <= 0) {clearInterval(interval);debugger; } else {beep(); } }, 1000);})();">After a 3-second countdown, pause the page in the debugger (great when debugging overlays, tooltips, drag and drop)</a></li>

<li><a href="javascript:(function() { const images = Array.from(document.querySelectorAll('img')).map(img => img.src); window.open().document.write(images.map(src => `<img src='${src}' style='max-width:100%;'>`).join(''));})();">View all images on the page in a new tab</a></li>
  </ul>