Novidades do DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Desativação de cookies de terceiros

Seu site pode usar cookies de terceiros, e está na hora de tomar providências, já que estamos nos aproximando da descontinuação. Saiba o que fazer com os cookies afetados em Como se preparar para o fim dos cookies de terceiros.

A caixa de seleção Caixa de seleção. Incluir problemas de cookies de terceiros foi ativada por padrão para todos os usuários do Chrome. Por isso, a guia Problemas agora avisa sobre os cookies que serão afetados pela futura descontinuação e descontinuação dos cookies de terceiros. Você pode desmarcar a caixa de seleção a qualquer momento para parar de ver esses problemas.

Um aviso sobre a descontinuação em breve dos cookies de terceiros na guia "Problemas".

Problema do Chromium: 1466310.

Analisar os cookies do seu site com a Ferramenta de análise de dados do Sandbox de privacidade

A extensão da Ferramenta de análise de dados do Sandbox de privacidade para DevTools está em desenvolvimento ativo com a versão de pré-lançamento mais recente 0.3.2. A ferramenta permite que você entenda como seu site usa cookies e fornece orientações sobre as novas APIs do Chrome que preservam a privacidade.

Para analisar os cookies:

  1. Instale a extensão no Chrome.
  2. Abra seu site em uma única guia para uma melhor análise.
  3. Abra o DevTools e navegue até o painel Sandbox de privacidade. Esse painel pode estar oculto atrás do botão suspenso Mais guias. na parte de cima.
  4. Abra a seção Cookies e clique em Analisar esta guia. Se a ferramenta não encontrar cookies, tente recarregar a página.

A Ferramenta de análise de dados do Sandbox de privacidade.

Para mais informações sobre como usar a Ferramenta de análise de dados do Sandbox de privacidade (PSAT, na sigla em inglês), consulte estes links:

Além disso, consulte as orientações sobre Como informar problemas.

Ignorar lista aprimorada de ignorados

Padrão de exclusão padrão de node_modules

Esta versão ativa a expressão regular padrão como uma regra de exclusão personalizada em Configurações. Configurações > Lista de ignorados. Para ajudar você a se concentrar apenas no código, o Debugger agora vai pular os scripts de /node_modules/ e /bower_components/ por padrão. Você pode desativar essa regra nas configurações a qualquer momento.

O antes e o depois de adicionar uma expressão regular.

Problema do Chromium: 1496301.

As exceções agora interrompem a execução se capturadas ou transmitidas por códigos não ignorados

Quando você depura o código com a opção Caixa de seleção. Pausar em exceções capturadas marcada, o Depurador agora interrompe a execução nas seguintes exceções capturadas, síncronas e assíncronas:

  • Exceções capturadas em frames não ignorados na pilha de chamadas.
  • Exceções detectadas que passam por frames não ignorados na pilha de chamadas. Por exemplo, veja a captura de tela.

Pause em uma exceção capturada que passou por um código não ignorado.

Para testar esse comportamento, abra esta página de demonstração:

  1. Abra o DevTools > Sources, adicione a pasta hidden à lista de ignorados e marque Caixa de seleção. Pausar em exceções capturadas.
  2. Na página, na coluna "Pescados", lista de cenários, clique nos diferentes botões e veja a execução pausada nos casos mencionados.

Para pausar a execução em exceções capturadas e/ou não capturadas (quando selecionadas) em chamadas assíncronas, o Debugger procura gerenciadores de rejeição nas promessas. A partir dessa versão, o Debugger não prevê mais que Promise.finally() vai capturar uma exceção, semelhante a como o bloco try...finally não captura nenhuma.

Problemas do Chromium: 1489312, 1291064.

x_google_ignoreList renomeado como ignoreList nos mapas de origem

A especificação dos mapas de origem adotou o campo ignoreList em vez de x_google_ignoreList, e o DevTools agora oferece suporte ao novo nome com um substituto para o antigo. Frameworks e bundlers agora podem usar o novo nome de campo.

Os mapas de origem permitem depurar o código que você escreveu em vez de código minificado disponibilizado pelo seu site.

Para mais informações sobre os mapas de origem, consulte:

Novo modo de entrada durante a depuração remota

Agora é possível alternar entre entradas de toque e mouse ao depurar uma guia do Chrome remotamente. Por exemplo, quando você executa uma instância do Chrome com a --remote-debugging-port=<port> e se conecta a esse destino de rede via chrome://inspect/#devices.

Assista ao vídeo para saber como o modo de entrada funciona em ação.

Problema do Chromium: 1410433.

O painel Elementos agora mostra URLs para nós #document

Para facilitar a depuração de iframes, o painel Elementos agora exibe documentURL ao lado de #document nós.

O antes e o depois mostram documentURL ao lado do nó #document.

Problema do Chromium: 1376976.

Política efetiva de segurança de conteúdo no painel "Aplicativo"

Agora é possível visualizar os detalhes da Política de Segurança de Conteúdo (CSP) de um frame inspecionado. Para conferir os detalhes, acesse Aplicativo > Frames, selecione um frame e role para baixo até a seção Política de Segurança de Conteúdo (CSP).

A seção Política de Segurança de Conteúdo localizada na guia Aplicativo.

Problema do Chromium: 1424714.

