Bookmarklets for Testers

A comprehensive collection of browser bookmarklets designed specifically for testers and QA engineers to enhance productivity, improve test coverage, and gain deeper insights into web applications under test.

What are browser bookmarklets?

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. Bookmarklets are unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Source: Wikipedia

How are browser bookmarklets useful for testers?

Bookmarklets are powerful tools that help testers and QA engineers work more efficiently. They run JavaScript code directly in the context of the current webpage, allowing you to:

Inspect and analyze web pages instantly without opening developer tools
Retrieve performance metrics like page load time, render time, and resource loading
Test accessibility by checking for missing alt text, form labels, ARIA attributes, and more
Validate security by finding insecure content, checking external links, and inspecting cookies
Debug issues by highlighting elements, checking tab order, finding broken links, and more
Automate repetitive tasks like filling forms, clearing storage, or checking SEO meta tags

The beauty of bookmarklets is that they require no installation, work across all browsers, and can be customized to fit your specific testing needs. Whether you're testing for performance, accessibility, security, or general functionality, bookmarklets provide instant insights with a single click.

How do I add these bookmarklets to my browser?

Method 1: Drag and Drop (Easiest)

Simply drag the purple "📌 Drag to Bookmarks Bar" button next to each bookmarklet directly to your browser's bookmarks bar. The bookmarklet will be instantly added with the correct name.

Method 2: Manual Creation

Copy the JavaScript code for the bookmarklet you want to use (click the copy button in the code block)
Right-click on your browser's bookmarks bar and select "Add page" or "Add bookmark"
Give it a descriptive name (e.g., "Performance Metrics")
In the URL field, paste the JavaScript code you copied
Save the bookmark
Click the bookmark whenever you need to use it!

Bookmarklet Collection

51 bookmarklets across 14 categories - from performance testing to test automation readiness.

Performance Testing

Comprehensive Performance Metrics

Get detailed performance metrics including page load time, DOM content loaded, DNS lookup, TCP connection, time to first byte, render time, and number of resources loaded.

javascript:(function(){var p=performance.timing,n=performance.navigation;var load=p.loadEventEnd-p.navigationStart;var dom=p.domContentLoadedEventEnd-p.domContentLoadedEventStart;var dns=p.domainLookupEnd-p.domainLookupStart;var tcp=p.connectEnd-p.connectStart;var ttfb=p.responseStart-p.requestStart;var render=p.domComplete-p.domLoading;var resources=performance.getEntriesByType('resource').length;var msg='=== PERFORMANCE METRICS ===\n\nPage Load Time: '+load+'ms\nDOM Content Loaded: '+dom+'ms\nDNS Lookup: '+dns+'ms\nTCP Connection: '+tcp+'ms\nTime to First Byte: '+ttfb+'ms\nRender Time: '+render+'ms\nResources Loaded: '+resources+'\nNavigation Type: '+(n.type==0?'Normal':n.type==1?'Reload':n.type==2?'Back/Forward':'Other');alert(msg);})();

Find Slow Resources

Identify resources that take more than 1 second to load, helping you pinpoint performance bottlenecks.

javascript:(function(){var resources=performance.getEntriesByType('resource').filter(r=>r.duration>1000).sort((a,b)=>b.duration-a.duration);if(resources.length==0){alert('No slow resources found (>1s)');return;}var msg='=== SLOW RESOURCES (>1s) ===\n\n';resources.forEach(r=>{msg+=r.name.split('/').pop().substring(0,40)+': '+Math.round(r.duration)+'ms\n';});alert(msg);})();

Memory Usage

Check JavaScript heap memory usage to identify potential memory leaks or high memory consumption.

javascript:(function(){if(performance.memory){var m=performance.memory;var used=(m.usedJSHeapSize/1048576).toFixed(2);var total=(m.totalJSHeapSize/1048576).toFixed(2);var limit=(m.jsHeapSizeLimit/1048576).toFixed(2);alert('=== MEMORY USAGE ===\n\nUsed: '+used+' MB\nTotal: '+total+' MB\nLimit: '+limit+' MB\nUsage: '+Math.round((used/limit)*100)+'%');}else{alert('Memory API not available in this browser');}})();

Accessibility Testing

Find Images Without Alt Text

