Novidades do DevTools (Chrome 115)

Melhorias nos elementos

Novo selo de subgrade CSS

O painel Elementos recebe um novo ícone subgrid para subgrid. No momento, esse recurso está em fase 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 ícone. Ele alterna 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 em dicas

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

Problema do Chromium: 1204932.

Valores de propriedades CSS personalizadas em dicas

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

A equipe do DevTools agradece a 一丝 e Suyan por implementarem essa melhoria.

Problema do Chromium: 1380779.

Melhorias nas fontes

Destaque de sintaxe CSS

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

• Destaque de sintaxe.
• Suporte para editores in-line. Esses editores são semelhantes aos de Elementos > Estilos, por exemplo, o Seletor de cores e o Editor de suavização.

Problemas do Chromium: 1302261, 1392085.

Atalho para definir pontos de interrupção condicionais

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

Problema do Chromium: 1405767.

Aplicativo > Mitigações de rastreio por redirecionamento

O experimento Mitigações de rastreio por redirecionamento no Chrome permite identificar e excluir o estado de sites que parecem realizar rastreamento entre sites usando a técnica de rastreio por redirecionamento. O painel Aplicativo > Serviços em segundo plano recebe uma nova guia Mitigações de rastreamento de rejeição, 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é > Configurações > Privacidade e segurança > Cookies e outros dados do site > Bloquear cookies de terceiros e ative essa opção.
2. Em chrome://flags, defina o experimento Mitigações de rastreio por redirecionamento como Ativado com exclusão.
3. Inspecione esta página de demonstração, abra Application > Background Services > Bounce Tracking Mitigations, clique em um link de rejeição na página, aguarde 10 segundos para que o Chrome registre a rejeição e clique em Force run para excluir o estado imediatamente.

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

Problema do Chromium: 1432303.

Lighthouse 10.2.0

O painel Lighthouse agora executa o Lighthouse 10.2.0. Principalmente, a verificação de Maior exibição de conteúdo recebe uma tabela com cálculos de fase para simulação e limitação do DevTools. Consulte 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.

Ignorar scripts de conteúdo por padrão

A opção Configurações > Lista de bloqueio > Scripts de conteúdo injetados por extensões agora está ativada por padrão.

Com essa configuração ativada:

• O depurador ignora esses scripts e não para em exceções geradas por eles.
• O painel Fontes > Pilha de chamadas ignora frames ignorados. Para desativar a opção de pular aqui, marque Mostrar frames na lista de ignorados.
• O Console recolhe frames ignorados em stack traces. Clique em Mostrar mais N frames para expandir e em Mostrar menos para recolher novamente.

Além disso, as caixas de seleção em Lista de ignorados agora têm um texto mais claro.

Problemas do Chromium: 1440958, 1364501.

Rede > Impressão formatada de respostas por padrão

O painel Rede > Resposta agora imprime corpos de resposta minimizados por padrão, semelhante ao painel Fontes.

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

Problemas do Chromium: 1382752, 1385374.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Configurações > Dispositivos: adicionamos o Facebook para Android v407 no Pixel 6 à lista de strings de agente.
• Rede: adicionamos o atalho Limpar registro de rede (1444991):
  • macOS: Command + K
  • Windows/Linux: Control + L
• Removemos a opção do menu suspenso Gravador > Gravação N > Painel de insights de performance (1414773).
• As folhas de estilo que não foram carregadas agora estão ocultas na árvore do navegador (1386059).
• Performance: corrigimos a exibição incorreta da faixa expansível Interações (1432510).
• Elementos: as folhas de estilo que não foram carregadas agora são sublinhadas com linhas onduladas (1440626).
• O depurador não entra automaticamente no WebAssembly quando não há um plug-in para o respectivo idioma (1443342).
• O atalho que move o cursor uma palavra por vez foi restaurado para arquivos CSS em Fontes > Editor (1241848):
  • macOS: Alt + Seta
  • Windows/Linux: Ctrl + Seta

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada aos DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.