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. O 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 faz parte de um experimento que vai facilitar o trabalho com páginas da Web com uma grande quantidade 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.