Novidades do DevTools (Chrome 87)

Novas ferramentas de depuração da grade CSS

O DevTools agora tem um suporte melhor para a depuração da grade CSS.

Quando um elemento HTML na sua página tem display: grid ou display: inline-grid aplicado, é possível ver um selo grid ao lado dele no painel Elementos. Clique no selo para alternar a exibição de uma sobreposição de grade na página.

O novo painel Layout tem uma seção Grade que oferece várias opções para visualizar as grades.

Consulte a documentação para saber mais.

Problema do Chromium: 1047356

Nova guia do WebAuthn

Agora é possível emular autenticadores e depurar a API Web Authentication com a nova guia WebAuthn.

Selecione Mais opções > Mais ferramentas > WebAuthn para abrir a guia "WebAuthn".

Antes da nova guia WebAuthn, não havia suporte nativo de depuração do WebAuthn no Chrome. Os desenvolvedores precisavam de autenticadores físicos para testar o aplicativo da Web com a API Web Authentication.

Com a nova guia WebAuthn, os desenvolvedores da Web agora podem emular esses autenticadores, personalizar os recursos e inspecionar os estados deles, sem a necessidade de autenticadores físicos. Isso facilita a experiência de depuração.

Confira nossa documentação para saber mais sobre o recurso WebAuthn.

Problema do Chromium: 1034663

Mover ferramentas entre o painel de cima e de baixo

Agora, o DevTools oferece suporte à movimentação de ferramentas entre o painel de cima e de baixo. Dessa forma, você pode visualizar duas ferramentas ao mesmo tempo.

Por exemplo, se você quiser ver os painéis Elementos e Origens ao mesmo tempo, clique com o botão direito do mouse no painel Origens e selecione Mover para a parte de baixo para movê-lo para a parte de baixo.

Da mesma forma, você pode mover qualquer guia de baixo para cima clicando com o botão direito do mouse em uma guia e selecionando Mover para a parte de cima.

Problema do Chromium: 1075732

Atualizações do painel "Elementos"

Acessar o painel Computed no painel "Styles"

Agora é possível ativar o painel Computed na barra lateral "Styles".

O painel Computed no painel Styles fica recolhido por padrão. Clique no botão para ativá-lo.

Problema do Chromium: 1073899

Como agrupar propriedades CSS no painel "Computed"

Agora é possível agrupar as propriedades CSS por categorias no painel Computed.

Com esse novo recurso de agrupamento, será mais fácil navegar no painel Computed (menos rolagem) e focar seletivamente em um conjunto de propriedades relacionadas para inspeção de CSS.

No painel Elements, selecione um elemento. Alterne a caixa de seleção Group para agrupar/desgrupar as propriedades CSS.

Problemas do Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 no painel do Lighthouse

O painel Lighthouse agora está executando o Lighthouse 6.4. Confira as notas da versão para conferir uma lista completa de mudanças.

Novas auditorias no Lighthouse 6.4:

• Pré-carregue as fontes. Valida se todas as fontes que usamfont-display: optional foram pré-carregadas.
• Mapas de origem válidos. Verifica se uma página tem mapas de origem válidos para JavaScript principal grande.
• [Experimental] Biblioteca JavaScript grande. Bibliotecas JavaScript grandes podem resultar em um desempenho fraco. Esta auditoria sugere alternativas mais baratas para bibliotecas JavaScript grandes e comuns, como moment.js.

Problema do Chromium: 772558

Eventos performance.mark() na seção "Tempos"

A seção "Tempos" de uma gravação de performance agora marca eventos performance.mark().

Novos filtros resource-type e url no painel "Rede"

Use as novas palavras-chave resource-type e url no painel de rede para filtrar solicitações de rede.

Por exemplo, use resource-type:image para se concentrar nas solicitações de rede que são imagens.

Confira como filtrar solicitações por propriedades para descobrir mais palavras-chave especiais, como resource-type e url.

Problemas do Chromium: 1121141, 1104188

Atualizações na visualização de detalhes do frame

Mostrar o endpoint reporting to de COEP e COOP

Agora é possível conferir o endpoint da política de incorporação entre origens (COEP, na sigla em inglês) e a política de abertura entre origens (COOP, na sigla em inglês)reporting to na seção Segurança e isolamento.

A API Reporting define um novo cabeçalho HTTP, Report-To, que oferece aos desenvolvedores da Web uma maneira de especificar endpoints do servidor para que o navegador envie avisos e erros.

Leia este artigo para saber como ativar a COEP e a COOP e tornar seu site "isolado entre origens".

Problema do Chromium: 1051466

Mostrar o modo report-only de COEP e COOP

O DevTools agora mostra o rótulo report-only para COEP e COOP definidos no modo report-only.

Assista a este vídeo para saber como evitar vazamentos de informações e ativar o COOP e o COEP no seu site.

Problema do Chromium: 1051466

Descontinuação de Settings no menu "Mais ferramentas"

A opção Settings no menu "Mais ferramentas" foi descontinuada. Abra as Configurações no painel principal.

Problema do Chromium: 1121312

Recursos experimentais

Conferir e corrigir problemas de contraste de cores no painel "CSS Overview"

O painel CSS Overview agora mostra uma lista de textos de baixo contraste de cor da sua página.

Neste exemplo, a página de demonstração tem um problema de baixo contraste de cores. Clique no problema para ver uma lista de elementos que têm o problema.

Clique em um elemento da lista para abrir no painel Elementos. O DevTools oferece sugestões automáticas de cores para ajudar a corrigir o texto de baixo contraste.

Problema do Chromium: 1120316

Personalizar atalhos de teclado no DevTools

Agora você pode personalizar os atalhos do teclado para seus comandos favoritos no DevTools.

Acesse Configurações > Atalhos, passe o cursor sobre um comando e clique no botão Editar (ícone de caneta) para personalizar o atalho de teclado.

Para redefinir todos os atalhos, clique em Restaurar atalhos padrão.

Problema do Chromium: 174309

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.

• Envie feedback e solicitações de recursos para 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 para @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.