Novidades do DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Desativação de cookies de terceiros

Talvez seu site use cookies de terceiros, então é hora de tomar providências enquanto estamos nos aproximando da descontinuação. Saiba o que fazer em relação aos cookies afetados em Preparação para o fim dos cookies de terceiros.

A caixa de seleção 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 descontinuação e desativação gradual dos cookies de terceiros. Você pode desmarcar a caixa de seleção a qualquer momento para deixar de ver esses problemas.

Um aviso sobre a descontinuação dos cookies de terceiros na guia "Problemas".

Problema do Chromium: 1466310.

Analise os cookies do seu site com a ferramenta de análise do Sandbox de privacidade

A extensão Privacy Sandbox Analysis Tool para DevTools está em desenvolvimento ativo com a versão de pré-lançamento mais recente da 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 acesse o painel Sandbox de privacidade. Esse painel pode estar oculto atrás do botão suspenso Mais guias. na parte superior.
  4. Abra a seção Cookies e clique em Analisar esta guia. Se a ferramenta não tiver encontrado cookies, tente recarregar a página.

A ferramenta de análise do Sandbox de privacidade.

Para mais informações sobre como usar a Ferramenta de análise do Sandbox de privacidade (PSAT, na sigla em inglês), consulte:

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

Lista de ignorados aprimorada

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

Esta 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 pula os scripts de /node_modules/ e /bower_components/ por padrão. É possível desativar essa regra nas configurações a qualquer momento.

O antes e o depois de adicionar uma expressão regular.

Problema do Chromium: 1496301.

Exceções agora interrompem a execução se forem detectadas 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 capturadas marcada, o Debugger 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.
  • Foram capturadas exceções que passam por frames não ignorados na pilha de chamadas. Por exemplo, confira a captura de tela.

Pausa 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 screenshot.
  2. Na página, na lista de cenários "Pescados", clique nos diferentes botões e confira a execução pausada nos casos mencionados.

Para pausar a execução em exceções capturadas e/ou não capturadas (quando marcada) 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 o Promise.finally() capturará uma exceção, da mesma forma que o bloco try...finally não detecta nenhuma.

Problemas do Chromium: 1489312 e 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 aceita o 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 disponibilizado pelo seu site.

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

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

Agora é possível 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 a --remote-debugging-port=<port> e se conecta a esse destino de rede via chrome://inspect/#devices.

Assista o vídeo para saber como funciona a alternância do modo de entrada.

Problema do Chromium: 1410433.

O painel Elementos agora mostra URLs para #document nós

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

O antes e o depois mostram documentURL ao lado do nó #document.

Problema do Chromium: 1376976

Política efetiva de segurança de conteúdo no painel de aplicativos

Agora é possível acessar 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).

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

Problema do Chromium: 1424714.

Depuração da 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 a ser reproduzida se já estiver sendo reproduzida e, caso contrário, é interrompida. Antes, era preciso arrastar a barra.
  • Redimensione a coluna de nome para conferir os nomes completos das animações.

Problemas do Chromium: 1492460, 1489721.

Caixa de diálogo "Do you trust this code?" (Você confia neste código?) em "Sources" e "auto-XSS" no console.

O Caixa de seleção. Mostrar aviso sobre o Self-XSS ao colar o código experiment foi ativado por padrão. O Self-XSS (scripting em vários sites) é um ataque que induz você a colar códigos maliciosos no DevTools e permite que um invasor assuma o controle das suas contas da Web e informações pessoais.

Se você é um novo usuário do DevTools e tenta colar o código, o painel Sources agora mostra a caixa de diálogo Você confia neste código? e o Console agora exibe um aviso semelhante. Cole apenas o código que você conhece e analisou. Para colar, digite allow pasting quando solicitado. Depois que a colagem for permitida uma vez, o aviso não será mais mostrado.

A caixa de diálogo &quot;Do you trust this code?&quot; ao colar o código em Sources.

Problema do Chromium: 345205.

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

Quando você define um ponto de interrupção de evento em Origens > Pontos de interrupção do listener de eventos, além de pausar nesse evento no site, o Debugger também é pausado quando o evento correspondente acontece em um web worker ou worklet de qualquer tipo, incluindo o trabalho de armazenamento compartilhado.

Depurador pausado quando um service worker chama a função de tempo limite definida.

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 ícone, o painel Mídia será aberto para que você possa depurar esses elementos.

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

Esse recurso está em desenvolvimento e será aprimorado. A equipe do DevTools gostaria de agradecer a Junseo (Jeremy) Yoo por ter feito 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, Aplicativo > Pré-carregamento foi renomeado como Carregamentos especulativos. O carregamento especulativo permite o carregamento de página quase instantâneo com base em regras de especulação que você pode definir para o site fazer a pré-renderização e a pré-busca da maioria das páginas acessadas.

O antes e depois de ser renomeado como pré-carregamento em 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.

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

A revisão do 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 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 Sources > Breakpoints.
  • Agora você pode acessar o menu suspenso Ocultar problemas como este usando o teclado.

Problemas do Chromium: 1488645, 1484918.

Destaques diversos

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

  • Desempenho: foi corrigido o indicador LCP que, às vezes, não era exibido na gravação (1487136).
  • Carregamentos especulativos: foram corrigidos os URLs completos dos destinos no menu suspenso do painel Rede (1471020).
  • Cobertura:
    • Correção da cobertura linha por linha para o código bem impresso (1464974).
    • As informações de cobertura agora são atualizadas na atualização da página (1494457).
  • Console:
    • Correção da seleção de texto parcial nas mensagens (1487449).
    • Correção da oscilação da lista suspensa de preenchimento automático (1487453).
    • Suporte a parênteses em caminhos de pilha e URLs em stack traces (1473926).
  • Origens: suporte ao destaque de sintaxe da palavra-chave using do TypeScript (1490515).
  • O menu de 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:
    • A resolução das variáveis CSS herdadas para elementos com espaços foi corrigida (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 é exibido quando Linhas de solicitação grande é 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 agora 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59