Breakpoint Overlay

Bookmarklet Generator

Configure your overlay, generate a bookmarklet, and drop it into your browser toolbar for instant breakpoint debugging.

Prefer the live demo? Visit /demo.

Generator

Overlay Config

Script URL

Pick a version and adjust the base CDN URL.

Resolved URL: https://unpkg.com/breakpoint-overlay/dist/index.iife.js

Match Strategy

Debounce (ms)

Hotkey

Focus capture and press a key combo. Press Escape to cancel.

Breakpoints

Label

Min

Max

Label

Min

Max

Label

Min

Max

Advanced JSON

Bookmarklet Output

Copy this URL into a new bookmark. Dragging this: Breakpoint Overlay into your bookmarks bar works too.

javascript:(function(){const url="https://unpkg.com/breakpoint-overlay/dist/index.iife.js";const config={"breakpoints":[{"id":"mobile","label":"Mobile","maxWidth":767},{"id":"tablet","label":"Tablet","minWidth":768,"maxWidth":1199},{"id":"desktop","label":"Desktop","minWidth":1200}],"hotkey":"alt+shift+o","debounceMs":150};const run=function(){const api=window.BreakpointOverlay;if(!api){return;}if(!window.__bpOverlay){window.__bpOverlay=api.initOverlay(config);}else{window.__bpOverlay.updateConfig(config);}window.__bpOverlay.toggle();};if(window.BreakpointOverlay){run();return;}var script=document.createElement('script');script.src=url;script.onload=run;document.head.appendChild(script);})();

Ready to paste.

Decoded Snippet

Review the JavaScript that the bookmarklet will execute.

(function(){const url="https://unpkg.com/breakpoint-overlay/dist/index.iife.js";const config={"breakpoints":[{"id":"mobile","label":"Mobile","maxWidth":767},{"id":"tablet","label":"Tablet","minWidth":768,"maxWidth":1199},{"id":"desktop","label":"Desktop","minWidth":1200}],"hotkey":"alt+shift+o","debounceMs":150};const run=function(){const api=window.BreakpointOverlay;if(!api){return;}if(!window.__bpOverlay){window.__bpOverlay=api.initOverlay(config);}else{window.__bpOverlay.updateConfig(config);}window.__bpOverlay.toggle();};if(window.BreakpointOverlay){run();return;}var script=document.createElement('script');script.src=url;script.onload=run;document.head.appendChild(script);})();