Novidades do DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Melhorias nos elementos

Novo selo de subgrade de CSS

O painel Elementos recebe um novo selo subgrid para subgrid. No momento, esse recurso é experimental no Chrome Canary.

Para inspecionar e depurar uma grade aninhada que é uma subgrade e, portanto, herda o número e o tamanho das faixas do elemento pai, clique no selo. Ela ativa uma sobreposição que mostra colunas, linhas e seus números na parte superior do elemento na janela de visualização.

O selo da subgrade e a sobreposição na janela de visualização.

Para conferir a lista de todos os selos no painel Elementos, consulte a Referência de selos.

Problema do Chromium: 1442536.

Especificidade do seletor nas dicas

Em Elementos > Estilos, passe o cursor sobre o nome de um seletor para conferir o peso de especificidade dele em uma dica.

Uma dica com peso de especificidade de um seletor.

Problema do Chromium: 1204932.

Valores de propriedades CSS personalizadas em dicas

Em Elementos > Estilos, passe o cursor sobre o nome de uma propriedade CSS personalizada para ver o valor dele em uma dica.

A dica com um valor da propriedade CSS personalizada.

A equipe do DevTools gostaria de agradecer a Date丝 e Suyan por essa melhoria.

Problema do Chromium: 1380779.

Melhorias nas fontes

Destaque da sintaxe CSS

O painel Sources recebe o seguinte para arquivos CSS pré-processados, como SASS, SCSS e LESS:

  • Destaque de sintaxe.
  • Compatibilidade com editores inline. Esses editores são semelhantes aos de Elementos > Estilos, por exemplo, Color Picker e Easing Editor.

Melhorias no destaque da sintaxe CSS e no suporte a editores inline no Source.

Problemas do Chromium: 1302261, 1392085.

Atalho para definir pontos de interrupção condicionais

Agora é possível definir pontos de interrupção condicionais mais rapidamente com um atalho. Para abrir a caixa de diálogo do ponto de interrupção, mantenha a tecla Command (MacOS) ou Control (Windows / Linux) pressionada e clique no número da linha na coluna esquerda de Sources > Editor.

O número da linha na coluna esquerda e a caixa de diálogo do ponto de interrupção.

Problema do Chromium: 1405767.

Aplicativo > Mitigações de rastreio por redirecionamento

Com o experimento de mitigações de rastreio por redirecionamento no Chrome, é possível identificar e excluir o estado de sites que parecem realizar rastreamento entre sites usando a técnica de rastreamento de rejeições. A página Application > O painel Serviços em segundo plano tem uma nova guia Mitigações de rastreamento por redirecionamento que permite forçar manualmente as mitigações de rastreamento e lista os sites cujos estados foram excluídos.

Confira este recurso de segurança:

  1. Bloquear cookies de terceiros no Chrome. Navegue até Menu de três pontos. e ative-o > Configurações > Segurança. Privacidade e segurança > Cookies e outros dados do site > Botão de opção marcado. Bloquear cookies de terceiros.
  2. Em chrome://flags, defina o experimento Mitigações de rastreamento por redirecionamento como Ativada com exclusão.
  3. Inspecione esta página de demonstração e abra Aplicativo > Serviços em segundo plano > Mitigações de rastreio por redirecionamento: clique em um link de rejeição na página, aguarde (10 segundos) para o Chrome registrar a rejeição e clique em Forçar execução para excluir o estado imediatamente.

As mitigações de rastreio por redirecionamento listam uma exclusão de estado.

Além disso, a guia Problemas avisa sobre a próxima exclusão de estado.

Problema do Chromium: 1432303.

Lighthouse versão 10.2.0

O painel Lighthouse agora executa o Lighthouse 10.2.0. Mais especificamente, a verificação Largest Contentful Paint gera uma tabela com cálculos de fase para limitações simuladas e do DevTools. Veja também a lista completa de mudanças.

A tabela de fases da LCP.

Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Ignorar scripts de conteúdo por padrão

Em Configurações. Configurações > Lista de ignorados > Caixa de seleção. Os scripts de conteúdo injetados por extensões agora estão ativados por padrão.

Com essa configuração ativada:

  • O Debugger ignora esses scripts e não é interrompido em exceções geradas por eles.
  • No menu Fontes > O painel Call Stack ignora frames ignorados. Para desativar esse recurso aqui, marque Caixa de seleção. Mostrar frames na lista de ignorados.
  • O Console recolhe frames ignorados nos stack traces. Clique em Mostrar N mais frames para expandir e Mostrar menos para fechar novamente.

Scripts de conteúdo injetados por extensões ativadas por padrão. Para encontrar essa opção, acesse "Configurações" e depois "Lista de ignorados".

Além disso, as caixas de seleção em Lista de ignorados ficaram mais claras.

Problemas do Chromium: 1440958, 1364501.

Rede > Responder com estilo de formatação por padrão

No campo Rede > O painel Response agora cria corpos de resposta reduzidos por padrão, semelhante ao painel Sources.

O estilo de formatação foi ativado na janela "Response" da guia "Network".

Além disso, os arquivos SVG recebem destaque de sintaxe.

Destaque da sintaxe SVG.

Problemas do Chromium: 1382752, 1385374.

Destaques diversos

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

  • Configurações. Configurações > Dispositivos: adicionamos o Facebook para Android v407 no Pixel 6 à lista de strings do agente.
  • Rede: foi adicionado o atalho Limpar registro de rede (1444991):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • Remoção do Gravador > Gravação N > opção do menu suspenso Painel de insights de desempenho (1414773).
  • As folhas de estilo que apresentaram falha no carregamento agora estão ocultas na árvore do navegador (1386059).
  • Desempenho: correção da exibição incorreta da faixa Interactions expansível (1432510).
  • Elementos: as folhas de estilo que apresentaram falha no carregamento agora são sublinhadas com linhas onduladas (1440626).
  • O Debugger não entra automaticamente no WebAssembly quando não há plug-ins para a respectiva linguagem (1443342).
  • O atalho que move o cursor uma palavra por vez é restaurado para arquivos CSS em Origens > Editor (1241848):
    • MacOS: Alt + seta
    • Windows/Linux: Ctrl + seta

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.