Debug CSS using Bookmarklet

Check role

!function(){var e=document.querySelector("#role-debug");if(e)e.remove();else{var o=document.createElement("style");o.id="role-debug",o.innerHTML='[role="button"]:before, [role="link"]:before { content:"🚨 ROLE:" attr(role); border:2px solid darkred; color:darkred; display: inline-block; padding: 0 5px; margin: 2px 5px 2px 0; border-radius: 5px; background: white; font-size: 16px; font-family: sans-serif; font-weight: bold; } button[role="button"]:before, a[role="link"]:before { content:"⚠️ ROLE:" attr(role); border-color:orange; color:black; }',document.head.appendChild(o)}}();

(function () {
    var ariaRef = document.querySelector('#aria-patterns');
    if (ariaRef) ariaRef.remove();
    else {
        var ariaPattern = document.createElement('style');
        ariaPattern.id = 'aria-patterns';
        ariaPattern.innerHTML =
            '[role="menu"]>[role="menuitem"]>a, [role="menu"]>[role="menuitemcheckbox"]>a, [role="menu"]>[role="menuItem"]>a, [role="menu"]>[role="menuItemCheckbox"]>a { outline:2px solid red; } [role="menu"]>[role="menuitem"]>a:before, [role="menu"]>[role="menuitemcheckbox"]>a:before, [role="menu"]>[role="menuItem"]>a:before, [role="menu"]>[role="menuItemCheckbox"]>a:before { font-weight: bold; display: inline-block; margin-right: 5px; } [role="menu"]>[role="menuitem"]>a:before, [role="menu"]>[role="menuItem"]>a:before { content:"🚨 Link is not focusable, role=\'menuitem\' is applied to parent element"; } [role="menu"]>[role="menuitemcheckbox"]>a:before, [role="menu"]>[role="menuItemCheckbox"]>a:before { content:"🚨 Link is not focusable, role=\'menuitemcheckbox\' is applied to parent element"; } [role="menu"]>[role="menuitem"]>a[tabindex="0"]:before, [role="menu"]>[role="menuItem"]>a[tabindex="0"]:before, [role="menu"]>[role="menuitem"]>a[href]:before, [role="menu"]>[role="menuItem"]>a[href]:before { content:"🚨 Link is focusable, role=\'menuitem\' is applied to parent element"; } [role="menu"]>[role="menuitemcheckbox"]>a[tabindex="0"]:before, [role="menu"]>[role="menuItemCheckbox"]>a[tabindex="0"]:before, [role="menu"]>[role="menuitemcheckbox"]>a[href]:before, [role="menu"]>[role="menuItemCheckbox"]>a[href]:before { content:"🚨 Link is focusable, role=\'menuitemcheckbox\' is applied to parent element"; }';
        document.head.appendChild(ariaPattern);
    }
})();

(function () {
    var revealRef = document.querySelector('#reveal-roles');
    if (revealRef) revealRef.remove();
    else {
        var revealRoles = document.createElement('style');
        revealRoles.id = 'reveal-roles';
        revealRoles.innerHTML =
            '[role="button"]:before, [role="link"]:before, [role="heading"][aria-level]:before, [role="list"]:before, [role="listitem"]:before, [role="listbox"]:before, [role="option"]:before, [role="checkbox"]:before, [role="radio"]:before, [role="textbox"]:before, [role="main"]:before, [role="navigation"]:before, [role="img"]:before, [role="image"]:before, [role="table"]:before { content:"🚨 ROLE:" attr(role); border:2px solid darkred; color:darkred; display: inline-block; padding: 0 5px; margin: 2px 5px 2px 0; border-radius: 5px; background: #fff; font-size: 16px; font-family: sans-serif; font-weight: bold; } [role="heading"][aria-level]:before { content: "🚨 ROLE:" attr(role) ", LEVEL: " attr(aria-level); } button[role="button"]:before, a[role="link"]:before, h1[role="heading"][aria-level]:before, h2[role="heading"][aria-level]:before, h3[role="heading"][aria-level]:before, h4[role="heading"][aria-level]:before, h5[role="heading"][aria-level]:before, h6[role="heading"][aria-level]:before, ul[role="list"]:before, ol[role="list"]:before, li[role="listitem"]:before, select[role="listbox"]:before, option[role="option"]:before, input[type="checkbox"][role="checkbox"]:before, input[type="radio"][role="radio"]:before, input[type="text"][role="textbox"]:before, input[type="search"][role="textbox"]:before, input[type="email"][role="textbox"]:before, input[type="url"][role="textbox"]:before, input[type="tel"][role="textbox"]:before, main[role="main"]:before, nav[role="navigation"]:before, img[role="img"]:before, img[role="image"]:before, table[role="table"]:before { content:"⚠️ ROLE:" attr(role); border-color:orange; color:#000; } h1[role="heading"][aria-level]:before, h2[role="heading"][aria-level]:before, h3[role="heading"][aria-level]:before, h4[role="heading"][aria-level]:before, h5[role="heading"][aria-level]:before, h6[role="heading"][aria-level]:before { content: "⚠️ ROLE:" attr(role) ", LEVEL: " attr(aria-level); }';
        document.head.appendChild(revealRoles);
    }
})();

