DevTools snippet that lets you focus on a single element during developement

concentrate.js

(function() {

function hideEverythingAround($el) {
    const $parent = $el.parentElement;

    $parent.style.transition = 'background-color 150ms ease-in';
    $parent.style.backgroundColor = 'white';

    $parent.childNodes.forEach($child => {
      if($child !== $el && $child.style) {
        $child.style.transition = 'opacity 150ms ease-in';
        $child.style.opacity = '0';
      }
    });

    if($parent.parentElement) {
      hideEverythingAround($parent);
    }
}

function updatePosition() {
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    const fixX = (windowWidth/2 - elBCR.width/2) - elBCR.left;
    const fixY = (windowHeight/2 - elBCR.height/2) - elBCR.top;

    document.body.style.transition = 'transform 150ms 150ms ease-in';
    document.body.style.transform = `translate3d(${fixX}px, ${fixY}px, 0)`;
}

const $el = $0;
const elBCR = $el.getBoundingClientRect();

document.body.style.height = '100vh';
document.body.style.width = '100vw';
document.body.style.overflow = 'hidden';

hideEverythingAround($el);
updatePosition();

window.addEventListener("resize", updatePosition);

})();