Novidades do DevTools (Chrome 89)

Suporte a 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 Tipos confiáveis ajuda a evitar vulnerabilidades de script entre sites baseados em DOM. Saiba como criar, revisar e manter aplicativos livres de vulnerabilidades de XSS de DOM com os Tipos confiáveis neste link.

No painel Origens, abra o painel da barra lateral depurar. Abra a seção CSP Violation Breakpoints e ative a caixa de seleção Trusted Type violations para pausar as exceções. Teste você mesmo com esta página de demonstração.

Problema do Chromium: 1142804

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

O painel Origens agora mostra um ícone de aviso ao lado da linha que viola o tipo confiável. Passe o cursor sobre ele para conferir a exceção. Clique nele para abrir a guia Issues, que fornece mais detalhes sobre as exceções e orientações sobre como corrigir o problema.

Problema do Chromium: 1150883

Fazer captura de tela do nó além da viewport

Agora é possível capturar 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 estava visível na janela de visualização. As capturas de tela de página inteira também são precisas.

No painel Elements, 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 "Trust Tokens" 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 para ajudar a combater fraudes e distinguir bots de humanos 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 conferir 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 é 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 PWA mudou bastante.

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

  • A auditoria "Registra um worker de serviço…" foi movida para o grupo PWA otimizado, e a auditoria "Usar HTTPS" agora faz parte da auditoria de "requisitos de instalabilidade".
  • O grupo Rápido e confiável é removido. Como a auditoria "requisitos de instalabilidade" reformulada inclui a verificação de 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 do painel "Elementos"

Suporte para forçar o estado :target do CSS

Agora é possível 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. Esse novo recurso das Ferramentas do desenvolvedor permite testar esses estilos sem precisar mudar o URL manualmente o tempo todo.

Problema do Chromium: 1156628

Novo atalho para duplicar elementos

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, você pode duplicar o elemento com atalhos de teclado:

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

Problemas do Chromium: 1150797, 1150797

Seletores de cores para propriedades CSS personalizadas

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

Além disso, você pode pressionar a tecla Shift e clicar no seletor de cores para alternar entre as representações RGBA, HSLA e Hex do valor da cor.

Problema do Chromium: 1147016

Novos atalhos para copiar propriedades do CSS

Agora é possível 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 Styles para copiar o valor.

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

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

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

• Copiar declaração. Copie a declaração da linha atual.
• Copiar propriedade. Copia a propriedade da linha atual.
• Copiar valor: copie 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 do URL no painel Cookies.

Acesse o painel Application e selecione 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 Application > Cookies, digite o texto para filtrar os cookies. No 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, 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 Storage, as Ferramentas do desenvolvedor agora limpam apenas cookies próprios por 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 é possível editar as dicas de cliente 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 do user agent são uma alternativa à string do user agent que permite que os desenvolvedores acessem 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 de rede

Persistência da configuração "Gravar registro de rede"

O DevTools agora mantém a configuração "Registrar registro de rede". Anteriormente, o DevTools redefinia a escolha do usuário sempre que uma página era atualizada.

Problema do Chromium: 1122580

Conferir as conexões do WebTransport no painel "Rede"

O painel de rede agora mostra as conexões do 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

"Online" foi renomeado como "Sem limitação"

A opção de emulação de rede "Online" 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 painel "Console e fontes"

Agora é possível copiar valores de objetos com os novos atalhos no painel "Console e 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 nos painéis "Fontes" e "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 no painel Elementos;

Selecione Copiar nome do arquivo no menu de contexto para copiar o nome do arquivo.

Problema do Chromium: 1155120

Atualizações na 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 aparece 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 "Issues"

Se quiser melhorar uma mensagem de problema, acesse a guia Issues no Console ou More Settings > More tools > Issues > para abrir a guia Issues. Abra uma mensagem de problema e clique em A mensagem de problema é útil para você?. Em seguida, você pode enviar feedback no pop-up.

Frames perdidos no painel "Performance"

Ao analisar o desempenho de carregamento no painel "Performance", 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 é 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 extensão para alternar entre a tela única ou dobrada e a tela dupla ou desdobrada.

Também é possível ativar os recursos experimentais da plataforma 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 Experimental Web Platform features. O ícone é destacado quando a flag está ativada. Navegue até chrome://flags e ative a flag.

Problema do Chromium: 1054281

Recursos experimentais

Automatizar testes de navegador com o Puppeteer Recorder

Agora, as Ferramentas do desenvolvedor podem gerar scripts do Puppeteer com base na sua interação com o navegador, facilitando a automaçã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 à 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 maneira adequada. Clique no botão Record novamente para interromper a gravação.

Para executar o script, siga o guia de início no site oficial do Puppeteer.

Este é um experimento em fase inicial. Planejamos melhorar e expandir a funcionalidade do gravador com o tempo.

Problema do Chromium: 1144127

Editor de fontes no painel "Styles"

O novo editor de fontes é um editor de pop-up no painel Estilos para propriedades relacionadas a fontes, para ajudar você a encontrar a tipografia perfeita para sua página da Web.

O pop-up 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 de flexbox do CSS

As Ferramentas do desenvolvedor adicionaram suporte experimental para a depuração de flexbox desde a última versão.

O DevTools agora desenha uma linha de orientação para ajudar a visualizar melhor a propriedade CSS align-items. A propriedade CSS gap também tem suporte. 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 com uma grande quantidade de violações de CSP e de tipo confiável.

Problema do Chromium: 1137837

Novo cálculo de contraste de cores: algoritmo avançado de contraste perceptivo (APCA, na sigla em inglês).

O Advanced Perceptual Contrast Algorithm (APCA) está substituindo a taxa de contraste das diretrizes AA/AAA no Seletor de cores.

A 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 é mais dependente 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, ambiente, finalidade pretendida do texto).

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

Problema do Chromium: 1121900

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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