Novidades do DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Viva a 100ª versão do Chrome! O Chrome DevTools vai continuar oferecendo ferramentas confiáveis para os desenvolvedores criarem na Web. Clique na guia O que há de novo para comemorar as conquistas.

Como de costume, clique na imagem para assistir o vídeo mais recente Novidades no DevTools.

Ver e editar regras @supports no painel "Estilos"

Agora é possível conferir e editar as regras @ @supports do CSS no painel Estilos. Essas mudanças facilitam o teste das regras em tempo real. Abra esta página de demonstração, inspecione o elemento <div class=”box”> e confira as regras-arroba @supports no painel Estilos. Clique na declaração da regra para editá-la.

Problemas do Chromium: 1222574, 1222573

Melhorias no painel do Gravador

Compatibilidade com seletores comuns por padrão

Ao determinar um seletor exclusivo durante a gravação, o painel Gravador agora prefere automaticamente elementos com os seguintes atributos:

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

Os atributos acima são seletores comuns usados na automação de testes.

Por exemplo, inicie uma nova gravação com esta página de demonstração. Preencha um endereço de e-mail e observe o valor do seletor.

Como o elemento de e-mail tem data-testid definido, ele é usado automaticamente como o seletor em vez dos atributos id ou class.

Personalizar o seletor da gravação

É possível personalizar o seletor de uma gravação se você não estiver usando os seletores comuns.

Por exemplo, esta página de demonstração usa o atributo data-automate como seletor. Comece uma nova gravação e insira data-automate como o atributo seletor. Preencha um endereço de e-mail e observe o valor do seletor ([data-automate=email-address]).

Renomear uma gravação

Agora é possível renomear uma gravação no painel Gravador com o botão de edição (ícone de lápis) ao lado do título dela.

Visualizar propriedades de classe/função ao passar o cursor

Agora, é possível passar o cursor sobre uma classe ou função no painel Fontes durante a depuração para visualizar as propriedades. Antes, ele só mostrava o nome da função e um link para a localização dela no código-fonte.

Problema do Chromium: 1049947

Frames apresentados parcialmente no painel "Performance"

A gravação de performance agora mostra uma nova categoria de frames "Frames parcialmente apresentados" na linha do tempo Frames.

Antes, a linha do tempo Frames mostrava todos os frames com trabalho atrasado na linha de execução principal como "frames descartados". No entanto, há casos em que alguns frames ainda podem produzir atualizações visuais (por exemplo, rolagem) impulsionadas pela thread do compositor.

Isso confunde o usuário, porque as capturas de tela desses "Frames descartados" ainda refletem atualizações visuais.

A nova métrica "Frames parcialmente apresentados" indica de maneira mais intuitiva que, embora parte do conteúdo não seja apresentada a tempo no frame, o problema não é tão grave a ponto de bloquear as atualizações visuais.

Problema do Chromium: 1261130

Destaques diversos

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

• Atualizamos as strings do user agent do iPhone para dispositivos emulados. Todas as versões do iPhone após o 5 têm uma string user-agent com o iPhone OS 13_2_3. (1289553)
• Agora você pode salvar um snippet diretamente como um arquivo JavaScript. Antes, era necessário anexar a extensão de arquivo .js manualmente. (1137218)
• O painel Fontes agora mostra corretamente os nomes das variáveis de escopo ao depurar com o mapa de origem. Antes, o painel Fontes mostrava nomes de variáveis de escopo minificados, mesmo com o mapa de origem fornecido. (1294682)
• O painel Fontes agora restaura a posição de rolagem corretamente ao carregar a página. Antes, a posição não era restaurada corretamente, causando inconvenientes na depuração. (1294422)

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 encontrem.

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.