Novidades do DevTools (Chrome 118)

Estilos"" id="css" tabindex="-1">Nova seção para propriedades personalizadas em "Elementos" > "Estilos"

O painel Elementos agora é compatível com a regra at@property do CSS. Ele permite definir propriedades personalizadas de CSS de forma explícita e registrá-las em uma folha de estilo sem executar JavaScript.

Para inspecionar as propriedades personalizadas registradas, em Elementos > Estilos, passe o cursor sobre o nome da propriedade e veja os descritores em uma dica. No balão de ajuda, clique no link para ver a propriedade registrada na seção recolhível @property.

Problemas do Chromium: 1471102, 1471103, 1471105.

Mais melhorias nas substituições locais

Continuando o fluxo de melhorias na versão anterior, as substituições locais agora fazem o seguinte:

• Em Fontes > Página, quando você clica com o botão direito do mouse em um arquivo mapeado por origem e seleciona Substituir conteúdo, o DevTools mostra uma caixa de diálogo que leva à origem original. Não é possível substituir o conteúdo de arquivos mapeados de origem.

  

• O painel Rede recebe uma nova coluna Tem substituições e um filtro has-overrides:[content|headers|yes|no] correspondente. Para ver a coluna Tem substituições, clique com o botão direito do mouse no cabeçalho da tabela e selecione essa opção.

  

• Em Fontes > Substituições, a opção de menu Excluir todas as substituições foi substituída pela opção Excluir com comportamento preciso.

  

A opção anterior Excluir todas as substituições era confusa porque excluía apenas as substituições ativas na sessão atual, marcadas pelo ícone de ponto roxo .

A nova opção Excluir mostra primeiro uma mensagem de aviso e pede confirmação. Depois, ela exclui a pasta clicada com todo o conteúdo.

Para trazer de volta a opção anterior, marque Ativar "Excluir todas as substituições temporariamente" em Configurações > Experimentos.

Problemas do Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Pesquisa avançada

Os resultados da Pesquisa agora mostram uma entrada para cada correspondência encontrada em uma linha de código. Antes, ele mostrava apenas a primeira correspondência por linha de código. O novo comportamento é especialmente útil quando você pesquisa em arquivos minimizados. Quando você clica em um resultado da pesquisa, o arquivo é aberto no editor e agora rola a correspondência para a visualização não apenas verticalmente, mas também horizontalmente.

Além disso, a Pesquisa ficou mais rápida. Confira a comparação entre o antes (esquerda) e o depois (direita) no próximo vídeo.

Por fim, a Pesquisa agora oferece suporte à lista de ignorados e não mostra resultados de arquivos ignorados.

Problemas do Chromium: 1468875, 1472019.

Painel "Origens" aprimorado

Espaço de trabalho simplificado no painel "Origens"

O recurso espaço de trabalho no painel Fontes foi simplificado:

• Nomenclatura consistente. Principalmente, o painel Fontes > Sistema de arquivos foi renomeado como Espaço de trabalho. Vários textos da interface neste painel agora estão mais claros e sem redundância.
• Configuração aprimorada. Melhores indicadores para arrastar e soltar pastas ou clicar em um link para selecionar uma pasta.

Origens > Espaço de trabalho permite sincronizar as mudanças feitas no DevTools diretamente com os arquivos de origem.

Confira a nova configuração e o fluxo de trabalho em ação:

Problemas do Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Reordenar painéis em "Origens"

Agora é possível reordenar os painéis no lado esquerdo do painel Fontes arrastando e soltando, assim como você pode reordenar outros painéis, guias e painéis.

Problemas do Chromium: 1473758.

Destaque de sintaxe e impressão formatada para mais tipos de script

Agora, o painel Origens pode:

• Imprima em formato bonito o JavaScript inline nos seguintes tipos de script: module, importmap e speculationrules.
• Realce a sintaxe dos tipos de script importmap e speculationrules, que contêm JSON.

Para mais informações sobre regras de especulação, consulte Pré-renderizar páginas no Chrome para navegação instantânea nas páginas.

Problema do Chromium: 1473875.

Emular o recurso de mídia "prefers-reduced-transparency"

O Chrome 118 agora oferece suporte ao recurso de mídia prefers-reduced-transparency. Com esse recurso, os desenvolvedores podem adaptar o conteúdo da Web à preferência do usuário por transparência reduzida no SO, como a configuração Reduzir a transparência no macOS.

Para emular esse recurso de mídia, abra a guia Renderização e role a tela para baixo até ele.

Problema do Chromium: 1424879.

Farol 11

O painel Lighthouse agora executa o Lighthouse 11. Principalmente, essa versão remove a navegação legada, adiciona novas auditorias de acessibilidade e muda a forma como a categoria de acessibilidade é pontuada.

Consulte também a lista completa de mudanças. Para aprender os conceitos básicos de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Melhorias na acessibilidade

O DevTools agora oferece suporte a mais teclas de navegação:

• Visão geral do CSS: use as setas para cima e para baixo para navegar pelas seções na barra lateral esquerda.
• Memória: na barra lateral esquerda, concentre o botão Salvar ao lado dos snapshots com Tab e pressione Enter para selecionar a pasta.

Além disso, vários problemas de anúncio do leitor de tela foram corrigidos.

Problemas do Chromium: 1470401, 1471301, 1474108, 1468631.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Rede: novos ícones para tipos de recursos populares: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Atualizações de cores para cores do Material 3 em muitos elementos da interface, principalmente nos painéis Elementos e Performance (1456690, 1472243).
• Agora, a guia Problemas preserva os problemas de cookies em todas as navegações (1466601).
• Várias melhorias em Aplicativo > Pré-carregamento, principalmente grades classificáveis e detalhes revisados do conjunto de regras (1410709).
• Várias melhorias no editor de comandos em Monitor de protocolo, principalmente avisos sobre entradas incorretas, edição de um comando enviado, editor para parâmetros de objeto sem chaves predefinidas, suporte a enums indefinidos por referências, objetos sem referência de tipo, comandos de filtro por correspondências de substring e muito mais (1448050).
• O gráfico de chamas de performance recebe uma borda ao redor da caixa total no gráfico de pizza (1470147).
• Agora, Fontes não trata traços como caracteres de palavras em CSS (1471354).
• O preenchimento automático agora sempre classifica as palavras-chave relacionadas a CSS no final.
• Os filtros de regex agora oferecem suporte a espaços (1346936).
• O Elements corrigiu a detecção de recursos de consulta de mídia (1472693).

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 aos 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 O que há de novo no DevTools.