Novidades do DevTools (Chrome 74)

Kayce Basques
Kayce Basques
X GitHub Falha

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.

Passar o cursor sobre uma propriedade de margem destaca 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 "Audits"

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

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

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

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

Visualizador de mensagens binárias do WebSocket

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

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

    Painel "Network"

    Figura 4. Painel "Network"

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

    Depois de clicar em WS, apenas as conexões WebSockety são mostradas.

    Figura 5. Depois de clicar em WS, apenas as conexões WebSockety são mostradas.

  3. Clique no Nome de uma conexão WebSocket para inspecionar.

    Inspecionar uma conexão WebSocket

    Figura 6. Inspecionar uma conexão WebSocket

  4. Clique na guia Mensagens.

    Guia "Mensagens"

    Figura 7. Guia "Mensagens"

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

    Como inspecionar uma mensagem binária

    Figura 8. Como inspecionar uma mensagem binária

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

Como visualizar uma mensagem binária como Base64

Figura 9. Como visualizar uma mensagem binária como Base64

Captura de tela da área no menu de comandos

As capturas de tela de área permitem capturar uma parte da janela de visualização. Esse recurso já existe há algum tempo, mas o fluxo de trabalho para acessá-lo estava bastante oculto. As capturas de tela de área agora estão disponíveis no menu de comando.

  1. Foque as Ferramentas do desenvolvedor e pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comando.

    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 viewport que você quer capturar.

    Como selecionar a parte da janela de visualização para capturar a tela

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

Filtros de worker de serviço no painel de rede

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

Filtragem por is:service-worker-initiated

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

Filtragem por is:service-worker-intercepted

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

Consulte Filtrar recursos para saber mais sobre como filtrar registros de rede.

Atualizações do painel de desempenho

As gravações de desempenho agora marcam tarefas longas e a primeira pintura.

Confira Fazer menos trabalho na linha de execução principal para conferir 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 desempenho agora mostram tarefas longas.

Como passar o cursor sobre uma tarefa longa em uma gravação de performance

Figura 14. Como 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 pintura.

First paint na seção "Tempos"

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

Tutorial do novo DOM

Confira Começar a visualizar e mudar o DOM para uma visita prática aos recursos relacionados ao DOM.

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.

Novidades no DevTools

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