Como Debuggar Componentes HTML

Esses dias um amigo me mostrou um tweet do @sulco sobre como debuggar html, de uma forma bem simples!
Sabe aquele Select componente ou aquele dropdown que usamos e as vezes queremos alterar seu estilo, com ele aberto?

Sempre que tentamos selecioná-lo, acaba fechando, sumindo, desfazendo! Dá uma raiva!
Então hoje apresento algo que até poucos dias atrás não conhecia: “emulate a focused page”

Através do console de desenvolvedor, conseguimos ativar essa função!
Dá uma olhada como é fácil fazer:

Habilitando focus mode - Chrome

Fica bem mais fácil assim né?
Então, resumindo:

Como habilitar focused page no chrome

  • Abra o “inspecionar elemento” (F12)
  • Digite Ctrl + P ou [⌘]+[P] no Mac
  • Escreva “> Emulate a focused page”
  • Ative-a e estará pronto para usar!

Agora ficou muito mais fácil estilizar e mexer em componentes assim!