Novidades do DevTools (Chrome 89)

Jecelyn Yeen

Suporte de depuração para violações de Tipos confiáveis

Ponto de interrupção em violações do Tipo confiável

Agora é possível definir pontos de interrupção e capturar exceções em violações de tipo confiável no painel Origens.

A API Trusted Types ajuda a evitar vulnerabilidades de scripting em vários sites baseado em DOM. Saiba como escrever, analisar e manter aplicativos livres de vulnerabilidades XSS do DOM com tipos confiáveis aqui.

No painel Sources, abra o painel da barra lateral do debugger. Expanda a seção Pontos de interrupção de violação de CSP e marque a caixa de seleção Violações de tipo confiável para pausar nas exceções. Teste por conta própria nesta página de demonstração.

Ponto de interrupção em violações do Tipo confiável

Problema do Chromium: 1142804

O painel Origens agora mostra um ícone de aviso ao lado da linha que viola o "Tipo confiável". Passe o cursor sobre ela para visualizar a exceção. Clique nele para expandir a guia Problemas. Ela fornece mais detalhes sobre as exceções e orientações sobre como corrigir o problema.

Vincular o problema à guia "Problemas" no painel "Origens"

Problema do Chromium: 1150883

Fazer uma captura de tela do nó além da janela de visualização

Agora é possível fazer capturas de tela de um nó completo, incluindo o conteúdo abaixo da dobra. Antes, a captura de tela era cortada para conteúdo que não era visível na janela de visualização. As capturas de tela de página inteira também estão corretas.

No painel Elementos, clique com o botão direito do mouse em um elemento e selecione Capturar tela do nó.

Fazer uma captura de tela do nó além da janela de visualização

Problema do Chromium: 1003629

Nova guia "Tokens de confiança" para solicitações de rede

Inspecione as solicitações de rede do token de confiança com a nova guia Tokens de confiança.

O Trust Token é uma nova API que ajuda a combater fraudes e a distinguir bots de humanos reais, sem rastreamento passivo. Saiba como começar a usar tokens de confiança.

Mais suporte à depuração virá nas próximas versões.

Nova guia "Token de confiança" para solicitações de rede

Problema do Chromium: 1126824

Lighthouse 7 no painel do Lighthouse

O painel Lighthouse agora está executando o Lighthouse 7. Confira as notas da versão para conferir uma lista completa das mudanças.

Lighthouse 7 no painel do Lighthouse

Novas auditorias no Lighthouse 7:

  • Pré-carregar imagem da Maior exibição de conteúdo (LCP). Audita se a imagem usada pelo elemento de LCP está pré-carregada para melhorar seu tempo de LCP.
  • Problemas registrados no painel Issues. Indica uma lista de problemas não resolvidos no painel Issues.
  • Progressive Web Apps (PWA): A categoria do PWA mudou significativamente.

  • O grupo Installable agora é alimentado inteiramente pelas verificações de capacidade que ativam os critérios instaláveis do Chrome. Esses são os mesmos indicadores vistos no painel Manifesto.

    • A auditoria "Registra um service worker..." é movida para o grupo Otimizado para PWA, e a auditoria "Usa HTTPS" agora está incluída como parte da auditoria de "requisitos de instalação" da chave.
    • O grupo Rápido e confiável é removido. Como a auditoria reformulada dos "requisitos de instalação" inclui a verificação de recursos off-line, a auditoria "página atual e start_url" respondem com 200 quando off-line" foi removida. A auditoria "O carregamento da página é rápido o suficiente na rede móvel" também foi removida.

Problema do Chromium: 772558

Atualizações do painel "Elementos"

Suporte para forçar o estado :target do CSS

Agora você pode usar o DevTools para forçar e inspecionar o estado do CSS :target.

No painel Elementos, selecione e alterne o estado de um elemento. Ative a caixa de seleção :target para forçar e inspecionar os estilos.

Use a pseudoclasse :target para definir o estilo do elemento quando o hash no URL e o ID de um elemento forem os mesmos. Confira esta demonstração para testar. Esse novo recurso do DevTools permite testar esses estilos sem precisar mudar manualmente o URL o tempo todo.

forçar o estado ":target" do CSS

Problema do Chromium: 1156628

Novo atalho para duplicar elemento

Use o novo atalho Duplicar elemento para clonar um elemento instantaneamente.

Clique com o botão direito do mouse em um elemento no painel Elementos e selecione Duplicar elemento. Um novo elemento será criado abaixo dele.

Como alternativa, é possível duplicar o elemento com atalhos do teclado:

  • Mac: Shift + Option + ⬇️
  • Janela/ Linux: Shift + Alt + ⬇️

Duplicar elemento

Problemas do Chromium: 1150797, 1150797

Seletores de cores para propriedades CSS personalizadas

O painel Estilos agora mostra seletores de cores para propriedades CSS personalizadas.

Além disso, é possível manter a chave Shift e clicar no seletor de cores para alternar entre as representações RGBA, HSLA e hexadecimal do valor da cor.

Seletores de cores para propriedades CSS personalizadas

Problema do Chromium: 1147016

