Novidades do DevTools (Chrome 115)

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.

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.

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

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.

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é e ative-o > Configurações > Privacidade e segurança > Cookies e outros dados do site > 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.

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.

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 > Lista de ignorados > 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 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.

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.

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

Problemas do Chromium: 1382752, 1385374.

Destaques diversos

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

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