Highlights all images that are missing alt attributes, which is critical for screen reader accessibility.

javascript:(function(){var imgs=document.querySelectorAll('img:not([alt])');if(imgs.length==0){alert('All images have alt attributes!');return;}imgs.forEach(img=>{img.style.border='5px solid red';img.style.outline='5px solid yellow';});alert('Found '+imgs.length+' images without alt text (highlighted in red/yellow)');})();

Check Color Contrast

Get color information for the element at the center of the viewport to manually check contrast ratios.

javascript:(function(){var el=document.elementFromPoint(window.innerWidth/2,window.innerHeight/2);if(!el){alert('No element found');return;}var bg=window.getComputedStyle(el).backgroundColor;var color=window.getComputedStyle(el).color;var font=window.getComputedStyle(el).fontSize;alert('=== COLOR INFO ===\n\nBackground: '+bg+'\nText Color: '+color+'\nFont Size: '+font+'\n\nCheck contrast at:\nwebaim.org/resources/contrastchecker');})();

Find Missing Form Labels

Identifies form inputs, textareas, and selects that lack proper labels, which affects accessibility.

javascript:(function(){var inputs=document.querySelectorAll('input:not([type="hidden"]):not([type="submit"]):not([type="button"]),textarea,select');var missing=[];inputs.forEach(input=>{var id=input.id;var hasLabel=id&&document.querySelector('label[for="'+id+'"]');var wrappedInLabel=input.closest('label');var ariaLabel=input.getAttribute('aria-label');if(!hasLabel&&!wrappedInLabel&&!ariaLabel){missing.push(input);input.style.border='3px solid red';}});alert('Found '+missing.length+' form fields without labels (highlighted in red)');})();

Check Tab Order

Visualizes the tab order of focusable elements on the page with numbered badges.

javascript:(function(){var focusable=document.querySelectorAll('a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])');var counter=1;focusable.forEach(el=>{var badge=document.createElement('div');badge.textContent=counter++;badge.style.cssText='position:absolute;background:red;color:white;padding:2px 6px;font-size:12px;font-weight:bold;z-index:999999;border-radius:3px;';el.style.position='relative';el.appendChild(badge);});alert('Tab order visualized! '+focusable.length+' focusable elements found.');})();

ARIA Attributes Report

Generates a report of all ARIA attributes used on the page, grouped by role.

javascript:(function(){var ariaElements=document.querySelectorAll('[role],[aria-label],[aria-labelledby],[aria-describedby],[aria-hidden]');var report='=== ARIA REPORT ===\n\nElements with ARIA: '+ariaElements.length+'\n\n';var roles={};ariaElements.forEach(el=>{var role=el.getAttribute('role')||'(label only)';roles[role]=(roles[role]||0)+1;});for(var r in roles){report+=r+': '+roles[r]+'\n';}alert(report);})();

Disabled Interaction Finder

Highlights elements that look clickable but are disabled, revealing misleading UI patterns.

How to use: Orange dashed outlines indicate elements with pointer cursor but disabled state. Validate UX clarity and accessibility.

javascript:(()=>{document.querySelectorAll('*').forEach(el=>{if(getComputedStyle(el).cursor==='pointer'&&el.hasAttribute('disabled')){el.style.outline='2px dashed orange';}});alert('Disabled interactive elements highlighted.');})();

Visual & UI Testing

Highlight All Links

Highlights all links on the page with different colors to make them easily visible.

javascript:(function(){var links=document.querySelectorAll('a');var colors=['red','blue','green','purple','orange'];links.forEach((link,i)=>{link.style.backgroundColor=colors[i%colors.length];link.style.color='white';link.style.padding='2px';});alert('Highlighted '+links.length+' links');})();

Show Element Boundaries

Adds visible outlines to all elements, making it easy to see the page structure and identify layout issues.

javascript:(function(){var style=document.createElement('style');style.innerHTML='*{outline:1px solid rgba(255,0,0,0.3)!important}div{outline-color:rgba(0,255,0,0.3)!important}span{outline-color:rgba(0,0,255,0.3)!important}';document.head.appendChild(style);alert('Element boundaries visible! (Red=all, Green=divs, Blue=spans)');})();

Find Overflowing Elements

Identifies elements where content overflows their containers, which can indicate layout problems.

