Novidades do DevTools (Chrome 120)

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

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

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:

• Instruções do PSAT.
• Para prever o que provavelmente acontecerá quando a descontinuação entrar em vigor, configure um ambiente de avaliação.
• Para identificar os aspectos que serão afetados, consulte Ações de análise geral.
• Para aprender a analisar cenários comuns, incluindo análise, e-commerce, serviços de SSO, conteúdo incorporado e muito mais, confira os exemplos de demonstração em Cenários de análise.

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

Lista de ignorados aprimorada

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

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

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 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:

• O que são mapas de origem?
• Depurar seu código original em vez de implantá-lo com mapas de origem

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.

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

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

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.

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.

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.

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 indicador de pontuação de desempenho inclui informações mais detalhadas sobre como cada métrica afeta a pontuação.

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