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

Published on Updated on

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

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

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

Prévia de funcionalidade: Novo painel de insights de performance

Use o novo painel de Performance insights para obter sugestões e dicas acionáveis orientadas a casos de uso na performance do seu website.

Abra o painel e comece uma nova gravação baseada no seu caso de uso. Por exemplo, vamos medir a carga dessa página de exemplo.

Novo painel de performance insights

Uma vez que a gravação for completada, você vai receber dicas e sugestões no painel Insights. Clique em cada item (por exemplo, "requisição bloqueando o render", "mudança de layout") para entender melhor o problema e potenciais soluções.

Vá até a documentação do painel de Performance insights para aprender mais com os tutoriais passo-a-passo.

Essa é uma funcionalidade ainda em prévia para ajudar devs (especialmente quem não é especialista em performance) a identificar e consertar potenciais problemas de performance. Nosso time está ativamente trabalhando nessa funcionalidade e precisamos do seu feedback para mais melhorias.

Issue relacionada: 1270700

Novos atalhos para emular temas claros e escuros

Você pode agora emular temas claros e escuros mais facilmente (veja a media query CSS chamada prefers-color-scheme) com os novos atalhos no painel Estilos.

Anteriormente, eram necessários mais passos para emular temas na aba de Renderização.

Novos atalhos para emular temas claros e escuros

Issue relacionada: 1314299

Melhorias na segurança da aba de Visualização de Rede

O DevTools agora aplica o Content Security Policy (CSP) na aba Preview no painel Rede

Por exemplo, a primeira imagem mostra uma página que contém conteúdo misto. A página carrega em uma conexão HTTPS segura, mas o CSS é lido a partir de uma conexão HTTP insegura.

O browser bloqueia essa requisição para o CSS por padrão. No entanto, quando você abria a página através da aba Preview no painel Rede, o CSS não estava bloqueado antes (por isso o fundo fica vermelho). Agora está bloqueado, como é de se esperar (segunda imagem).

Melhorias na segurança da aba de Visualização de Rede

Issue relacionada: 833147

Melhorias no reload em breakpoints

O debugger agora termina a execução de um script quando recarregado em um breakpoint.

Por exemplo, o script ficou preso em um loop infinito antes quando criamos e recarregamos o breakpoint ReactDOM nessa demonstração em React. O painel Sources quebrou por conta desse loop.

Continuar executando JavaScript está causando muitos problemas para devs e pode deixar o renderizador quebrado. Essa mudança alinha o comportamento do debugger com outros browsers, como o Firefox.

Melhorias no reload em breakpoints

Issues relacionadas: 1014415, 1004038, 1112863, 1134899

Atualizações no Console

Tratamento de erros de execução de script no Console

Erros durante a execução de um script no Console agora geram os eventos corretos de erro que ativam a chamada window.onerror e são enviados como eventos do tipo "error" para o objeto window.

Tratamento de erros de execução de script no Console

Issue relacionada: 1295750

Enter para enviar uma live expression

Quando você terminar de digitar uma live expression, você pode apertar Enter para enviá-la. Anteriormente, apertar Enter resultava na adição de novas linhas. Isso era inconsistente com outras partes do DevTools.

Para adicionar uma nova linha no editor de live expressions use Shift + Enter.

Enter para enviar uma live expression

Issue relacionada: 1260744

Cancelamento de gravações de fluxo de usuário no início

Você pode cancelar a gravação durante o início de um registro de fluxo de usuário. Anteriormente não havia essa opção.

Cancelamento de gravações de fluxo de usuário no início

Issue relacionada: 1257499

Veja pseudo-elementos herdados de seleção no painel de Estilos

Veja os pseudo-elementos herdados relativos à seleção (como ::selection, ::spelling-error, ::grammar-error e ::highlight) diretamente no painel Estilos. Anteriormente, essas regras não eram exibidas.

Como a especificação menciona, quando múltiplos estilos são conflitantes, a cascata de estilos determina quem "venceu". Essa nova funcionalidade ajuda você a entender a herança e a prioridade de cada uma das regras.

No momento, você precisa executar o Chrome com a flag --enable-blink-features=HighlightInheritance para ativar essa funcionalidade.

Veja pseudo-elementos herdados de seleção no painel de Estilos

Issue relacionada: 1024156

Outras novidades

Essas são algumas melhorias dignas de nota nessa atualizacão:

  • O painel Propriedades agora mostra os acessores de cada propriedade com seus valores por padrão. Ele estava escondido por um erro anteriormente. (1309087)
  • O painel Estilos agora mostra as regras sobrescritas de @support de forma correta como riscadas. Anteriormente elas não estavam sendo exibidas nesse estilo. (1298025)
  • Logica de formação de CSS no painel de Fontes que causava múltiplas linhas em branco quando editando CSS foi corrigida. (1309588)
  • Limitação de, no máximo, 100 para a opção expandir recursivamente em qualquer objeto no console para que ele não seja executado para sempre em objetos com referência circular. (1272450)

[Experimental] Copie mudanças de CSS

Para ativar esse experimento, ative a flag Sync CSS changes in the Styles pane no painel Configurações > Experimentos

Com esse experimento, o painel Estilos vai destacar suas mudanças no CSS na cor verde. Você pode passar o mouse sobre as regras alteradas e clicar no novo botão de copiar ao lado para poder copiar para a área de transferência.

Além disso, você pode copiar mudanças no CSS entre declarações ao clicar com o botão direito em qualquer regra e selecionar Copiar todas as mudanças de CSS.

Um novo botão Copiar foi adicionado à aba de Mudanças para te ajudar a manter o controle e copiar suas mudanças de forma fácil.

Copie mudanças de CSS

Issue relacionada: 1268754

[Experimental] Escolhendo cores fora do browser

Para ativar esse experimento, ative a flag Enable color picking outside the browser window no painel Configurações > Experimentos

Ative esse experimento para poder selecionar cores fora da janela do browser com o conta-gotas. Anteriormente você só podia selecionar cores limitadas à janela do browser.

No painel Estilos, clique em qualquer quadrado de pré-visualização de cores para abrir o seletor de cores. Use o conta-gotas para selecionar uma cor de qualquer lugar.

Escolhendo cores fora do browser

Issue relacionada: 1245191

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.