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. Passar o cursor sobre uma propriedade margin destaca as margens de todos os nós afetados por essa declaração.

Lighthouse v4 no painel "Auditorias"

A nova auditoria As áreas de toque não estão dimensionadas corretamente verifica se elementos interativos, como botões e links, estão grandes e espaçados o suficiente em dispositivos móveis.

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

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

Visualizador de mensagens binárias do WebSocket

Para ver o conteúdo de uma mensagem binária do WebSocket:

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

   

   Figura 4. O painel "Rede"

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

   

   Figura 5. Depois de clicar em "WS only", somente as conexões WebSockety serão mostradas.

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

   

   Figura 6. Inspecionar uma conexão WebSocket

4. Clique na guia Mensagens.

   

   Figura 7. A guia "Mensagens"

5. Clique em uma das entradas de Binary Message para inspecionar.

   

   Figura 8. Como inspecionar uma mensagem binária

Use o menu suspenso na parte de baixo da tela de apresentação 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. Como visualizar uma mensagem binária como Base64

Fazer captura de tela da área no menu de comandos

Com as capturas de tela de área, é possível registrar uma parte da janela de visualização. Esse recurso existe há algum tempo, mas o fluxo de trabalho para acessá-lo era bastante oculto. As capturas de tela de área agora estão disponíveis no menu de comandos.

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

   

   Figura 10. O menu de comandos

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. Selecionar a parte da janela de visualização para capturar a tela

Filtros de service worker no painel "Rede"

Digite is:service-worker-initiated ou is:service-worker-intercepted na caixa de texto do filtro do painel "Rede" para ver as solicitações causadas (initiated) ou potencialmente 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 como filtrar registros de rede.

Atualizações do painel de performance

As gravações de performance agora marcam tarefas longas e a primeira renderização.

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

Tarefas longas em gravações de performance

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

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

First Paint na seção "Tempos"

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

Figura 15. First Paint na seção "Tempos"

Novo tutorial do DOM

Confira Começar a visualizar e mudar o DOM para um tour prático dos recursos relacionados ao DOM.

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.