Novidades do DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova

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

O painel Elementos agora é compatível com @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, acesse Elementos > Estilos, passe o cursor sobre o nome da propriedade e confira os descritores em uma dica. Na dica, clique no link para conferir a propriedade registrada na seção @property que pode ser fechada.

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 > Page: quando você clica com o botão direito do mouse em um arquivo mapeado pela origem e seleciona Override content, o DevTools mostra uma caixa de diálogo que leva à fonte original. Não é possível substituir o conteúdo dos arquivos mapeados de origem.

    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 conferir a coluna Tem substituições, clique com o botão direito do mouse no cabeçalho da tabela e selecione-o.

    Filtragem por "has-overrides:yes" em "Tem substituições" .

  • Em Fontes > 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" com "Delete".

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 primeiro mostra uma mensagem de aviso e solicita a confirmação. Em seguida, exclui com todo o conteúdo a pasta em que você clicou.

Para restaurar a 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, era mostrada apenas a primeira correspondência por linha de código. O novo comportamento é especialmente útil quando você pesquisa em arquivos reduzidos. 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" aprimorado

Espaço de trabalho simplificado no painel "Origens"

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

  • Nomenclatura consistente. Mais especificamente, a seção Sources > O painel Sistema de arquivos foi renomeado como Espaço de trabalho. Vários textos de interface nesse painel agora estão mais claros e sem redundância.
  • Configuração aprimorada. Veja dicas mais úteis sobre como arrastar e soltar pastas ou clique em um link para selecionar uma pasta.

Fontes > O Workspace permite sincronizar as mudanças feitas no DevTools diretamente com os arquivos de origem.

Veja 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 Sources arrastando e soltando, da mesma forma que você pode reordenar outros painéis, guias e painéis.

Problemas do Chromium: 1473758.

Destaque de sintaxe e formatação para mais tipos de script

O painel Origens agora pode:

  • JavaScript inline de formatação nos seguintes tipos de script: module, importmap, speculationrules.
  • Destaque a sintaxe dos tipos de script importmap e speculationrules, que contêm JSON.

Antes e depois do estilo de formatação e destaque de sintaxe do tipo de script de regras de especulação.

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

Problema do Chromium: 1473875.

Emular o recurso de mídia de transparência preferencial

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 do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Melhorias de 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, mova o foco para o botão Salvar ao lado dos snapshots com Tab 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 os tipos de recursos mais usados: 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).
  • Issues agora preserva os problemas de cookies nas navegações (1466601).
  • Vários aplicativos > Melhorias no pré-carregamento, em especial grades classificáveis e detalhes revisados do conjunto de regras (1410709).
  • Várias melhorias do editor de comando em Protocolo de monitoramento, principalmente avisos sobre uma entrada incorreta, edição de um comando enviado, editor de parâmetros de objeto sem chaves predefinidas, suporte para enumerações indefinidas por referências, objetos sem referência de tipo, filtros de comandos por correspondências de substring e muito mais (1448050).
  • O Flame Chart de Desempenho tem uma borda ao redor da caixa do total no gráfico de pizza (1470147).
  • Origens agora não tratam traços como caracteres de palavra em CSS (1471354).
  • O preenchimento automático agora sempre classifica as palavras-chave em CSS no final.
  • Os filtros de regex agora aceitam espaços (1346936).
  • Elementos: correção da detecção de recurso de consulta de mídia (1472693).

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.