Novidades do DevTools (Chrome 89)

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ável no painel Fontes.

A API Trusted Types ajuda a evitar vulnerabilidades de scripting entre sites baseadas em DOM. Saiba como escrever, revisar e manter aplicativos livres de vulnerabilidades de XSS baseado em DOM com Tipos Confiáveis aqui.

No painel Origens, abra o painel lateral do depurador. Abra a seção Pontos de interrupção de violação da CSP e marque a caixa de seleção Violações de tipo confiável para pausar nas exceções. Teste você mesmo com esta página de demonstração.

Problema do Chromium: 1142804

Vincular um problema no painel "Fontes" à guia "Problemas"

O painel Fontes agora mostra um ícone de aviso ao lado da linha que viola o tipo confiável. Passe o cursor sobre ela para ver uma prévia da exceção. Clique nela para expandir a guia Problemas, que fornece mais detalhes sobre as exceções e orientações sobre como corrigir.

Problema do Chromium: 1150883

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

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

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

Problema do Chromium: 1003629

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

Inspecione as solicitações de rede do Trust Token com a nova guia Trust Tokens.

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

Mais suporte para depuração será oferecido nas próximas versões.

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 uma lista completa de mudanças.

Novas auditorias no Lighthouse 7:

• Pré-carregar a imagem da Maior exibição de conteúdo (LCP). Verifica se a imagem usada pelo elemento LCP foi 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 de PWAs mudou bastante.

• O grupo Instalável agora é totalmente alimentado pelas verificações de capacidade que ativam os critérios de instalação do Chrome. Esses são os mesmos indicadores vistos no painel de manifesto.

  • A auditoria "Registra um service worker…" passa para o grupo PWA Optimized, e a auditoria "Usa HTTPS" agora está incluída como parte da auditoria principal "Requisitos de capacidade de instalação".
  • O grupo Rápido e confiável é removido. Como a auditoria reformulada de "requisitos de capacidade de instalação" inclui a verificação da capacidade off-line, a auditoria "a página atual e start_url respondem com 200 quando off-line" foi removida. A auditoria "O carregamento de página é rápido o suficiente em redes móveis" também foi removida.

Problema do Chromium: 772558

Atualizações no painel "Elementos"

Forçar o estado :target do CSS

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

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

Use a pseudoclasse :target para estilizar o elemento quando o hash no URL e o ID de um elemento forem iguais. Confira esta demonstração para testar. Com esse novo recurso do DevTools, você pode testar esses estilos sem precisar mudar o URL manualmente o tempo todo.

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, duplique o elemento com atalhos de teclado:

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

Problemas do Chromium: 1150797, 1150797

Seletor de cores para propriedades CSS personalizadas

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

Além disso, mantenha pressionada a tecla Shift e clique no seletor de cores para alternar entre as representações RGBA, HSLA e hexadecimal do valor da cor.

Problema do Chromium: 1147016

Novos atalhos para copiar propriedades do CSS

Agora é possível copiar propriedades CSS mais rápido 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.

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

• Seletor de cópia. Copie o nome do seletor atual.
• Copiar regra. Copia a regra do seletor atual.
• Copiar todas as declarações: copia todas as declarações na regra atual, incluindo propriedades inválidas e com prefixo.

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

• Declaração de cópia. 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 é possível conferir o valor dos cookies decodificados por URL no painel Cookies.

Acesse o painel Application e selecione o painel Cookies. Selecione qualquer cookie na lista. Marque a nova caixa de seleção Mostrar URL decodificado para ver o cookie decodificado.

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 Apagar cookies filtrados.

No painel Application > Cookies, insira texto na caixa de texto para filtrar os cookies. No exemplo aqui, filtramos a lista por "PREF". Clique no botão Apagar cookies filtrados para excluir os cookies visíveis. Limpe o texto do filtro para ver os outros cookies na lista. Antes, só era possível limpar todos os cookies.

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 também esses cookies.

Problema do Chromium: 1012337

Editar dicas de cliente HTTP do user agent para dispositivos personalizados

Agora é possível editar as dicas de cliente HTTP do user agent para dispositivos personalizados.

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

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 as dicas de cliente HTTP do user agent em web.dev/user-agent-client-hints/.