Depuração de animação aprimorada

Na guia Animações, agora é possível:

  • Clique em qualquer lugar no cabeçalho da linha do tempo para definir o marcador. A animação continuará a ser exibida se já estiver em reprodução e será interrompida de outra forma. Antes era preciso arrastá-la.
  • Redimensione a coluna para conferir os nomes completos das animações.

Problemas do Chromium: 1492460, 1489721.

"Você confia neste código?" Caixa de diálogo em "Sources" e aviso "XSS" próprio no console.

O Caixa de seleção. Mostrar aviso sobre Self-XSS ao colar experiment de código foi ativado por padrão. Self-XSS (self cross-site scripting) é um ataque que induz você a colar código malicioso no DevTools e permite que um invasor controle suas contas da Web e informações pessoais.

Se você for um novo usuário do DevTools e tentar colar o código, o painel Fontes vai mostrar a caixa de diálogo Você confia neste código?, e o Console vai mostrar um aviso semelhante. Cole apenas o código que você entendeu e analisou por conta própria. Para colar, digite allow pasting quando solicitado. Depois que a ação de colar for permitida uma vez, o aviso não será mais exibido.

A caixa de diálogo &quot;Você confia neste código?&quot; ao colar o código no Source.

Problema do Chromium: 345205.

Pontos de interrupção de listener de eventos em web workers e worklets.

Quando você define um ponto de interrupção de evento em Fontes > Pontos de interrupção do listener de eventos, além de pausar esse evento no seu site, o Debugger agora também pausa quando o evento correspondente acontece em um web worker ou worklet de qualquer tipo, incluindo o worklet de armazenamento compartilhado.

Depurador pausado quando um service worker chama a função de tempo limite definido.

Problema do Chromium: 1445175.

O novo selo de mídia para <audio> e <video>

Agora você pode ativar o novo selo de mídia para os elementos <audio> e <video> no painel Elementos. Ao clicar no ícone, você acessa o painel Media, onde é possível depurar esses elementos.

O novo selo de mídia para tags de áudio e vídeo ativadas.

Esse recurso está em desenvolvimento e será aprimorado. A equipe do DevTools gostaria de agradecer a Junseo (Jeremy) Yoo por essa melhoria.

Problema do Chromium: 1448214.

Pré-carregamento renomeado para carregamento especulativo

Para evitar o uso excessivo do termo anterior e refletir melhor o comportamento, Aplicativo > Pré-carregamento foi renomeado como Carregamentos especulativos. O carregamento especulativo permite um carregamento de página quase instantâneo com base em regras de especulação que você pode definir para pré-renderizar e pré-buscar as páginas mais acessadas.

O antes e o depois de renomear o pré-carregamento em carregamento especulativo.

Problema do Chromium: 1478888.

Lighthouse versão 11.2.0

O painel Lighthouse agora executa o Lighthouse 11.2.0. Veja a lista completa de mudanças.

Essa atualização inclui uma reformulação da categoria de performance. Os insights de desempenho agora são pontuados e priorizados com base no impacto estimado deles nas métricas de desempenho. Além disso, o medidor de pontuação de desempenho inclui informações mais detalhadas sobre como cada métrica afeta a pontuação.

A reformulação de desempenho antes e depois.

Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problemas do Chromium: 772558.

Melhorias de acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

  • Os leitores de tela anunciarão o status (marcado ou desmarcado) das caixas de seleção em Fontes > Pontos de interrupção.
  • Agora você pode acessar o menu suspenso Ocultar problemas como este com o teclado.

Problemas do Chromium: 1488645, 1484918.

Destaques diversos

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

  • Desempenho: o indicador de LCP que às vezes não estava presente na gravação foi corrigido (1487136).
  • Carregamentos especulativos: foram corrigidos os URLs completos para destinos no menu suspenso do painel Rede (1471020).
  • Cobertura:
    • A cobertura linha por linha foi corrigida para códigos com estilo de formatação (1464974).
    • As informações de cobertura agora são atualizadas ao recarregar a página (1494457).
  • Console:
    • Corrigimos a seleção parcial de texto nas mensagens (1487449).
    • Correção do menu suspenso de preenchimento automático que piscava (1487453).
    • Parênteses com suporte em caminhos de pilha e URLs em stack traces (1473926).
  • Fontes: suporte ao destaque de sintaxe da palavra-chave using do TypeScript (1490515).
  • O menu Quick Open agora mostra métodos particulares (1492957).
  • Aplicativo > Serviços em segundo plano: a barra de ações superior agora ajusta o texto ao redimensionar (1487276).
  • Elementos > Estilos:
    • Foi corrigida a resolução das variáveis CSS herdadas para elementos com slots (1492162).
    • Ao desativar uma propriedade CSS, os comentários dela agora são removidos para corrigir quebras de sintaxe (1101224).
  • Rede: a coluna Prioridade agora mostra uma dica com informações sobre a prioridade inicial. O mesmo é mostrado quando a opção Linhas de solicitação grande está marcada (1495735).
  • Descontinuações:
    • A configuração Formato de cor foi desativada nas versões anteriores e agora foi removida.
    • A opção "Excluir todas as substituições" em Origens foi removida devido ao baixo uso após a simplificação das substituições (1473681).

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.