javascript:(function(){var overflowing=[];document.querySelectorAll('*').forEach(el=>{if(el.scrollWidth>el.clientWidth||el.scrollHeight>el.clientHeight){overflowing.push(el);el.style.outline='3px solid red';}});alert('Found '+overflowing.length+' overflowing elements (highlighted in red)');})();

Grayscale Mode

Applies a grayscale filter to the entire page to test color-blind accessibility.

javascript:(function(){var style=document.getElementById('grayscale-test');if(style){style.remove();alert('Grayscale mode disabled');}else{style=document.createElement('style');style.id='grayscale-test';style.innerHTML='html{filter:grayscale(100%)!important}';document.head.appendChild(style);alert('Grayscale mode enabled! Click again to disable.');}})();

Viewport Size Display

Shows a persistent display of the current viewport dimensions that updates on resize.

javascript:(function(){var div=document.createElement('div');div.innerHTML='Viewport: '+window.innerWidth+' x '+window.innerHeight;div.style.cssText='position:fixed;top:10px;right:10px;background:black;color:white;padding:10px;z-index:999999;font-size:18px;font-family:monospace;';document.body.appendChild(div);window.addEventListener('resize',function(){div.innerHTML='Viewport: '+window.innerWidth+' x '+window.innerHeight;});})();

Form Testing

Auto-Fill Test Forms

Automatically fills form fields with test data to speed up form testing.

javascript:(function(){document.querySelectorAll('input[type="text"],input:not([type])').forEach(el=>{el.value='Test User';});document.querySelectorAll('input[type="email"]').forEach(el=>{el.value='test@example.com';});document.querySelectorAll('input[type="tel"]').forEach(el=>{el.value='1234567890';});document.querySelectorAll('input[type="number"]').forEach(el=>{el.value='123';});document.querySelectorAll('textarea').forEach(el=>{el.value='This is test content for textarea field.';});document.querySelectorAll('select').forEach(el=>{if(el.options.length>1)el.selectedIndex=1;});alert('Form fields auto-filled with test data!');})();

Show Form Field Info

Displays a summary of all form fields on the page, grouped by type.

javascript:(function(){var inputs=document.querySelectorAll('input,textarea,select');var report='=== FORM FIELDS ===\n\nTotal Fields: '+inputs.length+'\n\n';var types={};inputs.forEach(input=>{var type=input.type||input.tagName.toLowerCase();types[type]=(types[type]||0)+1;});for(var t in types){report+=t+': '+types[t]+'\n';}alert(report);})();

Find Required Fields

Highlights all form fields marked as required.

javascript:(function(){var required=document.querySelectorAll('[required]');required.forEach(el=>{el.style.backgroundColor='yellow';el.style.border='2px solid red';});alert('Found '+required.length+' required fields (highlighted in yellow with red border)');})();

Test Max Length Inputs

Fills inputs with their maximum allowed length to test length validation.

javascript:(function(){var inputs=document.querySelectorAll('input[maxlength],textarea[maxlength]');inputs.forEach(input=>{var max=input.getAttribute('maxlength');input.value='X'.repeat(max);input.style.border='2px solid orange';});alert('Filled '+inputs.length+' fields with maximum length text');})();

Security Testing

Find Password Fields Without Autocomplete

Identifies password fields that may have insecure autocomplete settings.

javascript:(function(){var pwdFields=document.querySelectorAll('input[type="password"]');var insecure=[];pwdFields.forEach(pwd=>{var autocomplete=pwd.getAttribute('autocomplete');if(autocomplete!=='off'&&autocomplete!=='new-password'&&autocomplete!=='current-password'){insecure.push(pwd);pwd.style.border='3px solid red';}});alert('Found '+pwdFields.length+' password fields.\n'+insecure.length+' may have autocomplete issues (highlighted).');})();

Check Mixed Content

Finds HTTP resources on HTTPS pages, which can cause security warnings.

javascript:(function(){var insecure=[];document.querySelectorAll('img,script,link,iframe').forEach(el=>{var src=el.src||el.href;if(src&&src.startsWith('http://')){insecure.push(src);el.style.border='3px solid red';}});if(insecure.length>0){alert('WARNING: Found '+insecure.length+' insecure HTTP resources on HTTPS page!');}else{alert('No mixed content found!');}})();

