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 na guia Origens do painel de controle.

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 Violação da CSP Pontos de interrupção e marque a caixa de seleção Violações de tipo confiável para pausar no exceções. Teste por conta própria nesta página de demonstração.

Problema do Chromium: 1142804

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

O painel Sources agora mostra um ícone de aviso ao lado da linha que viola o tipo confiável. Passar o cursor sobre para visualizar a exceção. Clique nele para abrir a guia Problemas, que contém mais detalhes as exceções e orientações para corrigi-lo.

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 foi cortada devido ao conteúdo não visível na janela de visualização. As capturas de tela de página inteira são mais precisas agora.

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

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 passividade monitoramento. Saiba como usar os tokens de confiança.

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

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 ter acesso lista de alterações.

Novas auditorias no Lighthouse 7:

• Pré-carregar imagem da Largest Contentful Paint (LCP). Audita se a imagem usada pelo elemento da LCP é pré-carregado para melhorar seu tempo de LCP.
• Problemas registrados no painel Issues. Indica uma lista de problemas não resolvidos no Issues do painel de controle.
• Progressive Web Apps (PWA). A categoria PWA mudou significativamente.

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

  • O botão "Registra um service worker..." de auditoria é movida para o grupo Otimizado para PWA, e a seção "Usos HTTPS" como parte dos principais "requisitos de instalação" auditoria.
  • O grupo Rápido e confiável foi removido. Com a reformulação dos "requisitos de instalação", auditar inclui a verificação de capacidade off-line, "a página atual e o start_url respondem com 200 quando off-line" foi removida. "O carregamento da página é rápido o suficiente na rede móvel" auditoria foi removida também.

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. Ativar :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 são iguais. Confira esta demonstração para fazer um teste. Esse novo recurso do DevTools permite testar esses estilos sem ter que alterar manualmente o URL o tempo todo.

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á ser criados sob ele.

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

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

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 RGBA, HSLA, e hexadecimais do valor da cor.

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.

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: copiar todas as declarações de acordo com a regra atual, incluindo as inválidas e propriedades 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.

Problema do Chromium: 997625

Limpar apenas cookies visíveis

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

No painel Aplicativo > Cookies, digite o texto na caixa de texto para filtrar os cookies. Em neste exemplo, filtramos a lista por "PREF". Clique no botão Limpar cookies filtrados para e 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.

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 ao padrão. Ative a opção incluindo cookies de terceiros para limpar os cookies de terceiros também.

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 o user agent dicas de cliente 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 do usuário de maneira ergonômica e que preserve 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 o "registro de registro da rede" configuração

O DevTools agora mantém a opção "Gravar registro da rede" do ambiente. Antes, o DevTools redefineva a escolha do usuário sempre que uma página é atualizada.

Problema do Chromium: 1122580

Exibir conexões WebTransport no painel Network

O painel Rede agora exibe as 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 dar feedback sobre o futuro da implementação em web.dev/webtransport/.

Problema do Chromium: 1152290

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

A opção de emulação de rede "On-line" foi renomeado como "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 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 é especialmente 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 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.

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 Aplicativo, expanda um frame com service workers e selecione um service worker na árvore Service Workers para visualizar 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 aparece em Disponibilidade da API nesta seção.

A nova API performance.measureMemory() estima o uso da memória de toda a página da Web. Aprender 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 você 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. Abrir um problema e clique na mensagem A mensagem do problema é útil para você?. Depois, forneça feedback no o pop-up.

Frames descartados no painel "Desempenho"

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

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 (em inglês).

Clique no ícone de novo período para alternar entre tela única, dobrada e dupla ou aberta. e posturas de segurança.

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

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, tornando a automatização dos testes do navegador. Puppeteer é uma biblioteca 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 Gravação no 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 na tela. Observe que os comandos do Puppeteer são anexados ao arquivo adequadamente. Clique no 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 o Gravador da funcionalidade ao longo do tempo.

Problema do Chromium: 1144127

Editor de fontes no painel "Estilos"

O novo Editor de fontes é um editor pop-over no painel Estilos para propriedades relacionadas a fontes que ajuda você a 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 comandos intuitivos tipos de entrada.

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 A propriedade CSS gap também é compatível. Em nosso exemplo, temos o CSS gap: 12px;. Observe que de eclosão para cada lacuna.

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 é experimental e vai facilitar o trabalho com páginas da Web com um grande número de das violações de CSP e tipo confiável.

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) vai substituir AA/AAA taxa de contraste das diretrizes no Seletor de cores.

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

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é-lançamento 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.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no 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.