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 @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.

  

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

  

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

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

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.

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 entradas incorretas, edição de um comando enviado, editor de parâmetros de objeto sem chaves predefinidas, suporte a 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   > 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.