Novidades do DevTools (Chrome 89)

Jecelyn Yeen

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

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

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

A API de Tipos confiáveis 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 da violação de CSP e ative 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 de tipo confiável

Problema do Chromium: 1142804

O painel Sources 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 Issues. Ela fornece mais detalhes sobre as exceções e orientações sobre como corrigi-lo.

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

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 por conteúdo que não estava visível na janela de visualização. As capturas de tela da página inteira também estão precisas.

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 de 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 para ajudar a combater fraudes e distinguir bots de pessoas reais, sem rastreamento passivo. Saiba como usar os tokens de confiança.

Nas próximas versões, haverá mais suporte à depuração.

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á usando o Lighthouse 7. Confira as notas da versão para uma lista completa das mudanças.

Lighthouse 7 no painel do Lighthouse

Novas auditorias no Lighthouse 7:

  • Pré-carregar imagem da Largest Contentful Paint (LCP). Verifica se a imagem usada pelo elemento da LCP está pré-carregada para melhorar o 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 PWA mudou significativamente.

  • O grupo Installable agora é totalmente alimentado pelas verificações de recursos que ativam os critérios de instalação do Chrome. Esses são os mesmos indicadores vistos no painel Manifest.

    • A auditoria "Registra um service worker..." é movida para o grupo Otimizado para PWA, e a auditoria "Usa HTTPS" agora faz parte da auditoria importante de "requisitos de instalação".
    • O grupo Rápido e confiável foi removido. Como a auditoria dos "requisitos de instalação" reformulada inclui a verificação de recursos off-line, a auditoria "a página atual e o 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 à força do estado :target do CSS

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

No painel Elementos, selecione um elemento e alterne o estado dele. 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 iguais. Confira esta demonstração para fazer um teste. Esse novo recurso do DevTools permite testar esses estilos sem ter que mudar manualmente o URL o tempo todo.

forçar o estado ":target" do CSS

Problema do Chromium: 1156628

Novo atalho para duplicar o 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, você pode manter a tecla Shift pressionada e clicar no seletor de cores para alternar entre as representações RGBA, HSLA e Hex do valor da cor.

Seletores de cores para propriedades CSS personalizadas

Problema do Chromium: 1147016

Novos atalhos para copiar propriedades CSS

Agora você pode copiar propriedades CSS mais rapidamente com alguns novos atalhos.

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

Novos atalhos para copiar propriedades CSS

Opções de cópia 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: copie todas as declarações da regra atual, incluindo propriedades inválidas e prefixadas.

Opções de cópia para a propriedade CSS:

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

Problema do Chromium: 1152391

Atualizações de cookies

Nova opção para mostrar cookies decodificados por 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 conferir o cookie decodificado.

Opção para mostrar cookies decodificados por 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 > Cookies, insira o texto na caixa de texto para filtrar os cookies. Em nosso exemplo aqui, 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 Armazenamento, o DevTools agora limpa apenas os cookies primários por padrão. Ative a opção incluindo cookies de terceiros para limpar os cookies de terceiros também.

Opção para limpar cookies de terceiros

Problema do Chromium: 1012337

Editar dicas de cliente HTTP do user agent para dispositivos personalizados

Agora você pode editar as dicas de cliente HTTP 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 HTTP do user agent

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

Problema do Chromium: 1073909

Atualizações do painel Network

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

O DevTools agora mantém a configuração "Gravar registro da rede". Antes, ele redefine a escolha do usuário sempre que a página era atualizada.

Gravar registro de rede

Problema do Chromium: 1122580

Exibir conexões WebTransport no painel Network

O painel Rede agora exibe as conexões WebTransport.

Conexões WebTransport

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

Problema do Chromium: 1152290

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

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

Gravar registro de rede

Problema do Chromium: 1028078

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

Novos atalhos para copiar objeto no Console e no painel Origens

Agora você pode copiar valores de objetos com os novos atalhos no Console e no painel 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 Origens

Problemas do Chromium: 1149859, 1148353

Novos atalhos para copiar o nome do arquivo nos painéis "Sources" e "Styles"

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

  • um arquivo no painel Origens ou
  • o nome do arquivo no painel Estilos no painel Elementos.

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

Copiar nome do arquivo no painel Origens

Copiar 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 de detalhes do frame

O DevTools agora exibe service workers dedicados abaixo do frame que os cria.

No painel Application, expanda um frame com service workers e selecione um service worker na árvore Service Workers para conferir os detalhes.

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

Problema do Chromium: 1122507

Medir informações de memória na visualização de 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 da 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 a memória

Problema do Chromium: 1139899

Enviar feedback na guia "Problemas"

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

Link de feedback do problema

Frames descartados no painel "Desempenho"

Ao analisar o desempenho do carregamento no painel "Desempenho", a seção Frames agora marca os frames descartados como vermelhos. Passe o cursor sobre ela para descobrir o frame rate.

Frames descartados

Problema do Chromium: 1075865

Emular telas dobráveis e duplas no Modo dispositivo

Agora você pode emular dispositivos dobráveis e de duas telas no DevTools.

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

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

Você também pode ativar os recursos experimentais da plataforma da Web para acessar o novo recurso screen-spanning de mídia CSS e a API getWindowSegments JavaScript. O ícone experimental mostra o estado da sinalização de recursos experimentais da plataforma Web. O ícone é destacado quando a flag é ativada. Navegue até chrome://flags e alterne a sinalização.

Emular tela dupla

Problema do Chromium: 1054281

Recursos experimentais

Automatizar testes do 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 adequadamente. Clique no botão Gravar novamente para interromper a gravação.

Para executar o script, siga o Guia de iniciação no site oficial do Puppeteer.

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

Gravador para Puppeteer

Problema do Chromium: 1144127

Editor de fontes no painel "Estilos"

O novo Font Editor é um editor pop-over no painel Estilos para propriedades relacionadas a fontes que ajuda 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 fontes no painel "Estilos"

Problema do Chromium: 1093229

Ferramentas de depuração de CSS Flexbox

O DevTools adicionou suporte experimental à depuração de flexbox desde a última versão.

O DevTools agora mostra uma linha norteadora para ajudar você a visualizar melhor a propriedade align-items do CSS. A propriedade CSS gap também é compatível. Em 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 rapidamente 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 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 perceptual avançado (APCA, na sigla em inglês) substitui 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 do texto (peso e tamanho da fonte), cor (diferença de luminosidade percebida entre o texto e o plano de fundo) e no contexto (luz ambiente, ambiente, finalidade pretendida do texto).

APCA no seletor de cores

O exemplo mostra que o limite da APCA é de 38%. A taxa de contraste precisa atender ou exceder o valor listado. Esse valor é calculado com base no peso e no tamanho da fonte, consultando esta tabela de consulta da 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é-visualização dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59