Novidades do DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

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 de CSS explicitamente e registrá-las em uma folha de estilo 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 ver a propriedade registrada na seção @property colapsável.

Problemas do Chromium: 1471102, 1471103, 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, o DevTools mostra uma caixa de diálogo que leva você à origem original. O conteúdo dos arquivos mapeados de origem não pode ser substituído.

    A caixa de diálogo que leva você ao código original em vez do arquivo mapeado pela 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-a.

    Filtragem pelo valor "has-overrides:yes" na coluna "Tem substituições".

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

    Antes e depois de substituir "Excluir todas as substituições" por "Excluir".

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

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 voltar à opção anterior, marque Caixa de seleção. Ativar "Excluir todas as substituições temporariamente" em Configurações. Configurações > Experimentos.

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

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, ele abre o arquivo no editor e agora rola a correspondência para a visualização não apenas vertical, mas também horizontalmente.

O antes e o depois de fazer a pesquisa mostram todas as correspondências por linha.

Além disso, a Pesquisa aumentou a velocidade. Veja a comparação antes (à esquerda) e depois (à direita) no próximo vídeo.

Por fim, a Pesquisa agora oferece suporte à opção ignorar listagem 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.

Antes e depois da impressão bonita e do destaque de sintaxe do tipo de script de regras de especulação.

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 é compatível com o recurso de mídia prefers-reduced-transparency. Esse recurso permite que os desenvolvedores adaptem o conteúdo da Web às preferências selecionadas 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 Lighthouse agora executa o Lighthouse 11. O mais importante é que essa versão remove a navegação legada, adiciona novas auditorias de acessibilidade e muda a pontuação da categoria de acessibilidade.

Veja 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 com avisos do leitor de tela foram corrigidos.

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

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

  • Rede: novos ícones para tipos de recursos populares: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
  • As cores do Material 3 foram atualizadas em muitos elementos da interface, principalmente nos painéis Elementos e Desempenho (1456690, 1472243).
  • Problemas agora preserva os problemas de cookies nas 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 entradas incorretas, 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ências 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).
  • O preenchimento automático agora sempre classifica as palavras-chave em 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

Considere usar o Chrome Canary, Dev ou Beta como seu 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 novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.

Novidades no DevTools

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