Cookie Inspector

Displays all cookies set for the current page.

javascript:(function(){var cookies=document.cookie.split(';');if(cookies.length==0||document.cookie==''){alert('No cookies found!');return;}var msg='=== COOKIES ('+cookies.length+') ===\n\n';cookies.forEach(c=>{msg+=c.trim()+'\n';});alert(msg);})();

Check External Links

Identifies external links and highlights those missing security attributes (noopener/noreferrer).

javascript:(function(){var external=document.querySelectorAll('a[href^="http"]:not([href*="'+location.hostname+'"])');external.forEach(link=>{link.style.backgroundColor='yellow';var rel=link.getAttribute('rel')||'';if(!rel.includes('noopener')||!rel.includes('noreferrer')){link.style.border='3px solid red';}});alert('Found '+external.length+' external links.\nRed border = missing noopener/noreferrer');})();

PII Leak Detector

Scans page content for potential personally identifiable information exposure such as phone numbers, emails, tokens, and passwords.

How to use: Check console for warnings about potential PII. Cross-check each finding to assess data exposure risk. Refresh page to reset.

javascript:(()=>{const regex=/\b\d{10}|@|token|password/i;document.body.innerText.split(/\s+/).forEach(word=>{if(regex.test(word))console.warn('Possible PII:',word);});alert('PII scan complete. Check console for warnings.');})();

SEO Testing

SEO Meta Tags Check

Validates presence and length of key SEO meta tags.

javascript:(function(){var title=document.querySelector('title');var desc=document.querySelector('meta[name="description"]');var keywords=document.querySelector('meta[name="keywords"]');var og=document.querySelectorAll('meta[property^="og:"]');var canonical=document.querySelector('link[rel="canonical"]');var h1=document.querySelectorAll('h1');var msg='=== SEO CHECK ===\n\n';msg+='Title: '+(title?title.textContent.length+' chars':'MISSING!')+'\n';msg+='Description: '+(desc?desc.content.length+' chars':'MISSING!')+'\n';msg+='Keywords: '+(keywords?'Present':'Missing')+'\n';msg+='Open Graph: '+og.length+' tags\n';msg+='Canonical: '+(canonical?'Present':'Missing')+'\n';msg+='H1 tags: '+h1.length+(h1.length!=1?' (should be 1!)':' ✓')+'\n';alert(msg);})();

Heading Structure

Displays the hierarchical structure of all headings on the page.

javascript:(function(){var headings=document.querySelectorAll('h1,h2,h3,h4,h5,h6');var structure='=== HEADING STRUCTURE ===\n\n';var counts={h1:0,h2:0,h3:0,h4:0,h5:0,h6:0};headings.forEach(h=>{var level=h.tagName.toLowerCase();counts[level]++;var indent='  '.repeat(parseInt(h.tagName[1])-1);structure+=indent+h.tagName+': '+h.textContent.substring(0,50)+'\n';});structure+='\nCounts: H1='+counts.h1+' H2='+counts.h2+' H3='+counts.h3+' H4='+counts.h4+' H5='+counts.h5+' H6='+counts.h6;alert(structure);})();

Check Alt Text on All Images

Provides a complete report of images with alt text, empty alt text, and missing alt text.

javascript:(function(){var imgs=document.querySelectorAll('img');var withAlt=0,withoutAlt=0,emptyAlt=0;imgs.forEach(img=>{var alt=img.getAttribute('alt');if(alt===null){withoutAlt++;img.style.border='5px solid red';}else if(alt.trim()==''){emptyAlt++;img.style.border='5px solid orange';}else{withAlt++;}});alert('=== IMAGE ALT TEXT ===\n\nTotal Images: '+imgs.length+'\nWith Alt: '+withAlt+'\nEmpty Alt: '+emptyAlt+' (orange)\nNo Alt: '+withoutAlt+' (red)');})();

Cookie & Storage Management

View LocalStorage

Displays all items currently stored in localStorage.

javascript:(function(){if(localStorage.length==0){alert('LocalStorage is empty');return;}var msg='=== LOCALSTORAGE ('+localStorage.length+' items) ===\n\n';for(var i=0;i<localStorage.length;i++){var key=localStorage.key(i);msg+=key+' = '+localStorage.getItem(key).substring(0,50)+'\n';}alert(msg);})();

