Novidades do DevTools (Chrome 70)

Kayce Basques

Que bom que você voltou! Já se passaram cerca de 12 semanas desde nossa última atualização, que foi para o Chrome 68. Ignoramos Chrome 69 porque não tínhamos novos recursos ou mudanças na interface suficientes para justificar uma postagem.

Os novos recursos e as principais mudanças do DevTools no Chrome 70 incluem:

• Expressões ao vivo no console.
• Destaque os nós do DOM durante a avaliação antecipada.
• Otimizações do painel de desempenho.
• Depuração mais confiável.
• Ative a limitação de rede no menu de comando.
• Preencher automaticamente pontos de interrupção condicionais.
• Interrupção em eventos AudioContext.
• Depure apps Node.js com ndb.
• Dica bônus: meça as interações reais dos usuários com a API User Timing.

Continue lendo ou assista à versão em vídeo deste documento:

Expressões ao vivo no console

Fixe uma expressão dinâmica na parte superior do console quando quiser monitorar o valor dela em tempo real.

1. Clique em Create Live Expression. Ao vivo A interface de expressão é aberta.

   

   Figura 1. A interface do Live Expression

2. Digite a expressão que você quer monitorar.

   

   Figura 2. Digitar Date.now() na interface do recurso Expressão ao vivo

3. Clique fora da interface do Live Expression para salvar sua expressão.

   

   Figura 3. Uma expressão ao vivo salva

Os valores do Live Expression são atualizados a cada 250 milissegundos.

Destacar os nós do DOM durante a avaliação antecipada

Digite uma expressão que seja avaliada como um nó DOM no console e em Eager Evaluation agora. destaca esse nó na janela de visualização.

Figura 4. Como a expressão atual é avaliada como um nó, esse nó é destacado na janela de visualização

Estas são algumas expressões que podem ser úteis:

• document.activeElement para destacar o nó que está em foco no momento.
• document.querySelector(s) para destacar um nó arbitrário, em que s é um seletor de CSS. Isso é equivalente a passar o cursor sobre um nó na Árvore DOM.
• $0 para destacar qualquer nó que esteja selecionado na árvore do DOM.
• $0.parentElement para destacar o pai do nó selecionado no momento.

Otimizações do painel de desempenho

Antes, ao criar o perfil de uma página grande, o painel de desempenho levava dezenas de segundos para e visualizar os dados. Clicar em um evento para saber mais sobre ele na guia "Resumo" pode levou vários segundos para carregar. O processamento e a visualização são mais rápidos no Chrome 70.

Figura 5. Como processar e carregar dados de desempenho

Depuração mais confiável

O Chrome 70 corrige alguns bugs que faziam com que os pontos de interrupção desaparecessem ou não fossem acionados.

Ela também corrige bugs relacionados aos mapas de origem. Alguns usuários do TypeScript orientam o DevTools a ignorar em um determinado arquivo TypeScript enquanto percorre o código. Em vez disso, o DevTools ignora a em todo o arquivo JavaScript empacotado. Essas correções também resolvem um problema que estava causando o painel Origens para funcionar lentamente.

Ativar a limitação de rede no menu de comando

Agora você pode definir a limitação de rede para 3G rápido ou 3G lento no menu de comando.

Figura 6. Comandos de limitação de rede no menu de comando

Preencher automaticamente pontos de interrupção condicionais

Use a interface de preenchimento automático para digitar as expressões de ponto de interrupção condicional mais rapidamente.

Figura 7. A interface de preenchimento automático

Você sabia? A interface de preenchimento automático é possível graças ao CodeMirror, que também alimenta a do Cloud.

Interromper nos eventos do AudioContext

Use o painel Event Listener Breakpoints para pausar na primeira linha de um AudioContext. manipulador de eventos do ciclo de vida.

O AudioContext faz parte da API Web Audio, que pode ser usada para processar e sintetizar áudio.

Figura 8. Eventos do AudioContext no painel "Pontos de interrupção do listener de eventos"

Depurar aplicativos Node.js com ndb

O ndb é um novo depurador para aplicativos Node.js. Além dos recursos de depuração comuns que você tem pelo DevTools, o ndb também oferece:

• Como detectar e anexar a processos filhos.
• É obrigatório posicionar pontos de interrupção antes dos módulos.
• Edição de arquivos na interface do DevTools.
• Ignorando todos os scripts fora do diretório de trabalho atual por padrão.

Figura 9. A interface ndb

Confira o README do ndb para saber mais.

Dica bônus: meça as interações reais dos usuários com a API User Timing

Quer avaliar quanto tempo usuários reais levam para concluir jornadas críticas nas suas páginas? Considere instrumentar seu código com a API User Timing.

Por exemplo, suponha que você queira avaliar quanto tempo um usuário passa na sua página inicial antes de clicar seu botão de call-to-action (CTA). Primeiro, marque o início da jornada em uma manipulador de eventos associado a um evento de carregamento de página, como DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Depois, marque o fim da jornada e calcule a duração dela quando o botão for clicado:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Você também pode extrair suas medidas, facilitando o envio delas ao seu serviço de análise para coletar dados anônimos e agregados:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

O DevTools marca automaticamente as medições da User Timing na seção User Timing do Gravações de apresentações.

Figura 10. A seção "Tempo do usuário"

Isso também é útil ao depurar ou otimizar o código. Por exemplo, se você quer otimizar certa fase do seu ciclo de vida, chame window.performance.mark() no início e no fim do seu função do ciclo de vida. O React faz isso no modo de desenvolvimento.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo que foi abordado na série Novidades no DevTools.