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. Pulamos o Chrome 69 porque não tínhamos recursos novos ou mudanças na interface suficientes para justificar uma postagem.

Os novos recursos e as principais mudanças que serão lançados no DevTools do Chrome 70 incluem:

• Expressões dinâmicas no console.
• Destacar nós do DOM durante a avaliação estrita.
• Otimizações do painel de performance.
• Depuração mais confiável.
• Ative a otimização de rede no menu de comandos.
• Pontos de interrupção condicionais de preenchimento automático.
• Interromper em eventos AudioContext.
• Depure apps Node.js com ndb.
• Dica extra: meça as interações reais do usuário com a API User Timing.

Leia ou assista a versão em vídeo deste documento:

Expressões ativas no console

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

1. Clique em Criar expressão dinâmica . A interface do Live Expression é aberta.

   

   Figura 1. A interface de expressão dinâmica

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

   

   Figura 2. Digitar Date.now() na interface de expressões em tempo real

3. Clique fora da interface da expressão dinâmica para salvar.

   

   Figura 3. Uma expressão em tempo real salva

Os valores da expressão dinâmica são atualizados a cada 250 milissegundos.

Destacar nós DOM durante a avaliação imediata

Digite uma expressão que avalie um nó do DOM no console. A avaliação imediata agora destaca esse nó na janela de visualização.

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

Confira algumas expressões que podem ser úteis:

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

Otimizações do painel de performance

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

Figura 5. Processamento e carregamento de dados de performance

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.

Também corrige bugs relacionados a mapas de origem. Alguns usuários do TypeScript instruíam o DevTools a ignorar um determinado arquivo TypeScript ao percorrer o código. Em vez disso, o DevTools ignorava todo o arquivo JavaScript agrupado. Essas correções também resolvem um problema que estava causando lentidão geral no painel "Fontes".

Ativar a otimização de rede no menu de comandos

Agora é possível definir a limitação de rede como 3G rápido ou 3G lento no Menu de comandos.

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

Preenchimento automático de pontos de interrupção condicionais

Use a interface do usuário de preenchimento automático para digitar expressões de ponto de interrupção condicional mais rápido.

Figura 7. A interface do preenchimento automático

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

Interromper em eventos AudioContext

Use o painel Pontos de interrupção do listener de eventos para pausar na primeira linha de um manipulador de eventos do ciclo de vida AudioContext.

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

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

Depurar apps Node.js com ndb

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

• Detectar e anexar a processos filhos.
• Colocar pontos de interrupção antes que os módulos sejam necessários.
• Edição de arquivos na interface do DevTools.
• Ignorar todos os scripts fora do diretório de trabalho atual por padrão.

Figura 9. A interface do ndb

Confira o README do ndb (em inglês) para saber mais.

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

Quer medir quanto tempo leva para os usuários reais concluírem jornadas críticas nas suas páginas? Considere instrumentar seu código com a API User Timing.

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

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

Em seguida, 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 medições, 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;

As DevTools marcam automaticamente suas medições de velocidade do usuário na seção Velocidade do usuário das gravações de performance.

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

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

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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