View SessionStorage

Displays all items currently stored in sessionStorage.

javascript:(function(){if(sessionStorage.length==0){alert('SessionStorage is empty');return;}var msg='=== SESSIONSTORAGE ('+sessionStorage.length+' items) ===\n\n';for(var i=0;i<sessionStorage.length;i++){var key=sessionStorage.key(i);msg+=key+' = '+sessionStorage.getItem(key).substring(0,50)+'\n';}alert(msg);})();

Clear All Storage

Clears localStorage, sessionStorage, and cookies (with confirmation).

javascript:(function(){if(confirm('Clear ALL storage (cookies, localStorage, sessionStorage)?')){localStorage.clear();sessionStorage.clear();document.cookie.split(';').forEach(c=>{document.cookie=c.split('=')[0]+'=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';});alert('All storage cleared!');}})();

Storage Size Calculator

Calculates and displays the size of localStorage, sessionStorage, and cookies.

javascript:(function(){var lsSize=0,ssSize=0;for(var key in localStorage){lsSize+=localStorage[key].length;}for(var key in sessionStorage){ssSize+=sessionStorage[key].length;}var cookieSize=document.cookie.length;alert('=== STORAGE SIZE ===\n\nLocalStorage: '+(lsSize/1024).toFixed(2)+' KB\nSessionStorage: '+(ssSize/1024).toFixed(2)+' KB\nCookies: '+(cookieSize/1024).toFixed(2)+' KB\nTotal: '+((lsSize+ssSize+cookieSize)/1024).toFixed(2)+' KB');})();

DOM Inspection

Count Elements by Tag

Provides a count of all HTML elements on the page, sorted by frequency.

javascript:(function(){var tags={};document.querySelectorAll('*').forEach(el=>{var tag=el.tagName.toLowerCase();tags[tag]=(tags[tag]||0)+1;});var sorted=Object.entries(tags).sort((a,b)=>b[1]-a[1]);var msg='=== ELEMENT COUNT ===\n\nTotal: '+document.querySelectorAll('*').length+'\n\n';sorted.slice(0,15).forEach(([tag,count])=>{msg+=tag+': '+count+'\n';});alert(msg);})();

Find Hidden Elements

Highlights all elements that are hidden via CSS or HTML attributes.

javascript:(function(){var hidden=document.querySelectorAll('[hidden],[style*="display:none"],[style*="display: none"],[style*="visibility:hidden"],[style*="visibility: hidden"]');hidden.forEach(el=>{el.style.outline='3px dashed purple';});alert('Found '+hidden.length+' hidden elements (outlined in purple dashes)');})();

Find Empty Elements

Identifies empty div, span, p, section, and article elements that may indicate issues.

javascript:(function(){var empty=[];document.querySelectorAll('div,span,p,section,article').forEach(el=>{if(el.children.length==0&&el.textContent.trim()==''){empty.push(el);el.style.backgroundColor='rgba(255,0,0,0.3)';}});alert('Found '+empty.length+' empty elements (highlighted in red)');})();

Z-Index Inspector

Shows all elements with z-index values, sorted by value.

javascript:(function(){var elements=[];document.querySelectorAll('*').forEach(el=>{var zIndex=window.getComputedStyle(el).zIndex;if(zIndex!='auto'&&zIndex!=0){elements.push({el:el,z:parseInt(zIndex)});}});elements.sort((a,b)=>b.z-a.z);var msg='=== Z-INDEX REPORT ===\n\nElements with z-index: '+elements.length+'\n\n';elements.slice(0,10).forEach(item=>{msg+=item.el.tagName+'.'+item.el.className+': '+item.z+'\n';});alert(msg);})();

Network & Resources

List All External Resources

Groups all external resources by domain to identify third-party dependencies.

javascript:(function(){var resources=performance.getEntriesByType('resource');var external=resources.filter(r=>!r.name.includes(location.hostname));var msg='=== EXTERNAL RESOURCES ===\n\nTotal: '+external.length+'\n\n';var domains={};external.forEach(r=>{var url=new URL(r.name);domains[url.hostname]=(domains[url.hostname]||0)+1;});for(var d in domains){msg+=d+': '+domains[d]+'\n';}alert(msg);})();

