Novidades do DevTools (Chrome 64)

Kayce Basques
Kayce Basques

Que bom que você voltou! Os novos recursos do DevTools no Chrome 64 incluem:

Continue lendo ou assista à versão em vídeo das notas da versão abaixo.

Monitoramento de desempenho

Use o Monitor de desempenho para ter uma visão em tempo real de vários aspectos do carregamento ou do o desempenho do ambiente de execução, incluindo:

  • Uso da CPU.
  • tamanho de heap do JavaScript.
  • O número total de nós DOM, listeners de eventos JavaScript, documentos e frames na página.
  • Recálculos de estilo e layouts por segundo.

Se os usuários relatarem que seu app está lento ou instável, verifique no Monitor de desempenho se pistas.

Por que carregar o desempenho é importante: a BookMyShow conseguiu um aumento de 80% nas conversões ao criar uma Progressive Web App focado em velocidade. Saiba mais.

Para usar o Monitor de desempenho:

  1. Abra o Menu de comando.

  2. Comece a digitar Performance e selecione Show Performance Monitor.

    O Monitor de desempenho Figura 1. A Monitor de desempenho

  3. Clique em uma métrica para mostrar ou ocultar. Na Figura 1, as informações de Uso da CPU, Tamanho de heap do JS e JS gráficos de listeners de eventos.

Recursos relacionados:

  • Desempenho. Reflita sobre uma jornada crítica do usuário e registre tudo o que acontece página, incluindo atividade de JavaScript, solicitações de rede, uso de CPU e muito mais. Também pode ser usados para analisar o desempenho de carregamento. Saiba mais.
  • Auditorias. Execute um conjunto de testes automatizados de desempenho de carga e tempo de execução em qualquer URL. Saiba mais.

Se você está começando a analisar o desempenho, o caminho recomendado é primeiro usar o Auditorias e, em seguida, investigue mais usando os painéis Desempenho ou Desempenho. monitor

Barra lateral do console

Em sites grandes, o Console pode ficar rapidamente cheio de mensagens irrelevantes. Usar o novo Console Barra lateral para reduzir ruídos e focar nas mensagens que são importantes para você.

Usar a barra lateral do console para mostrar apenas mensagens de erro

Figura 2. Usar a barra lateral do console para mostrar apenas mensagens de erro

A barra lateral do console fica oculta por padrão. Clique em Mostrar barra lateral do console. Mostrar a barra lateral do console para mostrá-lo.

Recursos relacionados:

  • Filter. Digite algum texto, e o Console só mostrará mensagens que incluam esse em textos. Também oferece suporte a padrões de regex, filtros negativos e filtros de URL.

Agrupar mensagens semelhantes do console

O console agora agrupa mensagens semelhantes por padrão. Por exemplo, na Figura 3, há instâncias da mensagem [Violation] Avoid using document.write().

Um exemplo de como o Console agrupa mensagens semelhantes

Figura 3. Um exemplo de como o Console agrupa mensagens semelhantes

Clique em um grupo para expandi-lo e ver cada instância da mensagem.

Exemplo de um grupo expandido de mensagens do console

Figura 4. Exemplo de um grupo expandido de mensagens do Console

Desmarque a caixa de seleção Agrupar semelhantes para desativar este recurso.

Recursos relacionados:

  • Você pode agrupar suas próprias mensagens do console com o console.group().

Substituições locais

Ops! Inicialmente, este recurso foi programado para ser lançado no Chrome 64, mas o aproximamos da prazo para suavizar partes irregulares. Aparentemente, a interface de "O que há de novo" não foi atualizada tempo de resposta. Desculpe.

Esse recurso será lançado no Chrome 65, que será lançado aproximadamente seis semanas após o Chrome 64. Conferir consulte Substituições locais para saber mais. Se você estiver em Windows ou Mac, experimente o Chrome 65 agora Faça o download do Chrome Canary.

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