Os segredos das ferramentas de desenvolvedor do navegador

<p>1. O Console tem muito mais recursos além de `log()`<br /> - Opções de filtragem<br /> - {} : exibir juntos o valor/nome da variável<br /> - `warn()/info()/error()` : nível de log<br /> - `assert()` : exibe apenas sob determinada condição<br /> - `trace()` : quem chamou?<br /> - `group()` : agrupar mensagens para expandir/recolher<br /> - `table()` : exibir informações em formato de tabela<br /> - `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br /> &nbsp;&nbsp;`$$('a').map(a =&gt; {`<br /> &nbsp;&nbsp;&nbsp;`return {url: a.href, text: a.innerText}`<br /> &nbsp;&nbsp;`})`<br /> <br /> 2. Deixar logs sem acessar o código-fonte<br /> - Live Expressions : verificar valores de variáveis que mudam em tempo real<br /> - 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<br /> <br /> 3. Deixar logs fora do navegador<br /> - VS Code Debugger<br /> <br /> 4. Injetar código em qualquer site (navegadores Chromium: Edge, Chrome, Brave..)<br /> - Snippets : executar scripts no site atual<br /> - Overrides : salvar uma cópia de um script remoto, modificá-la e depois fazer override no carregamento da página<br /> <br /> 5. É possível fazer Inspect &amp; Debug em muito mais lugares (navegadores Chromium)<br /> - 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<br /> - MS Edge Tools for VS Code<br /> <br /> 6. Segredos incômodos<br /> - 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<br /> - 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?<br /> &nbsp;→ 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<br /> &nbsp;→ Também estão trabalhando em Informational Overlays. A ideia é oferecer ajuda visível diretamente nas Developer Tools<br /> - Ainda existe uma desconexão entre escrever código e depurar o resultado final<br /> &nbsp;→ Como fazer com que as alterações feitas nas Developer Tools sejam refletidas no código?<br /> &nbsp;→ Uma opção é substituir as Developer Tools pelo VSCode e, ao usar a ferramenta, alterar diretamente os arquivos no disco rígido<br /> &nbsp;→ 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<br /> <br /> 7. Você é o Audience e o Client das Developer Tools<br /> &nbsp;→ Envie feedback com Report a Bug / Request a Feature etc. </p>

[galadbran]

<p>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.</p>

[laeyoung]

<p>Artigo relacionado a `console.log()`<br /> - https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…;

[kleinstein]

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