Novidades do DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Descontinuação 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 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 desmarcar a caixa de seleção a qualquer momento para parar de ver esses problemas.

Um aviso sobre a descontinuação de cookies de terceiros em breve 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 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 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 atualizar 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:

  • 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 de node_modules

Essa 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. É possível desativar essa regra nas configurações a qualquer momento.

Antes e depois de adicionar uma expressão regular.

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 Caixa de seleçã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 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, confira 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. Pause on caught exceptions.
  2. Na página, na lista de cenários "Pescados", clique nos diferentes botões e veja 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 Depurador 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 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 de código minificado disponibilizado pelo seu site.

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

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

O antes e depois mostra documentURL ao lado do nó #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).

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 continua sendo reproduzida se já estava sendo reproduzida e é interrompida caso contrário. 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 Caixa de seleção. Mostrar aviso sobre Self-XSS ao colar experiment de 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 analisou. 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.

Caixa de diálogo &quot;Você confia neste código?&quot; ao colar o código nas fontes.

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.

O depurador foi pausado quando um service worker chamou 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 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.

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.

Antes e depois da renomeação do pré-carregamento para carregamento especulativo.

Problema do Chromium: 1478888.

Lighthouse versão 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 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.

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 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).
  • Carregamentos especulativos: foram corrigidos os URLs completos para destinos no menu suspenso do painel Rede (1471020).
  • Cobertura:
    • Correção da cobertura linha por linha para código impresso (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 menu suspenso de preenchimento automático que piscava (1487453).
    • Parênteses com suporte em caminhos de pilha e URLs em rastreamentos de pilha (1473926).
  • Origens: foi incluído suporte ao realce 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:
    • 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 pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no site antes que os usuários o façam!

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.

Novidades no DevTools

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