(function () {
    var structureRef = document.querySelector('#structure-outliner');
    if (structureRef) structureRef.remove();
    else {
        var revealRoles = document.createElement('style');
        revealRoles.id = 'structure-outliner';
        revealRoles.innerHTML = `html{border:10px solid red}html[lang]{border:10px solid green}html[lang] [lang]{outline:2px solid darkred}html [lang]:before{color:darkred;content:"Change of lang - no default lang set"}html[lang] [lang]:before{content:"Change of lang - "+attr(lang)}article,aside,footer,form,header,main,nav,section{outline:2px dotted pink}article:before,aside:before,footer:before,form:before,header:before,main:before,nav:before,section:before{background:pink;color:#000;padding:5px;font-size:12px}article:before{content:"LM: article"}aside:before{content:"LM: aside"}footer:before{content:"LM: footer"}form:before{content:"LM: form"}header:before{content:"LM: header"}main:before{content:"LM: main"}nav:before{content:"LM: nav"}section:before{content:"LM: section"}article[aria-label]:before{content:"LM: article. Label='" attr(aria-label) "'"}aside[aria-label]:before{content:"LM: aside. Label='" attr(aria-label) "'"}footer[aria-label]:before{content:"LM: footer. Label='" attr(aria-label) "'"}form[aria-label]:before{content:"LM: form. Label='" attr(aria-label) "'"}header[aria-label]:before{content:"LM: header. Label='" attr(aria-label) "'"}main[aria-label]:before{content:"LM: main. Label='" attr(aria-label) "'"}nav[aria-label]:before{content:"LM: nav. Label='" attr(aria-label) "'"}section[aria-label]:before{content:"LM: section. Label='" attr(aria-label) "'"}h1,h2,h3,h4,h5,h6,[role=heading][aria-level]{outline:1px dotted green}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before,[role=heading][aria-level]:before{background:green;color:#fff;padding:5px;font-size:12px}h1:before{content:"h1"}h2:before{content:"h2"}h3:before{content:"h3"}h4:before{content:"h4"}h5:before{content:"h5"}h6:before{content:"h6"}[role=heading][aria-level]:before{content:"ARIA HEADING " attr(aria-level)}ul,li{outline:1px dotted orange}ol,li{outline:1px dashed orange}ul:before,ol:before,li:before{background:orange;color:#fff;padding:5px;font-size:12px}ul:before{content:"ul"}ol:before{content:"ol"}li:before{content:"li"}ul[role=tree]{outline:1px dotted orange}ul[role=tree]:before{background:orange;color:#fff;padding:5px;font-size:12px}li[role=treeitem]{outline:1px dotted orange}li[role=treeitem]:before{background:orange;color:#fff;padding:5px;font-size:12px}ul[role=tree]:before{content:"ul - role=tree"}li[role=treeitem]:before{content:"li - role=treeitem"}table,table th,table td{outline:1px dotted brown}table:before,th:before{background:brown;color:#fff;padding:5px;font-size:12px;display:block}table:before{content:"table"}table[summary]:before{content:"table | 🚨 @summary=" attr(summary)}th:before{content:"th"}th[scope]:before{content:"th | @scope"}th[scope="col"]:before{content:"th | @scope=col"}th[scope="row"]:before{content:"th | @scope=row"}table caption{outline:1px dashed brown}table caption:before{background:brown;color:#fff;padding:5px;font-size:12px}table caption:before{content:"caption"}[role=grid],[role=grid][role=gridcell]{outline:1px dotted darkcyan}[role=grid]:before{background:darkcyan;color:#fff;padding:5px;font-size:12px}[role=grid]:before{content:"[role=grid]"}[role=tablist],[role=tab],[role=tabpanel]{outline:1px dotted purple}[role=tablist]:before,[role=tab]:before,[role=tabpanel]:before{background:purple;color:#fff;padding:5px;font-size:12px}[role=tablist]:before,[role=tab]:before,[role=tabpanel]:before{content:attr(role)}[role=tree]{outline:1px dotted ridgeback}[role=tree]:before{background:ridgeback;color:#000;padding:5px;font-size:12px}[role=treeitem]{outline:1px dotted ridgeback}[role=treeitem]:before{background:ridgeback;color:#000;padding:5px;font-size:12px}fieldset{outline:1px dotted darkgreen}legend{outline:1px dotted darkgreen}fieldset:before{content:"fieldset";background:darkgreen;color:#fff;padding:5px;font-size:12px}legend:before{content:"legend";background:darkgreen;color:#fff;padding:5px;font-size:12px}*[aria-expanded]{border:1px solid olive}*[aria-expanded]:after{font-size:12px;padding:5px;background:olive;color:#fff;display:inline-block;margin-left:5px}*[aria-expanded="true"]:after{content:"+"}*[aria-expanded="false"]:after{content:"-"}*[role=dialog]{border:1px solid darkblue}*[role=dialog]:before{font-size:12px;padding:5px;background:darkblue;color:#fff;display:inline-block;margin-left:5px}*[role=dialog]:before{content:"dialog"}*[role=dialog][aria-label][tabindex]:before{content:"dialog | @aria-label | @tabindex"}*[role=dialog][aria-label][tabindex='-1']:before{content:"dialog | @aria-label | @tabindex=-1"}*[role=dialog][aria-modal=true]:before{content:"dialog | @aria-modal=true"}*[role=dialog][aria-modal=true][aria-labelledby]:before{content:"dialog | @aria-modal=true | @aria-labelledby"}*[role=dialog][aria-modal=true][aria-labelledby][tabindex]:before{content:"dialog | @aria-modal=true | @aria-labelledby | @tabindex"}*[role=dialog][aria-modal=true][aria-labelledby][tabindex='-1']:before{content:"dialog | @aria-modal=true | @aria-labelledby | @tabindex=-1"}*[role=dialog][aria-modal=true][aria-label]:before{content:"dialog | @aria-modal=true | @aria-label"}*[role=dialog][aria-modal=true][aria-label][tabindex]:before{content:"dialog | @aria-modal=true | @aria-label | @tabindex"}*[role=dialog][aria-modal=true][aria-label][tabindex='-1']:before{content:"dialog | @aria-modal=true | @aria-label | @tabindex=-1"}[aria-hidden=true]{outline:2px solid #000;position:relative;opacity:.2}table,ul,ol{outline-width:2px;outline-offset:2px}`;
        document.head.appendChild(revealRoles);
    }
})();

