Novidades do DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Esta é a 100a versão do Chrome! O Chrome DevTools continuará oferecendo ferramentas confiáveis para os desenvolvedores criarem na Web. Reserve um momento para clicar na guia O que há de novo e comemorar os marcos.

Como de costume, você pode assistir o vídeo mais recente O que há de novo no DevTools clicando na imagem.

Consultar e editar @supports em regras no painel Styles

Agora é possível visualizar e editar o CSS @supports nas regras no painel Estilos. Essas alterações facilitam a experiência com regras em tempo real. Abra esta página de demonstração, inspect o elemento <div class=”box”> e consulte as regras do @supports no painel Estilos. Clique na declaração da regra para editá-la.

Ver e editar @supports em regras

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 os elementos com os seguintes atributos:

  • data-testid
  • teste de dados
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • teste de dados

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. Insira um endereço de e-mail e observe o valor do seletor.

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

Compatibilidade com 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 do seletor. Preencha um endereço de e-mail e observe o valor do seletor ([data-automate=email-address]).

Personalizar o seletor da gravação

Resultado da seleção do seletor personalizado

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.

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 Origens durante a depuração para conferir as propriedades dela. Antes, só era mostrado 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 parcialmente apresentados no painel "Performance"

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

Antes, a linha do tempo Frames visualizava todos os frames com atraso no trabalho 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) impulsionadas pela linha de execução do compositor.

Isso confunde o usuário, porque as capturas de tela desses "frames descartados" ainda estão refletindo atualizações visuais.

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

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

Problema do Chromium: 1261130

Destaques diversos

Estas são algumas correções importantes nesta versão:

  • Atualização das strings do user agent iPhone para dispositivos emulados. Todas as versões do iPhone posteriores a 5 têm uma string de user agent com o iPhone OS 13_2_3. (1289553).
  • Agora você pode salvar o 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 nomes de variáveis de escopo minimizados, apesar do mapa de origem ser fornecido. (1294682).
  • O painel Origens agora restaura corretamente a posição de rolagem durante o carregamento da página. Antes, a posição não era restaurada corretamente, causando inconveniências 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59