O que há de novo no DevTools (Chrome 100)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Chrome 100

Aqui está a 100ª versão do Chrome! O Chrome DevTools continuará a fornecer ferramentas confiáveis para os desenvolvedores criarem na web. Reserve um momento para clicar na guia O que há de novo para comemorar os marcos.

Como de costume, você pode assistir ao último vídeo What's New in DevTools clicando na imagem.

Visualize e edite @supports em rules no painel Estilos

Agora você pode visualizar e editar as at-rules do CSS @supports no painel Estilos. Essas alterações facilitam a experiência com as rules em tempo real.

Abra esta página de demonstração, inspecione o elemento <div class=”box”>, visualize as rules do @supports no painel Estilos. Clique na declaração da rule para editá-la.

Visualize e edite @supports em rules

Issues relacionadas: 1222574, 1222573

Melhorias no painel Gravação

Suporte a seletores comuns por padrão

Ao determinar um seletor exclusivo durante a gravação, o painel Gravação agora seleciona 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 teste.

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 email tem data-testid definido, ele é usado como seletor automaticamente em vez dos atributos id ou class.

Suporte a seletores comuns por padrão

Personalize o seletor de gravação

Você pode personalizar o seletor de uma gravação se não estiver usando os seletores comuns.

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

Personalização do seletor de gravação O resultado da seleção do seletor personalizado

Renomeação de gravação

Agora você pode 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.

Renomeação de gravação

Visualização de propriedades de classe/função ao passar o mouse

Agora você pode passar o mouse sobre uma classe ou função no painel Sources durante a depuração para visualizar as suas propriedades. Anteriormente, ele mostrava apenas o nome da função e um link para sua localização no código-fonte.

Visualização de propriedades de classe/função ao passar o mouse

Issue relacionada: 1049947

Quadros parcialmente apresentados no painel Desempenho

A gravação de desempenho agora exibe uma nova categoria de quadro "Quadros parcialmente apresentados" na linha do tempo Frames.

Anteriormente, a linha do tempo Frames visualizava todos os frames com atraso na main-thread como "frames descartados". No entanto, há casos em que alguns quadros ainda podem produzir atualizações visuais (por exemplo, rolagem) conduzidas pela compositor thread.

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

O novo "Quadros parcialmente apresentados" visa indicar de forma mais intuitiva que, embora alguns conteúdos não sejam apresentados em tempo hábil no quadro, o problema não é tão grave a ponto de bloquear totalmente as atualizações visuais.

Quadros parcialmente apresentados no painel Desempenho

Issue relacionada: 1261130

Destaques diversos

Estas são algumas correções dignas de nota nesta versão:

  • Strings de agente do usuário do iPhone atualizadas 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, você precisava anexar a extensão de arquivo .js manualmente. (1137218)
  • O painel Sources agora exibe corretamente os nomes das variáveis de escopo ao depurar com o mapa de origem. Anteriormente, o painel Sources exibia nomes de variáveis de escopo reduzidos, apesar do sourcemap ser fornecido. (1294682)
  • O painel Sources agora restaura a posição de rolagem corretamente no carregamento da página. Anteriormente, a posição não era restaurada corretamente causando transtornos na depuração. (1294422)

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.