Novidades do DevTools (Chrome 102)

Jecelyn Yeen

Recurso de prévia: novo painel de insights de desempenho

Use o painel Insights de performance para receber insights úteis e orientados por 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 desta página de demonstração.

Quando a gravação for concluída, você vai receber os insights de performance 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 possíveis correções.

Acesse a documentação do painel Insights de performance para saber mais com o tutorial detalhado.

Esse é um recurso de prévia para ajudar desenvolvedores da Web (especialmente aqueles que não são especialistas em performance) a identificar e corrigir possíveis problemas de desempenho. Nossa equipe está trabalhando nesse recurso e quer seu feedback para melhorias futuras.

Problema do Chromium: 1270700

Novos atalhos para emular temas claros e escuros

Agora é possível emular os temas claro e escuro mais rapidamente (recurso de mídia CSS prefers-color-scheme) com os novos atalhos no painel Estilos.

Antes, eram necessárias mais etapas para emular temas na guia Renderização.

Problema do Chromium: 1314299

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

Agora, o DevTools 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 contém 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 de folha de estilo por padrão. No entanto, quando você abriu a página na guia Visualizar do painel Rede, a folha de estilo não foi bloqueada antes (por isso, o plano de fundo ficou vermelho). Ele agora está bloqueado, como esperado (segunda captura de tela).

Problema do Chromium: 833147

Melhorias na recarga no ponto de interrupção

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

Por exemplo, o script entrava em um loop infinito ao definir e recarregar no ponto de interrupção ReactDOM nesta demonstração do React. O painel Fontes foi interrompido devido ao loop infinito.

Continuar executando 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.

Problemas do Chromium: 1014415, 1004038, 1112863, 1134899

Atualizações do console:

Como lidar com 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 manipulador window.onerror e são enviados como eventos "error" no objeto de janela.

Problema do Chromium: 1295750

Confirmar expressão em tempo real com Enter

Depois de digitar uma expressão dinâmica, clique em Enter para confirmar. Antes, pressionar "Enter" resultava na adição de novas linhas. Isso é inconsistente com outras partes do DevTools.

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

Problema do Chromium: 1260744

Cancelar a gravação do fluxo do usuário no início

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

Problema do Chromium: 1257499

Mostrar 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 eram exibidas.

Como mencionado na especificação, 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.

Problema do Chromium: 1024156

Destaques diversos

Confira algumas correções importantes nesta versão:

• O painel Propriedades agora mostra propriedades de acesso com valor por padrão. Ele foi ocultado por engano antes. (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 CSS no painel Fontes, que causava várias linhas em branco ao editar CSS. (1309588)
• Limite a opção Expandir recursivamente de um objeto no Console a um máximo de 100 para que 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 novo botão de cópia ao lado delas para copiar.

Além disso, é possível copiar todas as mudanças de CSS nas declarações clicando com o botão direito em qualquer regra e selecionando Copiar todas as mudanças de CSS.

Um novo botão Copiar também foi adicionado à guia Mudanças para ajudar você a acompanhar e copiar as mudanças de CSS com facilidade.

Problema do Chromium: 1268754

[Experimental] Escolher cores fora do navegador

Ative esse 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 cores para abrir o seletor de cores. Use o conta-gotas para escolher cores em qualquer lugar.

Problema do Chromium: 1245191

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.