Novidades do DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Esta é a 100ª versão do Chrome! O Chrome DevTools vai continuar oferecendo ferramentas confiáveis para desenvolvedores criarem na Web. Navegue pela guia O que há de novo para comemorar os marcos.

Como de costume, você pode assistir o vídeo mais recente Novidades no DevTools clicando na imagem.

Acessar e editar regras @supports em regras no painel "Estilos"

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

Acessar e editar regras de @supports

Problemas do Chromium: 1222574, 1222573

Melhorias no painel do Gravador

Oferecer suporte a 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, iniciar 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 como o seletor automaticamente em vez dos atributos id ou class.

Oferecer suporte a seletores comuns por padrão

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. Inicie uma nova gravação e insira data-automate como o atributo de seletor. Preencha um endereço de e-mail e observe o valor do seletor ([data-automate=email-address]).

Personalizar o seletor da gravação

O resultado da seleção do seletor personalizado

Renomear uma gravação

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

Renomear uma gravação

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

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

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

Problema do Chromium: 1049947

Frames mostrados 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 de linha principal atrasado como "frames perdidos". No entanto, há casos em que alguns frames ainda podem produzir atualizações visuais (por exemplo, rolagem) controladas pela linha de execução do compositor.

Isso leva à confusão do usuário, porque as capturas de tela desses "frames descartados" ainda refletem atualizações visuais.

O novo "Frames parcialmente apresentados" tem como objetivo indicar de forma mais intuitiva que, embora parte do conteúdo não seja apresentada no tempo certo no frame, o problema não é tão grave a ponto de bloquear as atualizações visuais.

Frames mostrados parcialmente no painel &quot;Performance&quot;

Problema do Chromium: 1261130

Destaques diversos

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

  • Atualizamos as strings do user agent do iPhone para dispositivos emulados. Todas as versões do iPhone a partir da 5 têm uma string de user-agent com o iPhone OS 13_2_3. (1289553).
  • Agora é possível salvar o snippet como um arquivo JavaScript diretamente. 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. Anteriormente, o painel Origens mostrava nomes de variáveis de escopo minificados, mesmo que o mapa de origem fosse fornecido. (1294682).
  • O painel Origens agora restaura a posição de rolagem corretamente no carregamento da página. Anteriormente, a posição não era restaurada corretamente, causando inconvenientes na depuração. (1294422).

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.