Os segredos das ferramentas de desenvolvedor do navegador

 (christianheilmann.com)
24 pontos por xguru 2021-11-03 | 3 comentários | Compartilhar no WhatsApp
  1. O Console tem muito mais recursos além de log()

  • Opções de filtragem

  • {} : exibir juntos o valor/nome da variável

  • warn()/info()/error() : nível de log

  • assert() : exibe apenas sob determinada condição

  • trace() : quem chamou?

  • group() : agrupar mensagens para expandir/recolher

  • table() : exibir informações em formato de tabela

  • $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

   return {url: a.href, text: a.innerText}

  })

  1. Deixar logs sem acessar o código-fonte

  • Live Expressions : verificar valores de variáveis que mudam em tempo real

  • logpoints : um tipo especial de breakpoint que imprime um log quando aquela linha é executada. Tecnicamente, é como poder adicionar console.log em qualquer lugar da página web

  1. Deixar logs fora do navegador
  • VS Code Debugger
  1. Injetar código em qualquer site (navegadores Chromium: Edge, Chrome, Brave..)

  • Snippets : executar scripts no site atual

  • Overrides : salvar uma cópia de um script remoto, modificá-la e depois fazer override no carregamento da página

  1. É possível fazer Inspect & Debug em muito mais lugares (navegadores Chromium)

  • Toda a linha Electron é compatível : GitHub Desktop, VS Code, e até as próprias Developer Tools do navegador podem ser depuradas com Developer Tools

  • MS Edge Tools for VS Code

  1. Segredos incômodos

  • As pessoas usam só uma parte das Developer Tools. Talvez porque falte documentação explicativa, então foi investido muito tempo para criar documentação, mas isso não parece ser a solução

  • As Developer Tools estão ficando cada vez mais complexas e é fácil se sentir sobrecarregado com tantos recursos. Não haveria uma forma de melhorar isso?

 → O Edge está tentando introduzir um Focus Mode. Em vez de mostrar todos os recursos, ele mostraria apenas as ferramentas necessárias para cada caso de uso

 → Também estão trabalhando em Informational Overlays. A ideia é oferecer ajuda visível diretamente nas Developer Tools

  • Ainda existe uma desconexão entre escrever código e depurar o resultado final

 → Como fazer com que as alterações feitas nas Developer Tools sejam refletidas no código?

 → Uma opção é substituir as Developer Tools pelo VSCode e, ao usar a ferramenta, alterar diretamente os arquivos no disco rígido

 → Outra opção é, como parte de uma extensão do VSCode, permitir escolher que mudanças feitas com as Developer Tools também possam alterar os arquivos no disco

  1. Você é o Audience e o Client das Developer Tools

 → Envie feedback com Report a Bug / Request a Feature etc.

Leituras relacionadas

3 comentários

 
galadbran 2021-11-04

Por uma perspectiva um pouco diferente, o ponto é que usuários e desenvolvedores têm as mesmas ferramentas. Por isso, parece que web apps precisam prestar muita atenção em como lidar com usuários mal-intencionados que usam meios alternativos.
 
kleinstein 2021-11-03

Parece que, mesmo quando há bons recursos, o fato de a documentação ter ou não bons exemplos acaba sendo um fator decisivo.