Find Largest Resources

Identifies the largest resources by transfer size to find optimization opportunities.

javascript:(function(){var resources=performance.getEntriesByType('resource').filter(r=>r.transferSize).sort((a,b)=>b.transferSize-a.transferSize);if(resources.length==0){alert('No resource size info available');return;}var msg='=== LARGEST RESOURCES ===\n\n';resources.slice(0,10).forEach(r=>{var size=(r.transferSize/1024).toFixed(2);var name=r.name.split('/').pop().substring(0,30);msg+=name+': '+size+' KB\n';});alert(msg);})();

Check All Links

Analyzes all links on the page and categorizes them as internal, external, mailto, tel, or broken.

javascript:(function(){var links=document.querySelectorAll('a[href]');var broken=0,external=0,internal=0,mailto=0,tel=0;links.forEach(link=>{var href=link.href;if(href.startsWith('mailto:')){mailto++;}else if(href.startsWith('tel:')){tel++;}else if(href.includes(location.hostname)){internal++;}else if(href.startsWith('http')){external++;}if(href=='#'||href==location.href+'#'){link.style.border='2px solid red';broken++;}});alert('=== LINK ANALYSIS ===\n\nTotal Links: '+links.length+'\nInternal: '+internal+'\nExternal: '+external+'\nMailto: '+mailto+'\nTel: '+tel+'\nEmpty/Broken: '+broken);})();

Debugging Utilities

Console Log Viewer

Captures console.log output for 5 seconds and displays it in an alert.

javascript:(function(){var oldLog=console.log;var logs=[];console.log=function(){logs.push(Array.from(arguments).join(' '));oldLog.apply(console,arguments);};setTimeout(function(){alert('=== CONSOLE LOGS ===\n\n'+logs.join('\n')+'\n\nCaptured '+logs.length+' logs');console.log=oldLog;},5000);alert('Capturing console logs for 5 seconds...');})();

JavaScript Error Detector

Monitors for JavaScript errors for 10 seconds and reports any found.

javascript:(function(){var errors=[];window.addEventListener('error',function(e){errors.push(e.message);});setTimeout(function(){if(errors.length>0){alert('=== JAVASCRIPT ERRORS ===\n\n'+errors.join('\n'));}else{alert('No JavaScript errors detected in the last 10 seconds!');}},10000);alert('Monitoring for JavaScript errors for 10 seconds...');})();

Show All Global Variables

Lists all global variables defined in the window object.

javascript:(function(){var globals=[];for(var prop in window){if(window.hasOwnProperty(prop)){globals.push(prop);}}alert('=== GLOBAL VARIABLES ===\n\nCount: '+globals.length+'\n\n'+globals.sort().slice(0,50).join(', ')+(globals.length>50?'\n\n...and '+(globals.length-50)+' more':''));})();

Application State Snapshot

Captures current client-side state to help reproduce bugs accurately including URL, cookies, storage keys, and auth token presence.

How to use: Use console.table for quick overview. Copy console.log output into bug reports. Compare snapshots between working vs broken states.

javascript:(()=>{const snapshot={url:location.href,cookies:document.cookie,localStorage:Object.keys(localStorage),sessionStorage:Object.keys(sessionStorage),hasAuthToken:Object.keys(localStorage).some(k=>k.toLowerCase().includes('token'))};console.table(snapshot);console.log('Full Snapshot:',snapshot);alert('State snapshot captured. Check console.');})();

SPA Route Change Tracker

Detects and logs route changes in Single Page Applications without page reloads.

How to use: Observe route changes in console without page reloads. Identify unexpected navigations. Correlate routing with UI bugs. Refresh page to reset.

javascript:(()=>{const originalPush=history.pushState;history.pushState=function(){console.log('[Route Change]',arguments);return originalPush.apply(this,arguments);};window.addEventListener('popstate',()=>console.log('[Popstate]',location.href));alert('SPA Route tracking enabled. Check console.');})();

Click Rage Detector

Identifies UI elements causing user frustration by tracking rapid repeated clicks.

How to use: Red outlined elements indicate frustration points (5+ clicks). Console warnings show problematic elements. Validate responsiveness and feedback issues. Refresh page to reset.

