Novidades do DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Depuração aprimorada de folhas de estilo ausentes

As Ferramentas do desenvolvedor receberam várias melhorias para ajudar a identificar e depurar problemas com folhas de estilo ausentes mais rapidamente:

  • A árvore Fontes > Página agora mostra apenas as folhas de estilo implantadas e carregadas com sucesso para minimizar a confusão.
  • A seção Fontes > Editor agora sublinha e mostra dicas de erros inline ao lado de instruções @import, url() e href com falha.

Declarações sublinhadas com dicas no painel "Origens".

  • O Console, além de 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 instruções problemáticas.

  • O painel Network preenche consistentemente a coluna Initiator com links para a linha exata que faz referência a uma folha de estilos que não foi carregada.

  • O painel Issues lista todos os problemas de carregamento de folhas de estilo, incluindo URLs inválidos, solicitações com falha e instruções @import fora do lugar.

Painel de problemas com links para fontes e solicitações.

Problemas do Chromium: 1440626, 1442198, 1453611.

Suporte a tempo linear em Elementos > Estilos > Editor de transição suave

O Editor de transição suave. Editor de transição em Elementos > Estilos permite ajustar os valores de transition-timing-function e animation-timing-function com um clique. Nesta versão, o Editor de transição Editor de transição suave. recebe suporte à função de tempo linear.

Para configurar os tempos lineares, clique no botão do seletor linear. Para adicionar um ponto de controle, clique em qualquer lugar na linha. Para remover um ponto de controle, clique duas vezes nele. Você também pode escolher uma das predefinições: linear, elastic, bounce ou emphasized. Assista o vídeo para conferir o ajuste linear em ação.

Problema do Chromium: 1421241.

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

A seção Application > Storage recebe suporte para buckets de armazenamento. Os buckets de armazenamento são independentes uns dos outros. Assim, você pode especificar a priorização de exclusã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 fiddle para testar o recurso. Abra o DevTools, navegue até Application > Storage > Indexed DB e execute o código. Agora, as Ferramentas do desenvolvedor mostram os buckets e o conteúdo deles. Selecione um bucket para conferir os metadados dele.

Visualização dos metadados de um bucket.

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

A nova visualização de metadados unificada.

Problemas do Chromium: 1448011, 1406017.

Lighthouse 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 de botões de entrada e incompatibilidades de idioma. Exemplo:

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

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.

Acessibilidade: comandos do teclado e leitura de tela aprimorada

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, por exemplo, 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:
    • Não vai anunciar os rótulos das caixas de seleção duas vezes de forma desnecessária.
    • Anuncia os nomes dos cabeçalhos das colunas ordenáveis quando você pressiona o atalho "Ler cabeçalho da coluna".

A equipe do DevTools agradece a Yanling Wang e Elorm Coch por essas melhorias.

Problemas do Chromium: 1446482, 1414952.

Destaques diversos

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

  • O painel Network continua registrando a atividade de rede mesmo depois que você interage com a linha do tempo (1422552).
  • O painel Coverage agora reconhece se houve ativação de pré-renderização ou navegação de cache de avanço e retorno e solicita que você recarregue (1393057).
  • Agora é possível navegar pelo painel Sources > Breakpoints com o teclado: seta para cima e seta para baixo para mover e espaço para selecionar (1446150).
  • Correção do upload e da filtragem de arquivos HAR no painel Network (1450622).
  • O diagrama de chamas no painel Performance agora coloca pequenas lacunas entre os rastros para renderizá-los melhor (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 navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.