Novidades do DevTools (Chrome 87)

Novas ferramentas de depuração em grade CSS

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

Depuração de grade CSS

Quando um elemento HTML em sua página tem display: grid ou display: inline-grid aplicados, você será possível encontrar o 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 o grades.

Confira a documentação para saber mais.

Problema do Chromium: 1047356

Nova guia WebAuthn

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

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

Guia WebAuthn

Antes da nova guia WebAuthn, não havia suporte nativo para a 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 Web agora podem emular esses autenticadores, personalizar os e inspecionam os estados delas sem a necessidade de autenticadores físicos. Isso torna 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 superior e o inferior

O DevTools agora oferece suporte à movimentação de ferramentas entre os painéis 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 de uma só vez, faça o seguinte: Clique no painel Origens e selecione Mover para o fim para movê-la para a parte inferior.

Mover para o fim

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

Mover para o início

Problema do Chromium: 1075732

Atualizações do painel Elementos

Conferir o painel da barra lateral computado no painel Estilos

Agora você pode alternar o painel Barra lateral computada no painel "Estilos".

O painel Barra lateral computada no painel Estilos fica fechado por padrão. Clique no botão para ativar ou desativar esse recurso.

Painel de barra lateral computado

Problema do Chromium: 1073899

Como agrupar propriedades CSS no painel Computed

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

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

No painel Elementos, selecione um elemento. Marque a caixa de seleção Grupo para agrupar/desagrupar o CSS. propriedades.

Como agrupar 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 ter acesso lista de alterações.

Farol

Novas auditorias no Lighthouse 6.4:

  • Pré-carregue as fontes. Valida se todas as fontes que usam font-display: optional foram pré-carregadas.
  • Mapas de origem válidos. Audita se uma página tem mapas de origem válidos para JavaScript próprio grande.
  • [Experimental] Grande biblioteca JavaScript. Grandes bibliotecas JavaScript podem levar a erros desempenho. Essa auditoria sugere alternativas mais baratas às bibliotecas JavaScript grandes e comuns, como moment.js:

Problema do Chromium: 772558

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

A seção Marcação de tempo de um registro de desempenho agora marca eventos performance.mark().

Eventos Performance.mark

Novos filtros resource-type e url no painel Rede

Use as novas palavras-chave resource-type e url no painel 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.

filtro de tipo de recurso

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

Problemas do Chromium: 1121141, 1104188

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

Exibir endpoint reporting to da COEP e COOP

Agora você pode conferir a política de incorporação de origem cruzada (COEP, na sigla em inglês) e a política de abertura de origem cruzada (COOP)reporting to no painel 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 o navegador enviar avisos e erros.

geração de relatórios para o endpoint

Leia este artigo para saber mais sobre como ativar o COEP e o COOP e criar um site "origem cruzada isolada".

Problema do Chromium: 1051466

Exibir os modos COEP e COOP report-only

O DevTools agora mostra o identificador report-only para o COEP e o COOP que estão definidos no modo report-only.

rótulo somente relatório

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

Problema do Chromium: 1051466

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

O Settings no menu "Mais ferramentas" foi descontinuado. Abra as Configurações no painel principal como alternativa.

Configurações no painel principal

Problema do Chromium: 1121312

Recursos experimentais

Conferir e corrigir problemas de contraste de cores no painel "Visão geral do CSS"

O painel Visão geral do CSS agora exibe uma lista de textos com baixo contraste de cor da sua página.

Neste exemplo, a página de demonstração tem um problema de baixo contraste de cor. Clique no problema, é possível ver uma lista de elementos com o problema.

Problemas com baixo contraste de cor

Clique em um elemento da lista para abri-lo no painel Elementos. O DevTools fornece recursos sugestão de cor 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 de teclado para seus comandos favoritos no DevTools.

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

Personalizar atalhos do 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 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.