javascript:(()=>{let clicks={};document.addEventListener('click',e=>{const key=e.target.tagName+e.target.className;clicks[key]=(clicks[key]||0)+1;if(clicks[key]>=5){e.target.style.outline='3px solid red';console.warn('Click Rage Detected:',e.target);}});alert('Click rage detection active.');})();

Silent Error Detector

Catches errors swallowed by try/catch blocks or unhandled promise rejections.

How to use: Monitor console for suppressed issues. Link errors to user actions. Keep console open during testing. Refresh page to reset.

javascript:(()=>{window.addEventListener('error',e=>console.error('Global Error:',e.error));window.addEventListener('unhandledrejection',e=>console.error('Unhandled Promise:',e.reason));alert('Silent error detection enabled.');})();

Mobile & Responsive Testing

Touch Event Visualizer

Visualizes touch events with red dots that appear where you touch the screen.

javascript:(function(){document.addEventListener('touchstart',function(e){for(var i=0;i<e.touches.length;i++){var touch=e.touches[i];var dot=document.createElement('div');dot.style.cssText='position:fixed;width:40px;height:40px;background:rgba(255,0,0,0.5);border-radius:50%;pointer-events:none;z-index:999999;left:'+(touch.clientX-20)+'px;top:'+(touch.clientY-20)+'px;';document.body.appendChild(dot);setTimeout(function(){dot.remove();},1000);}});alert('Touch events will now be visualized with red dots');})();

API Testing

Quick API Test

Test a GET request to any API endpoint and view the JSON response in the console.

javascript:(function(){var url=prompt('Enter API endpoint URL:');if(!url)return;fetch(url).then(r=>r.json()).then(data=>{console.log(data);alert('Response received! Check console for data. Status: OK');}).catch(err=>{alert('Error: '+err.message);});})();

POST Request Tester

Test a POST request with custom JSON data to any API endpoint.

javascript:(function(){var url=prompt('Enter API endpoint:');if(!url)return;var data=prompt('Enter JSON data:','{"key":"value"}');if(!data)return;fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:data}).then(r=>r.json()).then(data=>{console.log(data);alert('POST successful! Check console.');}).catch(err=>{alert('Error: '+err.message);});})();

Network Failure Simulator

Randomly fails 30% of fetch API calls to test client-side error handling and resilience.

How to use: Observe error handling and retry logic. Verify fallback UI and messaging. Watch console errors for unhandled cases. Refresh page to reset.

javascript:(()=>{const originalFetch=window.fetch;window.fetch=(...args)=>{if(Math.random()<0.3){return Promise.reject(new Error('Simulated network failure'));}return originalFetch(...args);};alert('Random network failures enabled (30%).');})();

Slow API Injection Tool

Delays all fetch API calls by 3 seconds to expose loading and timeout issues.

How to use: Observe loaders, skeletons, and spinners. Detect UI freezes or double submissions. Test timeout handling. Refresh page to reset.

javascript:(()=>{const originalFetch=window.fetch;window.fetch=(...args)=>new Promise(resolve=>{setTimeout(()=>resolve(originalFetch(...args)),3000);});alert('API calls delayed by 3 seconds.');})();

Analytics & Tracking

Analytics Event Logger

Intercepts and logs all analytics events pushed to dataLayer for validation.

How to use: Validate event names and payloads in console. Detect duplicate or missing events. Verify tracking implementation correctness.

javascript:(()=>{const originalPush=window.dataLayer?.push;if(!originalPush)return alert('No dataLayer found');window.dataLayer.push=function(event){console.log('Analytics Event:',event);return originalPush.call(this,event);};alert('Analytics event logging enabled.');})();

Test Automation

Test-ID Coverage Checker

Highlights interactive elements missing data-testid attributes to improve test automation readiness.

How to use: Purple outlines indicate elements without data-testid. Use findings to improve testability standards for automation engineers.

javascript:(()=>{document.querySelectorAll('button, input, a').forEach(el=>{if(!el.getAttribute('data-testid')){el.style.outline='2px solid purple';}});alert('Elements missing data-testid highlighted in purple.');})();

Contributing

Have a useful bookmarklet for testers? Feel free to contribute by opening a pull request! Let's build the most comprehensive collection of testing bookmarklets together.

License

MIT License - Feel free to use, modify, and share these bookmarklets.