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 chegam ao DevTools no Chrome 70 incluem:

• Expressões ao vivo no console.
• Destaque os nós do DOM durante a avaliação estrita.
• Otimizações do painel de desempenho.
• Depuração mais confiável.
• Ative a otimização de rede no Command Menu.
• Pontos de interrupção condicionais de preenchimento automático.
• Interromper em eventos AudioContext.
• Depurar apps Node.js com o ndb.
• Dica extra: meça as interações reais dos usuários com a API User Timing.

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

Expressões ao vivo no console

Fixe uma expressão ao vivo na parte de cima do console para monitorar o valor dela em tempo real.

1. Clique em Criar expressão ao vivo . A interface da expressão ao vivo é aberta.

   

   Figura 1. Interface da Expressão ao vivo

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

   

   Figura 2. Digitando Date.now() na interface da Expressão ao vivo

3. Clique fora da interface da expressão ao vivo para salvar.

   

   Figura 3. Uma expressão ao vivo salva

Os valores da expressão ao vivo são atualizados a cada 250 milissegundos.

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

Digite uma expressão que seja avaliada como um nó DOM no console, e a avaliação antecipada agora destaca esse nó na viewport.

Figura 4. Como a expressão atual é avaliada como um nó, esse nó é destacado na viewport

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 na árvore DOM.
• $0.parentElement para destacar o nó pai do nó selecionado.

Otimizações do painel de desempenho

Ao criar o perfil de uma página grande, o painel "Performance" levava dezenas de segundos para processar e visualizar os dados. Às vezes, 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 durante a execução do código. Em vez disso, o DevTools ignorava todo o arquivo JavaScript agrupado. Essas correções também abordam um problema que estava causando a lentidão do painel "Origens".

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

Agora é possível definir o limite de rede para 3G rápido ou lento no Menu de comando.

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

Pontos de interrupção condicionais de preenchimento automático

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

Figura 7. 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.

Interrupção em eventos AudioContext

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

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

Figura 8. Eventos AudioContext no painel "Event Listener Breakpoints"

Depurar apps Node.js com o ndb

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

• Detectar e anexar a processos filhos.
• Colocar pontos de interrupção antes dos módulos.
• Como editar arquivos na interface do DevTools.
• Por padrão, todos os scripts fora do diretório de trabalho atual são ignorados.

Figura 9. A interface do ndb

Confira o README do ndb para saber mais.

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

Quer medir quanto tempo os usuários reais levam para concluir jornadas importantes 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 gerenciador 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 para o 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 de tempo de carregamento do usuário na seção Tempo de carregamento do usuário das gravações de performance.

Figura 10. 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 final da 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 navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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