Novos atalhos para copiar propriedades CSS

Agora é possível copiar propriedades CSS mais rapidamente com alguns atalhos novos.

No painel Elementos, selecione um elemento. Em seguida, clique com o botão direito do mouse em uma classe ou propriedade CSS no painel Styles para copiar o valor.

Novos atalhos para copiar propriedades CSS

Copiar opções para a classe CSS:

  • Copiar seletor. Copie o nome do seletor atual.
  • Copiar regra. Copie a regra do seletor atual.
  • Copiar todas as declarações: copia todas as declarações na regra atual, incluindo propriedades inválidas e prefixadas.

Opções de cópia da propriedade CSS:

  • Copiar a declaração. Copie a declaração da linha atual.
  • Copiar propriedade. Copie a propriedade da linha atual.
  • Copiar valor: copiar o valor da linha atual.

Problema do Chromium: 1152391

Atualizações de cookies

Nova opção para mostrar cookies decodificados pelo URL

Agora você pode conferir o valor dos cookies decodificados pelo URL no painel Cookies.

Acesse o painel Aplicativo e selecione o painel Cookies. Selecione qualquer cookie na lista. Ative a nova caixa de seleção Mostrar URL decodificado para visualizar o cookie decodificado.

Opção para mostrar cookies decodificados pelo URL

Problema do Chromium: 997625

Limpar apenas cookies visíveis

O botão Limpar todos os cookies no painel "Cookies" foi substituído pelo botão Limpar cookies filtrados.

No painel Aplicativo > painel Cookies, insira o texto na caixa de texto para filtrar os cookies. Em nosso exemplo, filtramos a lista por "PREF". Clique no botão Limpar cookies filtrados para excluir os cookies visíveis. Limpe o texto do filtro e os outros cookies vão permanecer na lista. Antes, você só tinha a opção de limpar todos os cookies.

Limpar apenas cookies visíveis

Problema do Chromium: 978059

Nova opção para limpar cookies de terceiros no painel "Armazenamento"

Ao limpar os dados do site no painel Storage, o DevTools agora limpa apenas os cookies primários por padrão. Ative a opção Como incluir cookies de terceiros para limpar os cookies de terceiros.

Opção para limpar cookies de terceiros

Problema do Chromium: 1012337

Editar dicas de cliente do user agent para dispositivos personalizados

Agora você pode editar as dicas do cliente do user agent para dispositivos personalizados.

Acesse Configurações > Dispositivos e clique em Adicionar dispositivo personalizado.... Expanda a seção Dicas do cliente do user agent para editar as dicas do cliente.

Editar dicas de cliente do user agent

As dicas do cliente do user agent são uma alternativa à string do user agent que permite aos desenvolvedores acessar informações sobre o navegador do usuário de maneira ergonômica e que preserva a privacidade. Saiba mais sobre as dicas do cliente do user agent em web.dev/user-agent-client-hints/.

Problema do Chromium: 1073909

Atualizações do painel Network

Manter a configuração de "registro de rede de registro"

O DevTools agora mantém a configuração "Record network log". Anteriormente, o DevTools redefine a escolha do usuário sempre que uma página é atualizada.

Gravar registro de rede

Problema do Chromium: 1122580

Exibir conexões do WebTransport no painel Rede

O painel Rede agora exibe conexões WebTransport.

Conexões WebTransport

WebTransport é uma nova API que oferece mensagens cliente-servidor de baixa latência e bidirecionais. Saiba mais sobre os casos de uso e como enviar feedback sobre o futuro da implementação em web.dev/webtransport/ (link em inglês).

Problema do Chromium: 1152290

"On-line" renomeado para "Sem limitação"

A opção de emulação de rede "On-line" agora foi renomeada como "Sem limitação".

Gravar registro de rede

Problema do Chromium: 1028078

Novas opções de cópia no Console, no painel Origens e no painel Estilos

Novos atalhos para copiar objetos no Console e no painel Origens

Agora é possível copiar valores de objetos com os novos atalhos nos painéis Console e Origens. Isso é útil especialmente quando você tem um objeto grande (por exemplo, uma matriz longa) para copiar.

Copiar objeto no console

Copiar objeto no painel Sources

Problemas do Chromium: 1149859, 1148353

Novos atalhos para copiar o nome de arquivo no painel Origens e no painel Estilos

Agora você pode copiar o nome do arquivo clicando com o botão direito em:

  • Um arquivo no painel Origens ou
  • O nome do arquivo no Painel "Estilos" do painel Elementos.

Selecione Copy file name no menu de contexto para copiar o nome do arquivo.

Copiar o nome do arquivo no painel Origens

Copiar o nome do arquivo no painel "Estilos"

Problema do Chromium: 1155120

Atualizações da visualização de detalhes do frame

Informações sobre novos Service Workers na visualização "Detalhes do frame"

O DevTools agora exibe service workers dedicados sob o frame que os cria.

No painel Aplicativo, expanda um frame com service workers e selecione um deles na árvore Service Workers para ver os detalhes.

Informações dos service workers na visualização de detalhes do frame

Problema do Chromium: 1122507

