Desenvolvedor depurar elementos DOM na sua página com uma linha de código

Quantas vezes você se esforçou para encontrar um problema específico bagunçando seu layout CSS? De tags de fechamento ausentes a irmãos aninhados incorretamente, os problemas de CSS são um centavo a dúzia. E com este depurador de layout CSS, o processo apenas ficou muito mais fácil.

Esta linha de código será atravessar o DOM e delinear cada elemento com uma cor diferente. Desta forma você pode melhor visualizar como seu CSS está funcionando (ou não funcionando) e rapidamente identificar áreas problemáticas.

O GitHub permite que os desenvolvedores poupe pequenos pedaços de código chamado Gists. Estes são todos de código aberto e gratuitos para economize para seu próprio uso. É por isso que este depurador de CSS é tão útil. Ele combina o proeza moderna do Chrome DevTools com o simplicidade de bookmarklets do navegador.

Para usar este código, você deve primeiro copie qualquer versão que você goste da melhor da página Gist. Então você cole esse código na sua janela do Terminal e executá-lo. Você deve acabar com um resultado como este:

Agora, é possível salve este código como um bookmarklet na barra de ferramentas do seu navegador. Mas se você é um usuário do Google Chrome, pode salve este código JS como um snippet de código o que é muito mais fácil de executar.

Este trecho de código pode ser recordado mais e mais com o clique de um botão. Você pode analisar cada página, cheio desses contornos CSS coloridos, para elementos DOM de pais e filhos.

No entanto, você não deve se sentir limitado apenas ao Chrome. Este trecho funciona para todos os principais navegadores, incluindo Firefox, Safari, Opera e Internet Explorer.

E para qualquer um curioso para saber como isso funciona, você pode conferir o versão anotada com comentários para cada linha de código.

Esta essência é cheia de comentários de usuários relacionados e atualizações de outros desenvolvedores ajudando a torná-lo menor e mais eficiente. Mas no seu estado atual, esta é uma das maneiras mais simples de depurar qualquer DOM com uma única linha de código.