Real-time Responsive Auditing
The Breakpoint Tester Bookmarklet is a lightweight JavaScript injection tool. Unlike an iframe-based resizer, this runs natively on the page, allowing you to use your browser's own window resizing to see exactly how the DOM reacts at every pixel.
Why use a Bookmarklet?
- No Installation: No bulky browser extensions required.
- Cross-Domain: Works on any site, even those that block iframes (X-Frame-Options).
- Dynamic: Updates instantly as you drag your browser window.
- Safe: The script only runs when you click it and disappears when you refresh the page.
The Source Code
For transparency, here is the script contained within the bookmarklet:
javascript:(function(){
const el = document.createElement('div');
el.style.cssText = 'position:fixed;top:0;left:0;...';
const update = () => {
el.innerText = `Width: ${window.innerWidth}px`;
};
window.onresize = update;
document.body.appendChild(el);
})();