Medir informações de memória na visualização "Detalhes do frame"

O status da API performance.measureMemory() agora é exibido na seção Disponibilidade da API.

A nova API performance.measureMemory() estima o uso de memória de toda a página da Web. Saiba como monitorar o uso total da memória da sua página da Web com essa nova API neste artigo.

Medir memória

Problema do Chromium: 1139899

Enviar feedback usando a guia "Problemas"

Se você quiser melhorar uma mensagem de problema, acesse a guia Problemas no Console ou em Mais configurações > Mais ferramentas > Problemas > para abrir a guia Problemas. Abra a mensagem sobre o problema e clique em Is the issue message available to you? para enviar feedback no pop-up.

Link do feedback do problema

Frames descartados no painel "Desempenho"

Ao analisar o desempenho de carregamento no painel "Performance", a seção Frames agora marca os frames descartados como vermelhos. Passe o cursor sobre ele para conferir o frame rate.

Frames eliminados

Problema do Chromium: 1075865

Emular dobrável e tela dupla no Modo dispositivo

Agora é possível emular dispositivos dobráveis e de tela dupla no DevTools.

Depois de ativar a barra de ferramentas do dispositivo, selecione um destes dispositivos: Surface Duo ou Samsung Galaxy Fold.

Clique no novo ícone de período para alternar entre as posições de tela única ou dobrada, tela dupla ou desdobrada.

Também é possível ativar os recursos experimentais da Plataforma Web para acessar o novo recurso screen-spanning de mídia CSS e a API JavaScript getWindowSegments. O ícone experimental mostra o estado da flag de recursos da Plataforma Web experimental. O ícone é destacado quando a flag está ativada. Navegue até chrome://flags e alterne a flag.

Emular tela dupla

Problema do Chromium: 1054281

Recursos experimentais

Automatizar testes de navegador com o Puppeteer Recorder

O DevTools agora pode gerar scripts do Puppeteer com base na sua interação com o navegador, facilitando a automatização dos testes do navegador. O Puppeteer é uma biblioteca do Node.js que fornece uma API de alto nível para controlar o Chrome ou o Chromium pelo protocolo DevTools.

Acesse esta página de demonstração. Abra o painel Sources no DevTools. Selecione a guia Recording no painel esquerdo. Adicione uma nova gravação e nomeie o arquivo (por exemplo, test01.js).

Clique no botão Gravar na parte de baixo para começar a gravar a interação. Tente preencher o formulário na tela. Observe que os comandos do Puppeteer são anexados ao arquivo de acordo. Clique no botão Record novamente para interromper a gravação.

Para executar o script, siga o Guia de primeiros passos no site oficial do Puppeteer.

Esse experimento está em estágio inicial. Planejamos melhorar e expandir a funcionalidade do Gravador ao longo do tempo.

Gravador de fantoches

Problema do Chromium: 1144127

Editor de fonte no painel "Estilos"

O novo Font Editor é um editor pop-over no painel Estilos para propriedades relacionadas à fonte que ajuda você a encontrar a tipografia perfeita para sua página da Web.

O pop-up fornece uma interface limpa para manipular dinamicamente a tipografia com uma série de tipos de entrada intuitivos.

Editor de fonte no painel "Estilos"

Problema do Chromium: 1093229

Ferramentas de depuração de flexbox CSS

O DevTools adicionou suporte experimental à depuração do flexbox desde a última versão (link em inglês).

O DevTools agora mostra uma linha de orientação para ajudar você a visualizar melhor a propriedade align-items do CSS. A propriedade CSS gap também é aceita. No nosso exemplo, temos o CSS gap: 12px;. Observe o padrão de incubação de cada lacuna.

Flexbox

Problema do Chromium: 1139949

Nova guia "Violações da CSP"

Confira um resumo de todas as violações da Política de Segurança de Conteúdo (CSP) na nova guia Violações da CSP. Essa nova guia é um experimento que vai facilitar o trabalho com páginas da Web com uma grande quantidade de violações da CSP e do tipo confiável.

Guia "Violações da CSP"

Problema do Chromium: 1137837

Novo cálculo de contraste de cores — Algoritmo de Contraste Perceptivo Avançado (APCA, na sigla em inglês)

O Algoritmo de contraste de percepção avançado (APCA, na sigla em inglês) está substituindo a taxa de contraste das diretrizes AA/AAA no seletor de cores.

A APCA é uma nova maneira de calcular contraste com base em pesquisas modernas sobre percepção de cores. Em comparação com as diretrizes AA/AAA, a APCA depende mais do contexto. O contraste é calculado com base nas propriedades espaciais (peso e tamanho da fonte), na cor (diferença de luminosidade percebida entre o texto e o plano de fundo) e no contexto (luz ambiente, ambiente, finalidade do texto).

APCA no seletor de cores

O exemplo mostra que o limite da APCA é de 38%. A taxa de contraste precisa ser igual ou maior do que o valor listado. Esse valor é calculado com base na espessura e no tamanho da fonte, de acordo com esta tabela de consulta APCA.

Problema do Chromium: 1121900

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