Novidades do DevTools (Chrome 116)

Depuração aprimorada de folhas de estilo ausentes

O DevTools recebe várias melhorias para ajudar você 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.
• O Fontes > Editor agora sublinha e mostra dicas de ferramentas de erro inline ao lado das instruções @import, url() e href com falha.

• 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 painel Rede preenche consistentemente a coluna Iniciador com links para a linha exata que faz referência a uma folha de estilo que não foi carregada.

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

Problemas do Chromium: 1440626, 1442198, 1453611.

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

O Editor de suavização em Elementos > Estilos permite ajustar os valores transition-timing-function e animation-timing-function com um clique. Nesta versão, o Editor de suavização recebe suporte para a 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 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 ver 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 agora tem suporte para buckets de armazenamento. Os buckets de armazenamento são independentes uns dos outros. Assim, você pode 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 fiddle para testar o recurso. Abra o DevTools, navegue até Application > Storage > Indexed DB e execute o código. Agora, o DevTools mostra os buckets e o conteúdo deles. Selecione um bucket para ver os metadados dele.

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

Problemas do Chromium: 1448011, 1406017.

Lighthouse 10.3.0

O painel Lighthouse agora executa o Lighthouse 10.3.0. Principalmente, 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:

Consulte também a lista completa de mudanças. Para aprender o básico sobre como usar o 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 é possível 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 desnecessariamente os rótulos das caixas de seleção duas vezes.
  • Anuncia os nomes dos cabeçalhos das colunas classificáveis quando você pressiona o atalho "Ler cabeçalho da coluna".

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

Problemas do Chromium: 1446482, 1414952.

Destaques diversos

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

• O painel Rede continua gravando a atividade de 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 pelo cache de avanço e retorno e pede que você recarregue (1393057).
• Agora é possível navegar no painel Fontes > Pontos de interrupção 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 Rede (1450622).
• O diagrama de chamas no painel Performance agora coloca pequenos intervalos entre os rastreamentos para renderizá-los melhor (1452150).
• Correção do mapeamento automático para arquivos incorporados em mapas de origem (1446383).

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