Novidades do DevTools (Chrome 120)

Descontinuação gradual do uso de cookies de terceiros

Seu site pode usar cookies de terceiros, e está na hora de tomar providências porque estamos nos aproximando da descontinuação deles. Para saber o que fazer com os cookies afetados, consulte Preparação para o fim dos cookies de terceiros.

A caixa de seleção Incluir problemas com cookies de terceiros foi ativada por padrão para todos os usuários do Chrome. Assim, a guia Problemas agora avisa sobre os cookies que serão afetados pela descontinuação e remoção gradual de cookies de terceiros. É possível 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 Ferramenta de análise de dados do Sandbox de privacidade para o DevTools está em desenvolvimento ativo com a versão 0.3.2 mais recente de pré-lançamento. Com ela, você entende como seu site usa cookies e recebe orientações sobre as novas APIs do Chrome que preservam a privacidade.

Para analisar seus cookies:

1. Instale a extensão no Chrome.
2. Abra seu site em uma única guia para ter a melhor análise.
3. Abra o DevTools e navegue até o painel Sandbox de privacidade. Ele 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), consulte o seguinte:

• Como fazer da PSAT.
• Para prever o que vai 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 gerais de análise.
• Para saber como analisar cenários comuns, incluindo análises, 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 avançada

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

Essa 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 seu código, o Debugger agora vai ignorar scripts de /node_modules/ e /bower_components/ por padrão. É possível desativar essa regra nas configurações a qualquer momento.

Problema do Chromium: 1496301.

Agora, as exceções interrompem a execução se forem detectadas ou passarem por um código não ignorado.

Ao depurar 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, tanto síncronas quanto assíncronas:

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

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

1. Abra o DevTools > Fontes, adicione a pasta hidden à lista de ignorados e marque Pausar em exceções capturadas .
2. Na página, em "Capturado", 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 marcadas) em chamadas assíncronas, o Debugger procura gerenciadores de rejeição em todas as promessas. A partir dessa versão, o Debugger não prevê mais que Promise.finally() vai capturar uma exceção, assim como o bloco try...finally não captura nenhuma.

Problemas do Chromium: 1489312, 1291064.

x_google_ignoreList foi renomeado como ignoreList nos mapas de origem.

A especificação de mapas de origem adotou o campo ignoreList em vez de x_google_ignoreList, e o DevTools agora é compatível com o novo nome com um substituto para o antigo. Agora, frameworks e bundlers podem usar o novo nome de campo.

Com os mapas de origem, você pode depurar o código que escreveu em vez do código minificado veiculado pelo seu site.

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

• O que são mapas de origem?
• Depure seu código original em vez de implantar com mapas de origem

Nova alternância de modo de entrada durante a depuração remota

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

Assista o vídeo para ver a alternância do modo de entrada 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 mostra documentURL ao lado dos nós #document.

Problema do Chromium: 1376976.

Política de Segurança de Conteúdo efetiva no painel "Aplicativo"

Agora é possível conferir os detalhes da Política de Segurança de Conteúdo (CSP) de um frame inspecionado. Para ver os detalhes, acesse Application > Frames, selecione um frame e role a tela para baixo até a seção Content Security Policy (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 de reprodução. A animação continua sendo reproduzida se já estiver em execução e para caso contrário. Antes, era preciso arrastar.
• Redimensione a coluna de nome para ver os nomes completos das animações.

Problemas do Chromium: 1492460, 1489721.

Caixa de diálogo "Você confia neste código?" em "Fontes" e aviso de XSS automático no console

O experimento Mostrar aviso sobre XSS automático ao colar código foi ativado por padrão. O XSS automático (scripting automático em vários sites) é um ataque que engana você para colar um código malicioso no DevTools e permite que um invasor assuma o controle das suas contas da Web e informações pessoais.

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

Problema do Chromium: 345205.

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

Quando você define um ponto de interrupção de evento em Fontes > Pontos de interrupção de listener de eventos, além de pausar esse evento no seu site, o Depurador 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 é possível ativar o novo selo de mídia para elementos <audio> e <video> no painel Elementos. Ao clicar no selo, você acessa o painel Mídia para depurar esses elementos.

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

Problema do Chromium: 1448214.

A pré-carga foi renomeada como carregamento especulativo

Para evitar o uso excessivo do termo anterior e refletir melhor o comportamento, Application > Preloading foi renomeado como Speculative loads. O carregamento especulativo permite um carregamento de página quase instantâneo com base em regras de especulação que você pode definir para que seu site faça a pré-renderização e a pré-busca das páginas mais acessadas.

Problema do Chromium: 1478888.

Lighthouse 11.2.0

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

Esta atualização inclui uma revisão da categoria de desempenho. Agora, os insights de performance são classificados e priorizados com base no impacto estimado nas métricas de performance. Além disso, o medidor 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 de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problemas do Chromium: 772558.

Melhorias na acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

• Os leitores de tela agora anunciam o status (marcado ou desmarcado) das caixas de seleção em Fontes > Pontos de interrupção.
• Agora é possível acessar o menu suspenso Ocultar problemas desse tipo com o teclado.

Problemas do Chromium: 1488645, 1484918.

Destaques diversos

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

• Performance: corrigimos o indicador LCP que às vezes não aparecia na gravação (1487136).
• Carregamentos especulativos: corrigimos os URLs completos para destinos no menu suspenso do painel Rede (1471020).
• Cobertura:
  • Cobertura linha por linha corrigida para código formatado (1464974).
  • As informações de cobertura agora são atualizadas ao recarregar a página (1494457).
• Console:
  • Correção da seleção parcial de texto em mensagens (1487449).
  • Corrigimos a oscilação do menu suspenso de preenchimento automático (1487453).
  • Parênteses compatíveis em caminhos de pilha e URLs em rastreamentos de pilha (1473926).
• Fontes: adicionamos suporte ao destaque de sintaxe da palavra-chave using do TypeScript (1490515).
• O menu Abertura rápida agora mostra métodos particulares (1492957).
• Aplicativo > Serviços em segundo plano: a barra de ações na parte de cima agora quebra o texto ao ser redimensionada (1487276).
• Elementos > Estilos:
  • Corrigida a resolução das variáveis CSS herdadas para elementos com slot (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 acontece quando a opção Linhas de solicitação grande está marcada) (1495735).
• Descontinuações:
  • A configuração Formato de cor foi desativada em versões anteriores e agora foi removida.
  • A opção "Excluir todas as substituições" em Fontes foi removida devido ao baixo uso após a simplificação das substituições (1473681).

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

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.