Novidades do DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Esta é a 100a versão do Chrome! O Chrome DevTools continuará fornecendo ferramentas confiáveis para os desenvolvedores criarem na Web. Tire um momento para explorar a guia Novidades e comemorar os marcos atingidos.

Como sempre, você pode assistir o vídeo mais recente do DevTools clicando na imagem.

Veja e edite as regras @supports em no painel "Styles"

Agora você pode ver e editar as regras em CSS @supports no painel Styles. Essas alterações facilitam testar as regras em tempo real. Abra esta página de demonstração, inspecione o elemento <div class=”box”> e confira as regras nas regras @supports no painel Estilos. Clique na declaração da regra para editá-la.

Problemas do Chromium: 1222574, 1222573

Melhorias no painel do Gravador

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
• dados-qa
• cisão dos dados
• 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 como seletor automaticamente 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. inicie uma nova gravação e insira data-automate como o atributo do 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 da gravação.

Visualizar propriedades de classes/funções ao passar o cursor

Agora você pode passar o cursor sobre uma classe ou função no painel Sources durante a depuração para visualizar as propriedades dela. 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 parcialmente apresentados no painel "Desempenho"

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

Antes, a linha do tempo Frames visualiza todos os frames com trabalho atrasado da 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) geradas pelo thread do compositor.

Isso causa confusão no usuário, porque as capturas de tela desses "frames removidos" ainda refletem atualizações visuais.

Os novos "Frames parcialmente apresentados" tem como objetivo indicar de forma mais intuitiva que, embora alguns conteúdos não sejam apresentados em tempo hábil no frame, o problema não é tão grave a ponto de bloquear totalmente as atualizações visuais.

Problema do Chromium: 1261130

Destaques diversos

Estas são 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 a 5 têm uma string user agent com o iPhone OS 13_2_3. (1289553).
• Agora você pode salvar snippet diretamente como um arquivo JavaScript. Anteriormente, era necessário anexar a extensão de arquivo .js manualmente. (1137218).
• O painel Origens agora mostra corretamente os nomes das variáveis de escopo ao depurar com o mapa de origem. Antes, o painel Origens mostrava os nomes das variáveis de escopo minificados, mesmo com o mapa de origem. (1294682).
• O painel Origens agora restaura corretamente a posição de rolagem no carregamento da página. Antes, 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 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   > 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.