Novidades do DevTools (Chrome 102)

Jecelyn Yeen

Recurso em pré-lançamento: novo painel de insights de desempenho

Use o painel Insights de desempenho para receber insights úteis e baseados em casos de uso sobre a performance do seu site.

Abra o painel e inicie uma nova gravação com base no seu caso de uso. Por exemplo, vamos medir o carregamento da página de demonstração.

Novo painel de insights de desempenho

Quando a gravação for concluída, os insights de desempenho vão aparecer no painel Insights. Clique em cada item de insight (por exemplo, solicitação de bloqueio de renderização, mudança de layout) para entender o problema e as possíveis correções.

Acesse a documentação do painel Insights de desempenho para conferir o tutorial detalhado.

Este é um recurso em fase de pré-lançamento para ajudar os desenvolvedores Web (especialmente especialistas que não trabalham com performance) a identificar e corrigir possíveis problemas de desempenho. Nossa equipe está trabalhando neste recurso e aguardamos seu feedback para mais melhorias.

Problema do Chromium: 1270700

Novos atalhos para emular temas claros e escuros

Agora você pode emular os temas claro e escuro mais rapidamente (recurso de mídia CSS prefers-color-scheme) com os novos atalhos no painel Styles.

Anteriormente, havia mais etapas para emular temas na guia Renderização.

Novos atalhos para emular temas claros e escuros

Problema do Chromium: 1314299

Segurança aprimorada na guia "Visualização da rede"

O DevTools agora aplica a Política de Segurança de Conteúdo (CSP) na guia Visualização do painel Rede.

Por exemplo, a primeira captura de tela mostra uma página que tem conteúdo misto. A página é carregada por uma conexão HTTPS segura, mas a folha de estilo é carregada por uma conexão HTTP não segura.

O navegador bloqueou a solicitação da folha de estilo por padrão. No entanto, quando você abriu a página pela guia Visualização no painel Rede, a folha de estilo não estava bloqueada anteriormente (por isso o plano de fundo ficou vermelho). Agora, ele está bloqueado, como esperado (segunda captura de tela).

Melhorar a segurança na guia "Network Preview"

Problema do Chromium: 833147

Melhoria no recarregamento no ponto de interrupção

Agora, o depurador encerra a execução do script ao recarregar no ponto de interrupção.

Por exemplo, o script entrou em um loop infinito anteriormente ao configurar e recarregar o ponto de interrupção ReactDOM nesta demonstração do React. O painel Sources foi interrompido devido ao loop infinito.

A continuidade da execução do JavaScript está causando muitos problemas para os desenvolvedores e pode deixar o renderizador em um estado corrompido. Essa mudança alinha o comportamento de depuração com outros navegadores, como o Firefox.

Melhoria no recarregamento no ponto de interrupção

Problemas do Chromium: 1014415, 1004038, 1112863, 1134899

Atualizações do console:

Solucionar erros de execução de script no console

Os erros durante a avaliação de script no Console agora geram eventos de erro adequados que acionam o gerenciador window.onerror e são enviados como eventos "error" no objeto da janela.

Solucionar erros de execução de script no console

Problema do Chromium: 1295750

Confirmar expressão ativa com Enter

Depois de digitar uma expressão ativa, você pode clicar em Enter para confirmá-la. Antes, novas linhas eram adicionadas ao pressionar Enter. Isso é inconsistente com outras partes do DevTools.

Para adicionar uma nova linha no editor de expressão ativa, use Shift + Enter.

Confirmar expressão ativa com Enter

Problema do Chromium: 1260744

Cancelar o registro de fluxo do usuário no início

Você pode cancelar a gravação durante o início do registro de fluxo do usuário. Antes, não havia a opção de cancelar a gravação.

Cancelar o registro de fluxo do usuário no início

Problema do Chromium: 1257499

Exibir pseudoelementos de destaque herdados no painel "Estilos"

Confira os pseudoelementos de destaque herdados (por exemplo, ::selection, ::spelling-error, ::grammar-error e ::highlight) no painel Estilos. Antes, essas regras não apareciam.

Como mencionado na especificação (link em inglês), quando vários estilos entram em conflito, a cascata determina o estilo vencedor. Esse novo recurso ajuda você a entender a herança e a prioridade das regras.

Exibir pseudoelementos de destaque herdados no painel "Estilos"

Problema do Chromium: 1024156

Destaques diversos

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

  • O painel Propriedades agora exibe as propriedades do acessador com valor por padrão. Ele foi ocultado por engano. (1309087).
  • O painel Estilos agora mostra corretamente as regras @support substituídas como tachadas. Antes, as regras não eram tachadas. (1298025).
  • Corrigimos a lógica de formatação de CSS no painel Sources que gerava várias linhas em branco ao editar CSS. (1309588).
  • Limite a opção Expandir recursivamente de um objeto no Console para, no máximo, 100, de modo que ela não continue indefinidamente para objetos circulares. (1272450).

[Experimental] Copiar mudanças de CSS

Com esse experimento, o painel Estilos destaca as mudanças de CSS em verde. Passe o cursor sobre as regras alteradas e clique no botão "Nova cópia" ao lado delas.

Também é possível copiar todas as alterações de CSS nas declarações. Para isso, clique com o botão direito do mouse em qualquer regra e selecione Copiar todas as alterações de CSS.

Adicionamos um novo botão Copiar à guia Mudanças para ajudar você a acompanhar e copiar as mudanças de CSS com facilidade.

Copiar mudanças de CSS

Problema do Chromium: 1268754

[Experimental] Escolher cores fora do navegador

Ative este experimento para escolher uma cor fora do navegador com o seletor de cores. Antes, só era possível escolher uma cor no navegador.

No painel Estilos, clique em qualquer visualização de cor para abrir o seletor de cores. Use o conta-gotas para escolher cores em qualquer lugar.

Seleção de cor fora do navegador

Problema do Chromium: 1245191

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   Mais > 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.