Novidades do DevTools (Chrome 120)

Encerramento gradual do uso de cookies de terceiros

Seu site pode usar cookies de terceiros, e é hora de tomar providências à medida que nos aproximamos da descontinuação deles. Para saber o que fazer com os cookies afetados, consulte Como se preparar 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. Por isso, a guia Issues agora alerta sobre os cookies que serão afetados pela descontinuação e desativação gradual de cookies de terceiros. Você pode limpar a caixa de seleção a qualquer momento para não receber mais 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 as Ferramentas do desenvolvedor está em desenvolvimento ativo com a versão de pré-lançamento 0.3.2 mais recente. A ferramenta permite entender como o site usa cookies e oferece 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 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 de menu 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 atualizar 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:

• PSAT's How To.
• Para prever o que provavelmente 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 aprimorada

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 exceções. Para ajudar você a se concentrar apenas no código, o Debugger vai pular os 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.

As exceções agora param a execução se forem capturadas ou transmitidas por um código não ignorado

Quando você depura o código com a opção Pause on caught exceptions marcada, o Depurador agora interrompe a execução nas seguintes exceções capturadas, síncronas e assíncronas:

• Exceções detectadas 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, confira 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 Pause on caught exceptions.
2. Na página, na lista de cenários "Detectados", clique nos botões e observe a execução pausada nos casos mencionados.

Para pausar a execução em exceções detectadas e/ou não detectadas (quando marcadas) em chamadas assíncronas, o depuração procura gerenciadores de rejeição em promessas. A partir dessa versão, o Depuração não prevê mais que Promise.finally() vai capturar uma exceção, semelhante ao bloco try...finally que 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 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 do código minificado enviado pelo seu site.

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

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

Novo botão de modo de entrada durante a depuração remota

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

Assista o vídeo para conferir a ativação do modo de entrada em ação.

Problema do Chromium: 1410433.

O painel "Elements" agora mostra URLs para nós #document

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

Problema do Chromium: 1376976.

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

Agora você pode conferir 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 a tela 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 indicador de reprodução. A animação continua sendo reproduzida se já estava sendo reproduzida e é interrompida de outra forma. Antes, era preciso arrastar.
• Redimensione a coluna de nomes para ver os nomes completos das animações.

Problemas do Chromium: 1492460, 1489721.

A caixa de diálogo "Você confia neste código?" nas fontes e a mensagem de aviso de auto-XSS no console

O experimento Mostrar aviso sobre auto-XSS ao colar código foi ativado por padrão. O auto-XSS (auto-scripting em vários sites) é um ataque que faz você colar um código malicioso nas Ferramentas do desenvolvedor e permite que um invasor ganhe controle das suas contas da Web e informações pessoais.

Se você é um novo usuário das Ferramentas do desenvolvedor e tenta colar um código, o painel Origens agora mostra a caixa de diálogo Você confia neste código?, e o Console exibe 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á mostrado novamente.

Problema do Chromium: 345205.

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

Quando você define um ponto de interrupção de evento em Sources > Event Listener Breakpoints, além de pausar esse evento no seu site, o Debugger também pausa quando o evento correspondente ocorre 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 elementos <audio> e <video> no painel Elementos. Ao clicar no selo, você vai para o painel Mídia, onde pode 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.

O carregamento prévio foi renomeado para carregamento especulativo

Para evitar o uso excessivo do termo anterior e refletir melhor o comportamento, Aplicação > Carregamento prévio foi renomeado para 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 que o site pré-renderize e pré-carregue a maioria das páginas navegadas.

Problema do Chromium: 1478888.

Lighthouse 11.2.0

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

Esta atualização inclui uma reformulação da categoria de performance. Agora, os insights de performance são pontuados e priorizados com base no impacto estimado nas métricas de performance. 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 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 vão anunciar o status (marcado ou desmarcado) das caixas de seleção em Origens > 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 desta versão:

• Performance: corrigimos o indicador de LCP que às vezes estava ausente na gravação (1487136).
• Cargas especulativas: corrigimos os URLs completos para destinos no menu suspenso do painel Rede (1471020).
• Cobertura:
  • Correção da cobertura linha por linha para código impresso de forma bonita (1464974).
  • As informações de cobertura foram atualizadas no recarregamento da página (1494457).
• Console:
  • Correção da seleção parcial de texto em mensagens (1487449).
  • Correção do tremular do menu suspenso de preenchimento automático (1487453).
  • Parênteses com suporte em caminhos de pilha e URLs em rastros de pilha (1473926).
• Origens: foi incluído suporte ao realce de sintaxe da palavra-chave using do TypeScript (1490515).
• O menu Abrir rapidamente agora mostra métodos privados (1492957).
• Aplicativo > Serviços em segundo plano: a barra de ações superior agora ajusta o texto ao redimensionar (1487276).
• Elementos > Estilos:
  • Correção da 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 interrupções 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 grandes 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 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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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