Problema do Chromium: 1073909

Atualizações do painel "Rede"

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

Agora, o DevTools mantém a configuração "Registrar o log de rede". Antes, o DevTools redefinia a escolha do usuário sempre que uma página era recarregada.

Problema do Chromium: 1122580

Ver conexões WebTransport no painel Rede

O painel "Rede" agora mostra conexões WebTransport.

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

Problema do Chromium: 1152290

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

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

Problema do Chromium: 1028078

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

Novos atalhos para copiar objetos no console e no painel "Fontes"

Agora é possível copiar valores de objetos com os novos atalhos no Console e no painel "Fontes". Isso é útil principalmente quando você tem um objeto grande (por exemplo, uma matriz longa) para copiar.

Problemas do Chromium: 1149859, 1148353

Novos atalhos para copiar o nome do arquivo no painel "Fontes" e na seção "Estilos"

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 do painel Elementos

Selecione Copiar nome do arquivo no menu de contexto.

Problema do Chromium: 1155120

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

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

Agora, o DevTools mostra service workers dedicados no frame que os cria.

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

Problema do Chromium: 1122507

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

O status da API performance.measureMemory() agora é mostrado 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 de memória da sua página da Web com essa nova API neste artigo.

Problema do Chromium: 1139899

Enviar feedback na guia "Problemas"

Se quiser melhorar uma mensagem de problema, acesse a guia Problemas no Console ou Mais configurações > Mais ferramentas > Problemas para abrir a guia Problemas. Expanda uma mensagem de problema e clique em Essa mensagem de problema é útil para você?. Em seguida, envie seu feedback no pop-up.

Frames descartados no painel "Desempenho"

Ao analisar o desempenho de carregamento no painel "Desempenho", a seção Frames agora marca os frames descartados em vermelho. Passe o cursor sobre ele para descobrir a taxa de frames.

Problema do Chromium: 1075865

Emular dispositivos dobráveis e de tela dupla no modo de dispositivo

Agora você pode emular dispositivos dobráveis e de tela dupla no DevTools.

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

Clique no novo ícone de extensão para alternar entre as posturas de tela única ou dobrada e tela dupla ou desdobrada.

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

Problema do Chromium: 1054281

Recursos experimentais

Automatizar testes de navegador com o Puppeteer Recorder

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

Acesse esta página de demonstração. Abra o painel Origens no DevTools. Selecione a guia Gravação no painel à esquerda. 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 com a necessidade. Clique no botão Gravar novamente para interromper a gravação.

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

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

Problema do Chromium: 1144127

Editor de fontes no painel "Estilos"

O novo editor de fontes é um editor popover no painel "Estilos" para propriedades relacionadas a fontes. Ele ajuda você a encontrar a tipografia perfeita para sua página da Web.

O popover oferece uma interface limpa para manipular dinamicamente a tipografia com uma série de tipos de entrada intuitivos.

Problema do Chromium: 1093229

Ferramentas de depuração do flexbox CSS

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

O DevTools agora desenha uma linha guia para ajudar você a visualizar melhor a propriedade align-items do CSS. A propriedade CSS gap também é compatível. No nosso exemplo, temos CSS gap: 12px;. Observe o padrão de hachura de cada lacuna.

Problema do Chromium: 1139949

Nova guia "Violações da CSP"

Confira 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 facilita o trabalho com páginas da Web que têm um grande número de violações de CSP e de tipos confiáveis.

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 avançado de contraste perceptual (APCA, na sigla em inglês) está substituindo a taxa de contraste das diretrizes AA/AAA no Seletor de cores.

O APCA é uma nova maneira de calcular o contraste com base em pesquisas modernas sobre percepção de cores. Em comparação com as diretrizes AA/AAA, o APCA depende mais do contexto. O contraste é calculado com base nas propriedades espaciais do texto (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, arredores, finalidade pretendida do texto).

O exemplo mostra que o limite do APCA é 38%. A taxa de contraste precisa atender ou exceder o valor listado. Esse valor é calculado com base no peso e no tamanho da fonte, de acordo com esta tabela de pesquisa da APCA.

Problema do Chromium: 1121900

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

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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