サイトレイアウトを可視化するJavascript

WEBサイトの幅や高さを可視化するスクリプトです。

const maskOverlay = document.createElement('div');
maskOverlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; pointer-events: none;';
document.body.appendChild(maskOverlay);

const layoutOverlay = document.createElement('div');
layoutOverlay.style.cssText = 'position: fixed; background-color: #fff; border: 1px solid #ccc; padding: 5px; z-index: 9999; pointer-events: none; display: none;';
document.body.appendChild(layoutOverlay);

document.addEventListener('mouseover', function(event) {
  const target = event.target;
  const targetRect = target.getBoundingClientRect();

  maskOverlay.style.display = 'block';
  layoutOverlay.style.display = 'block';
  
  layoutOverlay.innerHTML = `幅: ${targetRect.width}px, 高さ: ${targetRect.height}px`;
  layoutOverlay.style.top = `${targetRect.top}px`;
  layoutOverlay.style.left = `${targetRect.left}px`;
  layoutOverlay.style.width = `${targetRect.width}px`;
  layoutOverlay.style.height = `${targetRect.height}px`;
});

document.addEventListener('mouseout', function() {
  maskOverlay.style.display = 'none';
  layoutOverlay.style.display = 'none';
});

const backButton = document.createElement('button');
backButton.textContent = '戻る';
backButton.style.cssText = 'position: fixed; top: 10px; left: 10px; z-index: 9999;';
backButton.onclick = function() {
  maskOverlay.remove();
  layoutOverlay.remove();
  backButton.remove();
  document.removeEventListener('mouseover');
  document.removeEventListener('mouseout');
};
document.body.appendChild(backButton);

ブックマークレットは以下

javascript:(()=>{const e=document.createElement('div'),t=document.createElement('div');e.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:9998;pointer-events:none;',t.style.cssText='position:fixed;background-color:#fff;border:1px solid #ccc;padding:5px;z-index:9999;pointer-events:none;display:none;',document.body.appendChild(e),document.body.appendChild(t),document.addEventListener('mouseover',n=>{const o=n.target,r=o.getBoundingClientRect();e.style.display='block',t.style.display='block',t.innerHTML=`幅: ${r.width}px, 高さ: ${r.height}px`,t.style.top=`${r.top}px`,t.style.left=`${r.left}px`,t.style.width=`${r.width}px`,t.style.height=`${r.height}px`}),document.addEventListener('mouseout',()=>{e.style.display='none',t.style.display='none'}),b=document.createElement('button'),b.textContent='戻る',b.style.cssText='position:fixed;top:10px;left:10px;z-index:9999;',b.onclick=()=>{e.remove(),t.remove(),b.remove(),document.removeEventListener('mouseover'),document.removeEventListener('mouseout')},document.body.appendChild(b)})();

以上