Novidades do DevTools (Chrome 102)

Jecelyn Yeen

Recurso de visualização: novo painel de insights de desempenho

Use o painel Insights de performance para receber insights úteis e orientados a 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, você vai receber 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 as possíveis correções.

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

Esse é um recurso de pré-lançamento que ajuda os desenvolvedores da Web (especialmente aqueles que não são especialistas em desempenho) a identificar e corrigir possíveis problemas de desempenho. Nossa equipe está trabalhando nesse recurso e quer seu feedback para fazer melhorias.

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

Antes, era preciso mais etapas para emular temas na guia Renderização.

Novos atalhos para emular temas claros e escuros

Problema do Chromium: 1314299

Melhoria na segurança na guia "Pré-visualização de rede"

Agora, o DevTools aplica a política de segurança de conteúdo (CSP) na guia Preview no painel Network.

Por exemplo, a primeira captura de tela mostra uma página com 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 estilos por padrão. No entanto, quando você abriu a página pela guia Preview no painel Network, a folha de estilos não foi 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 "Pré-visualização de rede"

Problema do Chromium: 833147

Melhoria 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 entrou em um loop infinito anteriormente ao definir e recarregar no ponto de interrupção ReactDOM nesta demonstração do React. O painel Origens quebrou devido ao loop infinito.

Continuar executando o 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 na recarga no ponto de interrupção

Problemas do Chromium: 1014415, 1004038, 1112863, 1134899

Atualizações do console:

Processar erros de execução de script no console

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

Processar erros de execução de script no console

Problema do Chromium: 1295750

Confirmar a expressão ao vivo com Enter

Depois de digitar uma expressão ativa, 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 em tempo real, use Shift + Enter.

Confirmar a expressão ao vivo com Enter

Problema do Chromium: 1260744

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

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

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

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 Styles. Antes, essas regras não eram mostradas.

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

Mostrar pseudoelementos de destaque herdados no painel Estilos

Problema do Chromium: 1024156

Destaques diversos

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

  • O painel Properties agora mostra propriedades de acesso com valor por padrão. Ele foi ocultado por engano anteriormente. (1309087).
  • O painel Styles agora mostra corretamente as regras @support substituídas como tachado. Antes, as regras não tinham tachado. (1298025).
  • Corrigimos a lógica de formatação do CSS no painel Origens, 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 ela não continue para sempre em objetos circulares. (1272450).

[Experimental] Copiar mudanças de CSS

Com esse experimento, o painel Styles 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 do mouse em qualquer regra e selecionando Copiar todas as mudanças de CSS.

Um novo botão Copiar foi adicionado à 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] Como escolher uma cor 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 Styles, clique em qualquer visualização de cor para abrir o seletor de cores. Use o conta-gotas para escolher cores em qualquer lugar.

Como escolher uma cor fora do navegador

Problema do Chromium: 1245191

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

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