Novidades do DevTools (Chrome 118)

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

O painel Elementos agora oferece suporte à regra @property CSS at-rule. Ele permite definir propriedades personalizadas do CSS explicitamente e registrá-las em uma folha de estilos sem executar nenhum JavaScript.

Para inspecionar as propriedades personalizadas registradas, em Elementos > Estilos, passe o cursor sobre o nome da propriedade e confira os descritores dela em uma dica. Na dica, clique no link para conferir a propriedade registrada na seção @property que pode ser recolhida.

Problemas do Chromium: 1471102, 1471103 e 1471105.

Mais melhorias nas substituições locais

Continuando a série de melhorias na versão anterior, as substituições locais agora fazem o seguinte:

• Em Sources > Page, quando você clica com o botão direito do mouse em um arquivo com mapeamento de origem e seleciona Override content, as Ferramentas do desenvolvedor mostram uma caixa de diálogo que leva você à origem original. O conteúdo dos arquivos mapeados de origem não pode ser substituído.

  

• 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-a.

  

• Em Origens > 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 Excluir todas as substituições anterior 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 solicita a confirmação. Em seguida, ela exclui a pasta em que você clicou 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 aprimorada

Os resultados da pesquisa agora mostram uma entrada para todas as correspondências encontradas em uma linha de código. Antes, ele mostrava apenas a primeira correspondência por linha de código. O novo comportamento é especialmente útil ao pesquisar em arquivos minificados. Quando você clica em um resultado de pesquisa, o arquivo é aberto no editor e a correspondência é rolada 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" melhorado

Espaço de trabalho simplificado no painel "Origens"

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

• Nomes consistentes. O painel Sources > Filesystem foi renomeado para Workspace. Vários textos da interface neste painel agora são mais claros e livres de redundância.
• Configuração aprimorada. Confira dicas para arrastar e soltar pastas ou clique 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 novo 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 Origens 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 bonita para mais tipos de script

O painel Origens agora pode:

• Mostrar JavaScript inline em destaque nos seguintes tipos de script: module, importmap e speculationrules.
• Destaque a sintaxe dos tipos de script importmap e speculationrules, que contêm JSON.

Para mais informações sobre as 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. Esse recurso permite que os desenvolvedores adaptem o conteúdo da Web à preferência selecionada pelo usuário para reduzir a transparência no SO, como a configuração Reduzir transparência no macOS.

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

Problema do Chromium: 1424879.

Farol 11

O painel do Lighthouse agora executa o Lighthouse 11. Mais especificamente, 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, use a Tab para focar o botão Save ao lado dos snapshots e pressione Enter para selecionar a pasta.

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

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

Destaques diversos

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

• Rede: novos ícones para tipos de recursos populares: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Atualizações de cor para o Material 3 em muitos elementos da interface, principalmente nos painéis Elementos e Performance (1456690, 1472243).
• Os problemas agora preservam os cookies em todas as navegações (1466601).
• Várias melhorias em Aplicação > Carregamento prévio, principalmente em grids classificáveis e detalhes revisados do conjunto de regras (1410709).
• Várias melhorias no editor de comandos do Protocol monitor, principalmente avisos sobre entrada incorreta, edição de um comando enviado, editor para parâmetros de objetos sem chaves predefinidas, suporte a enumerações não definidas por referências, objetos sem referência de tipo, comandos de filtro por correspondência de substring e muito mais (1448050).
• O gráfico de chamas da performance recebe uma borda ao redor da caixa de total no gráfico de pizza (1470147).
• Fontes agora não tratam traços como caracteres de palavra no CSS (1471354).
• Agora, o preenchimento automático sempre classifica as palavras-chave do CSS no final.
• Os filtros RegEx agora oferecem suporte a espaços (1346936).
• A detecção de recursos de consulta de mídia foi corrigida em Elements (1472693).

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.