CSS - Edit Content

javascript:(function(){document.designMode=document.designMode==="on"?"off":"on"})();

CSS Disable

javascript:(function(){function d(a,b){a.setAttribute("data-css-storage",b)}function e(a){var b=a.getAttribute("data-css-storage");a.removeAttribute("data-css-storage");return b}var c=[];(function(){var a=document.body,b=a.hasAttribute("data-css-disabled");b?a.removeAttribute("data-css-disabled"):a.setAttribute("data-css-disabled","");return b})()?(c=document.querySelectorAll("[data-css-storage]"),[].slice.call(c).forEach(function(a){"STYLE"===a.tagName?a.innerHTML=e(a):"LINK"===a.tagName?a.disabled=!1:a.style.cssText=e(a)})):(c=document.querySelectorAll("[style], link, style"),[].slice.call(c).forEach(function(a){"STYLE"===a.tagName?(d(a,a.innerHTML),a.innerHTML=""):"LINK"===a.tagName?(d(a,""),a.disabled=!0):(d(a,a.style.cssText),a.style.cssText="")}))})();

CSS find Scroll Horizontal

javascript:(function(d){var w=d.documentElement.offsetWidth,t=d.createTreeWalker(d.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));

CSS SVG Download

javascript:javascript: (function () { var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar-2.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();

Debug CSS

javascript:(function(d,i,l){l=d.getElementById(i);if(l){l.parentNode.removeChild(l);return;}l=d.createElement('link');l.id=i;l.rel='stylesheet';l.type='text/css';l.href='//imbrianj.github.io/debugCSS/debugCSS.css';d.getElementsByTagName('head')[0].appendChild(l);}(document,'debugCSS'))

Debug Layout CSS

javascript:if(!("is_debugging"in window)){is_debugging=!1;var debug_el=document.createElement("style");debug_el.append(document.createTextNode("*:not(g):not(path){background:#000!important;color:white!important;outline:solid #ff6865 thin!important;background-color:#333e4233!important;box-shadow:none!important;filter:none!important}* *:not(g):not(path){background-color:#4a484133!important}* *:not(g):not(path){background-color:#0d886333!important}* * *:not(g):not(path){background-color:#22a6b333!important}* * * *:not(g):not(path){background-color:#745a8033!important}* * * * *:not(g):not(path){background-color:#2b759833!important}* * * * * *:not(g):not(path){background-color:#46802e33!important}* * * * * * *:not(g):not(path){background-color:#6b316a33!important}* * * * * * * *:not(g):not(path){background-color:#36a78f33!important}* * * * * * * * *:not(g):not(path){background-color:#44507733!important}"))}function enable_debugger(){is_debugging||(document.head.appendChild(debug_el),is_debugging=!0)}function disable_debugger(){is_debugging&&(document.head.removeChild(debug_el),is_debugging=!1)}is_debugging?disable_debugger():enable_debugger();

Grid

!function(){let r=document.querySelector("style[grid-system-style]");r||((r=document.createElement("style")).innerHTML+=':root{--column:2;--column-width:164px;--row-height:64px;--row-gutter:8px;--gutter:16px;--gutter:16px;--column-color:rgb(255, 0, 0, 0.1);--gutter-color:rgba(80, 200, 120, 0.1);--line-height:8px;--device_sm:375px;--device_m:600px;--device_l:900px;--device_xl:1200px}#grid-system{pointer-events: none;position:fixed;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);z-index:99999999;height:100vh;width:var(--device_sm);max-width:var(--device_sm)}@media screen and (min-width:600px){#grid-system{width:var(--device_m);max-width:var(--device_m)}}@media screen and (min-width:900px){#grid-system{width:var(--device_l);max-width:var(--device_l)}}@media screen and (min-width:1200px){#grid-system{width:var(--device_xl);max-width:var(--device_xl)}}#grid-system.grid-column{background:linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}@media screen and (min-width:600px){#grid-system.grid-column{--column:4;--column-width:130px}}@media screen and (min-width:900px){#grid-system.grid-column{--column:8;--column-width:85.5px;--gutter:24px}}@media screen and (min-width:1200px){#grid-system.grid-column{--column:12;--column-width:74px}}#grid-system.grid-row{background:linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter))}#grid-system.grid-row.grid-column{background:linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter)),linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}#grid-system.grid-line{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height))}#grid-system.grid-line.grid-column{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height)),linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}#grid-system.grid-line.grid-row{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height)),linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter))}#grid-system.grid-line.grid-row.grid-column{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height)),linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter)),linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}#grid-system-controller{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;padding:16px;background:#fff;border:thin solid #e3e3e3;position:fixed;right:16px;bottom:16px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}#grid-system-controller{z-index:999999999;user-select:none;width: max-content;}#grid-system-controller>header{margin-bottom:24px;font-size:24px;font-weight:600;display:flex}#grid-system-controller .close-grid-controller{margin-left:auto;margin-top:1px;cursor:pointer;color:red}#grid-system-controller>main>label{cursor:pointer}#grid-system-controller>main>label>input{margin: 0 4px 0 0}#grid-system-controller>main{display:flex;gap:8px}',r.setAttribute("grid-system-style",""),document.head.appendChild(r));const e="grid-system";let t=document.getElementById(e),a=document.getElementById("grid-system-controller");function n(){a.remove(),t.remove(),r.remove()}Boolean(t)?n():(t=document.createElement("div"),a=document.createElement("article"),t.id=e,a.id="grid-system-controller",t.className="grid-column",a.innerHTML='\n    <header><span>Grid System</span><span class="close-grid-controller">×</span></header><main><label><input type="checkbox" name="grid-column" checked>Column</label><label><input type="checkbox" name="grid-row" >Row</label><label><input type="checkbox" name="grid-line" >Line</label></main>',document.body.appendChild(t),document.body.appendChild(a),a.querySelectorAll("input").forEach(r=>{r.addEventListener("click",r=>{t.classList.toggle(r.target.name)})}),document.querySelector(".close-grid-controller").addEventListener("click",()=>{n()}))}();

(function () {
  const styleAttr = 'grid-system-style';
  let style = document.querySelector(`style[${styleAttr}]`);


  if(!style) {
    style = document.createElement('style');
    style.innerHTML += `:root{--column:2;--column-width:164px;--row-height:64px;--row-gutter:8px;--gutter:16px;--gutter:16px;--column-color:rgb(255, 0, 0, 0.1);--gutter-color:rgba(80, 200, 120, 0.1);--line-height:8px;--device_sm:375px;--device_m:600px;--device_l:900px;--device_xl:1200px}#grid-system{pointer-events: none;position:fixed;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);z-index:99999999;height:100vh;width:var(--device_sm);max-width:var(--device_sm)}@media screen and (min-width:600px){#grid-system{width:var(--device_m);max-width:var(--device_m)}}@media screen and (min-width:900px){#grid-system{width:var(--device_l);max-width:var(--device_l)}}@media screen and (min-width:1200px){#grid-system{width:var(--device_xl);max-width:var(--device_xl)}}#grid-system.grid-column{background:linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}@media screen and (min-width:600px){#grid-system.grid-column{--column:4;--column-width:130px}}@media screen and (min-width:900px){#grid-system.grid-column{--column:8;--column-width:85.5px;--gutter:24px}}@media screen and (min-width:1200px){#grid-system.grid-column{--column:12;--column-width:74px}}#grid-system.grid-row{background:linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter))}#grid-system.grid-row.grid-column{background:linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter)),linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}#grid-system.grid-line{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height))}#grid-system.grid-line.grid-column{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height)),linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}#grid-system.grid-line.grid-row{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height)),linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter))}#grid-system.grid-line.grid-row.grid-column{background:linear-gradient(0,var(--column-color) var(--line-height),transparent var(--line-height)) 0 0/calc(var(--line-height) + var(--line-height)) calc(var(--line-height) + var(--line-height)),linear-gradient(0,var(--column-color) var(--row-height),transparent var(--row-gutter)) 0 0/calc(var(--row-height) + var(--gutter)) calc(var(--row-height) + var(--gutter)),linear-gradient(90deg,var(--column-color) var(--column-width),transparent var(--gutter)) var(--gutter)/calc(var(--column-width) + var(--gutter)),linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 0/var(--gutter) no-repeat,linear-gradient(90deg,var(--gutter-color) 0,var(--gutter-color) calc(var(--column-width)/ 2)) 100%/var(--gutter) no-repeat}#grid-system-controller{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;padding:16px;background:#fff;border:thin solid #e3e3e3;position:fixed;right:16px;bottom:16px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}#grid-system-controller{z-index:999999999;user-select:none;width: max-content;}#grid-system-controller>header{margin-bottom:24px;font-size:24px;font-weight:600;display:flex}#grid-system-controller .close-grid-controller{margin-left:auto;margin-top:1px;cursor:pointer;color:red}#grid-system-controller>main>label{cursor:pointer}#grid-system-controller>main>label>input{margin: 0 4px 0 0}#grid-system-controller>main{display:flex;gap:8px}`;
    style.setAttribute(styleAttr, '');
    document.head.appendChild(style);
  }

  const id = 'grid-system';
  const controllerID = 'grid-system-controller';
  let container = document.getElementById(id);
  let controller = document.getElementById(controllerID);
  if (Boolean(container)) {
    remove();
    return;
  }
  container = document.createElement('div');
  controller = document.createElement('article');
  container.id = id;
  controller.id = controllerID;
  container.className = 'grid-column';
  controller.innerHTML = `
    <header><span>Grid System</span><span class="close-grid-controller">×</span></header><main><label><input type="checkbox" name="grid-column" checked>Column</label><label><input type="checkbox" name="grid-row" >Row</label><label><input type="checkbox" name="grid-line" >Line</label></main>`;
  document.body.appendChild(container);
  document.body.appendChild(controller);

  controller.querySelectorAll('input').forEach((item) => {
    item.addEventListener('click', (e) => {
      container.classList.toggle(e.target.name);
    });
  });

  // Close button
  document
    .querySelector('.close-grid-controller')
    .addEventListener('click', () => {
      remove();
    });

  function remove() {
    controller.remove();
    container.remove();
    style.remove();
  }
})();

Ruler

!function(){const e="debugging-line";let n=document.getElementById(e);if(Boolean(n))return n.remove()&&window.removeEventListener("mousemove",d)&&window.removeEventListener("click",r);const t=document.createElement("style");(n=n||document.createElement("div")).id=e,t.innerText=`#${e} {position: fixed; z-index: 9999; width: 100vw; height: 100vh; top: 0; left: 0; cursor: none;} #${e} > *:not(#debugging-line-debug) { position: absolute; width: 100%; height: 100%; outline: thin solid rgba(240, 54, 83, 0.9);} #debugging-line-debug { background: rgb(240, 54, 83); color: white; font-family: inherit; display: inline-block; padding: 5px 10px; margin: 5px; border-radius: 5px; position: fixed; right: 0; bottom: 0}`,n.appendChild(t),document.body.appendChild(n);let i=document.createElement("div");i.id="debugging-line-vertical",n.appendChild(i);let o=document.createElement("div");o.id="debugging-line-horizontal",n.appendChild(o);let l=document.createElement("div");function d(e){i.setAttribute("style",`left: ${e.clientX}px`),o.setAttribute("style",`top: ${e.clientY}px`),l.innerText=`${e.clientX||0} x ${e.clientY||0}`}l.id="debugging-line-debug",n.appendChild(l);let c={x:0,y:0};function r(e){console.log(`Location: %c${e.clientX} x ${e.clientY}`,"color: red"),c.x?(console.log(`Size: %c${Math.abs(e.clientX-c.x)} x ${Math.abs(e.clientY-c.y)}`,"color: green"),console.log(""),c.x=0,c.y=0):(c.x=e.clientX,c.y=e.clientY)}window.addEventListener("mousemove",d),window.addEventListener("click",r)}();

(function () {
  const id = 'debugging-line';
  let container = document.getElementById(id);
  if (Boolean(container)) {
    return container.remove() && window.removeEventListener('mousemove', renderLocation) && window.removeEventListener('click', logLocation);
  }
  const styled = document.createElement('style');
  container = container || document.createElement("div");
  container.id = id;
  styled.innerText = `#${id} {position: fixed; z-index: 9999; width: 100vw; height: 100vh; top: 0; left: 0; cursor: none;} #${id} > *:not(#debugging-line-debug) { position: absolute; width: 100%; height: 100%; outline: thin solid rgba(240, 54, 83, 0.9);} #debugging-line-debug { background: rgb(240, 54, 83); color: white; font-family: inherit; display: inline-block; padding: 5px 10px; margin: 5px; border-radius: 5px; position: fixed; right: 0; bottom: 0}`;
  container.appendChild(styled);
  document.body.appendChild(container);

  let containerV = document.createElement("div");
  containerV.id = 'debugging-line-vertical';
  container.appendChild(containerV);

  let containerH = document.createElement("div");
  containerH.id = 'debugging-line-horizontal';
  container.appendChild(containerH);

  let location = document.createElement("div");
  location.id = 'debugging-line-debug';
  container.appendChild(location);

  function renderLocation(e) {
    containerV.setAttribute('style', `left: ${e.clientX}px`);
    containerH.setAttribute('style', `top: ${e.clientY}px`);
    location.innerText = `${e.clientX || 0} x ${e.clientY || 0}`;
  }
  let size = {
    x: 0,
    y: 0,
  }
  function logLocation(e) {
    console.log(`Location: %c${e.clientX} x ${e.clientY}`, "color: red");
    if (size.x) {
      console.log(`Size: %c${Math.abs(e.clientX - size.x)} x ${Math.abs(e.clientY - size.y)}`, "color: green");
      console.log(``);
      size.x = 0;
      size.y = 0;
    } else {
      size.x = e.clientX;
      size.y = e.clientY;
    }
  }

  window.addEventListener('mousemove', renderLocation);
  window.addEventListener('click', logLocation);
})()