Novidades do DevTools (Chrome 119)

Sofia Emelianova
Sofia Emelianova
GitHub

Seção @property aprimorada em Elementos > Estilos

Regra @property editável

Agora é possível editar a at-rule @property do CSS na seção correspondente do painel Elementos > Estilos.

O antes e o depois de tornar a regra de propriedade editável.

Problema do Chromium: 1471123.

Problemas com regras @property inválidas são informados

A guia Problemas agora informa problemas com declarações inválidas em regras @property.

Um problema com a regra de propriedade informado na guia "Problemas".

Problema do Chromium: 1473283.

Lista atualizada de dispositivos para emular

As strings de user agent em Configurações. Configurações > Dispositivos foram atualizadas para refletir o uso médio de navegadores e sistemas operacionais. Agora é possível emular mais dispositivos atualizados no modo dispositivo.

Antes e depois de atualizar a lista de dispositivos.

Problema do Chromium: 1479733.

Formatar JSON inline em tags de script em "Fontes"

O painel Fontes agora oferece suporte à impressão de JSON in-line em tags HTML <script> para facilitar a depuração.

O JSON inline antes e depois da impressão formatada na tag de script.

Problemas do Chromium: 406900, 1473875.

Preenchimento automático de campos particulares no console

Agora é possível usar o preenchimento automático de campos de classe particulares ao avaliá-los fora do escopo da classe no Console.

O antes e o depois com suporte ao preenchimento automático para campo de classe particular fora do escopo da classe.

Problemas do Chromium: 1483848, 1381806.

Lighthouse 11.1.0

O painel Lighthouse agora executa o Lighthouse 11.1.0. Confira 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.

Problemas do Chromium: 772558.

Melhorias na acessibilidade

Os leitores de tela vão ler o seguinte:

  • Avisos e erros no Console.
  • O texto na caixa de diálogo Você confia neste código? ao colar código no Console ou nas Fontes.

Além disso, o painel Application corrigiu problemas de contraste com links no modo de alto contraste.

Problemas do Chromium: 1485257, 1486643, 1485263.

Descontinuação do Web SQL

A seção Application > Web SQL será removida no Chrome 123 porque a API Web SQL Database não é mais mantida. Esta versão adiciona um aviso à seção sobre a remoção futura.

O aviso de descontinuação do Web SQL.

Para mais informações, consulte Como descontinuar e remover o Web SQL.

Problemas do Chromium: 1485966.

Manifesto"" id="manifest-aspect-ratio" tabindex="-1">Validação da proporção da captura de tela em "Aplicativo" > "Manifesto"

A seção Aplicativo > Manifesto agora verifica se as capturas de tela do seu web app com o mesmo fator de forma (wide ou narrow) têm a mesma proporção.

Um aviso sobre a proporção incorreta de capturas de tela com o mesmo fator de forma.

Para mais informações, consulte Depurar Progressive Web Apps e Adicionar um manifesto de app da Web.

A equipe do DevTools agradece a Alexey Rodionov por implementar essa mudança e outras melhorias no aviso do manifesto na versão anterior.

Problema do Chromium: 1476656.

Destaques diversos

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

  • Elementos:
    • As amostras de função de tempo de animação não são mostradas para propriedades CSS longhand nas abreviações expansíveis (1149182).
    • O preenchimento automático de contain-intrinsic-* agora não fornece o valor único incorreto auto porque ele deve ser auto <length> (1480415).
    • O suporte a propriedades -webkit-* descontinuadas e inválidas foi removido (1086089, 1030765).
  • Pontos de interrupção: correção do bug com o desaparecimento da caixa de diálogo de edição de ponto de interrupção quando o tipo de ponto de interrupção é alterado (1485782).
  • Performance:
    • O erro de análise de cores durante a gravação de performance foi corrigido (1480205).
    • Correção do bug em que o LCP não aparecia na faixa Timings (1487136).
  • Rede: a coluna Definir cookies agora mostra o número correto de cookies definidos, excluindo os bloqueados (1486903).
  • As extensões do DevTools agora são carregadas após a navegação para um host não bloqueado (1476264).
  • Correção do bug com contexto de execução de script incorreto para extensões (1275331).

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.

Novidades no DevTools

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