Novidades do DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Depuração aprimorada de folhas de estilo ausentes

O DevTools recebe uma série de melhorias para ajudar a identificar e depurar problemas com folhas de estilo ausentes mais rapidamente:

  • No menu Fontes > A árvore de páginas agora mostra apenas as folhas de estilo implantadas e carregadas para minimizar a confusão.
  • No menu Fontes > O Editor agora sublinha e mostra dicas de erro inline ao lado das instruções @import, url() e href com falha.

Instruções sublinhadas com dicas no painel Origens.

  • O Console, além dos links para solicitações com falha, agora fornece links para a linha exata que faz referência a uma folha de estilo que não foi carregada.

O console fornece links para as linhas exatas com declarações problemáticas.

  • O painel Rede preenche consistentemente a coluna Iniciador com links para a linha exata que faz referência a uma folha de estilo que falhou ao carregar.

  • O painel Problemas lista todos os problemas de carregamento das folhas de estilo, incluindo URLs corrompidos, solicitações com falha e instruções @import mal colocadas.

O painel "Problemas" com links para fontes e solicitações.

Problemas do Chromium: 1440626, 1442198 e 1453611.

Suporte a tempo linear em Elementos > Estilos > Editor de easing

O Editor de easing. editor de easing em Elementos > Com os Estilos, é possível ajustar os valores de transition-timing-function e animation-timing-function com um clique. Nesta versão, o Easing Editor Editor de easing. recebe suporte à função de tempo linear.

Para configurar tempos lineares, clique no botão do seletor linear. Para adicionar um ponto de controle, clique em qualquer lugar da linha. Para remover um ponto de controle, clique duas vezes nele. Também é possível escolher uma das predefinições: linear, elastic, bounce ou emphasized. Assista ao vídeo para ver o ajuste linear em ação.

Problema do Chromium: 1421241.

Suporte a buckets de armazenamento e visualização de metadados

A página Application > A seção Armazenamento recebe suporte para buckets de armazenamento. Os buckets de armazenamento são independentes entre si. Por isso, é possível especificar a priorização de remoção para fatias de dados e garantir que os dados mais valiosos não sejam excluídos. Cada bucket de armazenamento pode armazenar dados associados a APIs de armazenamento estabelecidas, como IndexedDB e CacheStorage.

Confira este violino para testar o recurso. Abra o DevTools e navegue até Aplicativo > Armazenamento > Indexed DB e execute o código. O DevTools agora mostra os buckets e o conteúdo deles. Selecione um bucket para exibir os metadados dele.

Visualização dos metadados de um bucket.

A visualização unificada de metadados agora também está disponível para seções de armazenamento local, de sessão e em cache.

A nova visualização unificada de metadados.

Problemas do Chromium: 1448011, 1406017.

Lighthouse versão 10.3.0

O painel Lighthouse agora executa o Lighthouse 10.3.0. Mais especificamente, essa versão adiciona quatro novas auditorias que capturam vários problemas de acessibilidade com cabeçalhos de tabela e legendas, nomes dos botões de entrada e incompatibilidades de idioma. Exemplo:

Uma verificação de cabeçalhos de tabela aprovada.

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.

Acessibilidade: comandos do teclado e melhor leitura de tela

O DevTools agora oferece suporte a mais atalhos e corrige problemas com leitores de tela:

  • Agora você pode abrir o menu de contexto com um atalho de teclado, como Shift + F10 no Windows e em muitas distribuições do Linux. Para atalhos do MacOS, consulte Ações alternativas do ponteiro.
  • Aplicativos de leitor de tela:
    • Os rótulos das caixas de seleção não são anunciados desnecessariamente duas vezes.
    • Os nomes dos cabeçalhos das colunas classificáveis serão anunciados quando você pressionar a opção "Ler cabeçalho da coluna" atalho.

A equipe do DevTools agradece Yanling Wang e Elorm Coch (links em inglês) pelas melhorias.

Problemas do Chromium: 1446482, 1414952.

Destaques diversos

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

  • O painel Network continua registrando a atividade da rede mesmo depois que você interage com a linha do tempo (1422552).
  • O painel Cobertura agora reconhece se houve ativação de pré-renderização ou navegação no cache de avanço e retorno e solicita a atualização (1393057).
  • Agora você pode navegar em Fontes > Painel Breakpoints com o teclado: seta para cima e seta para baixo para mover e espaço para selecionar (1446150).
  • Corrigimos o upload e a filtragem de arquivos HAR no painel Network (1450622).
  • O Flame Chart no painel Desempenho agora coloca pequenas lacunas entre os rastros para melhor renderizá-los (1452150).
  • Correção do mapeamento automático para arquivos incorporados em mapas de origem (1446383).

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.