Detectar elementos de estouro de CSS

De vez em quando, o senhor se depara com um incômodo no CSS que precisa de um pouco de inteligência para ser descoberto. Um desses casos é o das barras de rolagem indesejadas e inesperadas. Quando vejo barras de rolagem indesejadas, geralmente abro as ferramentas do desenvolvedor, clico no inspetor de elementos e passo o mouse até encontrar o elemento HTML vilão. Como sou uma pessoa visual, acho esse processo eficaz, mas não eficiente. Recentemente, eu estava informado que de uma maneira programática de encontrar o elemento scoundrel com JavaScript!

Para localizar o elemento que invoca as barras de rolagem de demônios, o senhor pode usar o seguinte JavaScript:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
      console.log('Found the worst element ever: ', el);
  }
});

Depois que o elemento tiver sido registrado no console, o senhor poderá localizá-lo e aplicar punições no inspetor de elementos conforme achar necessário.

Sou sempre culpado de voltar aos meus métodos antigos, ou seja, a inspeção visual, mas ter uma solução programática é muito mais rápido e conveniente!