Novidades do DevTools (Chrome 74)

Kayce Basques

Que bom que você voltou! Confira as novidades.

Versão em vídeo desta página

Destacar todos os nós afetados pela propriedade CSS

Passe o cursor sobre uma propriedade CSS que afeta o modelo de caixa de um nó, como padding ou margin, para destacar todos os nós afetados por essa declaração.

Figura 1. Passe o cursor sobre uma propriedade margin para destacar as margens de todos os nós afetados por ela declaração

Lighthouse v4 no painel Audits

A nova seção Áreas de toque não são dimensionadas corretamente verifica se elementos interativos, como os botões e links são grandes e espaçados corretamente em dispositivos móveis.

A categoria "PWA" de um relatório agora usa um sistema de pontuação de selo.

Figura 3. O novo sistema de pontuação de selos para a categoria PWA

Visualizador de mensagens binárias WebSocket

Para ver o conteúdo de uma mensagem WebSocket binária, faça o seguinte:

1. Abra o painel Rede. Consulte Inspecionar atividades de rede para aprender os conceitos básicos da análise atividade de rede.

   

   Figura 4. O painel Network

2. Clique em WS para filtrar todos os recursos que não são conexões WebSocket.

   

   Figura 5. Após clicar no WS, somente as conexões WebSockety são mostradas

3. Clique no Nome de uma conexão WebSocket para inspecioná-la.

   

   Figura 6. Como inspecionar uma conexão WebSocket

4. Clique na guia Mensagens.

   

   Figura 7. A guia "Mensagens"

5. Clique em uma das entradas Mensagem binária para inspecioná-la.

   

   Figura 8. Como inspecionar uma mensagem binária

Use o menu suspenso na parte inferior do visualizador para converter a mensagem em Base64 ou UTF-8. Clique em Copiar para a área de transferência para copiar a mensagem binária para a área de transferência.

Figura 9. Visualizar uma mensagem binária como Base64

Fazer uma captura de tela da área no menu de comando

As capturas de tela de área permitem que você capture uma captura de tela de uma parte da janela de visualização. Esse recurso foi por um tempo, mas o fluxo de trabalho para acessá-lo estava bastante oculto. As capturas de tela da área agora estão disponíveis no menu de comando.

1. Foque no DevTools e pressione Control+Shift+P ou Use Command + Shift + P (Mac) para abrir o menu de comando.

   

   Figura 10. O menu de comando

2. Comece a digitar area, selecione Capturar capturas de tela da área e pressione Enter.

3. Arraste o mouse sobre a seção da janela de visualização que você quer capturar.

   

   Figura 11. Como selecionar a parte da janela de visualização para fazer a captura de tela

Filtros do service worker no painel Network

Digite is:service-worker-initiated ou is:service-worker-intercepted no filtro do painel Rede caixa de texto para visualizar as solicitações que foram causadas (initiated) ou possivelmente modificadas (intercepted) por um service worker.

Figura 12. Filtrando por is:service-worker-initiated

Figura 13. Filtrando por is:service-worker-intercepted

Consulte Filtrar recursos para saber mais sobre a filtragem de registros de rede.

Atualizações do Painel de desempenho

Gravações de performance agora marcam tarefas longas e a First Paint.

Confira Fazer menos trabalho na linha de execução principal para ver um exemplo de como usar o painel "Desempenho" para analisar desempenho de carregamento da página.

Tarefas longas em gravações de apresentações

As gravações de performance agora mostram tasks longas.

Figura 14. Passar o cursor sobre uma tarefa longa em uma gravação de apresentação

Primeira pintura na seção Tempos

A seção "Tempos" de uma gravação de desempenho agora marca a primeira pintura.

Figura 15. Primeira pintura na seção Tempos

Novo tutorial do DOM

Confira Começar a visualizar e alterar o DOM para fazer um tour prático sobre o DOM atributos de machine learning.

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.