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 o Chrome 69 porque não tínhamos novos recursos ou mudanças de 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.
• Preencher automaticamente pontos de interrupção condicionais.
• Interrupção em eventos AudioContext.
• Depure apps Node.js com 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 dinâmica na parte superior do console quando quiser monitorar o valor dela em tempo real.

1. Clique em Create Live Expression . 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 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. Clicar em um evento para saber mais sobre ele na guia "Resumo" às vezes levava vários segundos para carregar. O processamento e a visualização são mais rápidos no Chrome 70.

Figura 5. Processar e carregar 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.

Ela também corrige bugs relacionados aos 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 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 comandos

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

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 é usado pelo 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 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 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.
• Edição de 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? instrumente 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 manipulador 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 velocidade do usuário na seção Velocidade do usuário dos registros de desempenho.

Figura 10. A seção "Tempo 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

Considere usar o Chrome Canary, Dev ou Beta como seu 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 em 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 em @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.