O que há de novo no DevTools (Chrome 93)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Consultas de contêiner CSS editáveis no painel Styles

Agora você pode visualizar e editar Consultas de contêiner CSS no painel Styles.

As consultas de contêiner fornecem uma abordagem muito mais dinâmica para design responsivo. A regra @container funciona de maneira semelhante a uma consulta de mídia com @media. No entanto, em vez de consultar a viewport e o agente do usuário em busca de informações, @container consulta o container antecessor que corresponde a certos critérios.

No painel Elements, clique em um elemento DOM com a regra @container, DevTools agora exibe as informações @container no painel Styles. Clique nele para editar o tamanho. O painel Styles também exibe as informações do contêiner correspondente. Passe o mouse sobre ele para destacar o elemento do contêiner na página e verifique o tamanho do contêiner. Clique nele para selecionar o elemento do contêiner.

Atualmente o recurso de consultas de contêiner é experimental. Ative a sinalização #enable-container-queries em chrome://flags para testá-las.

Editable CSS container queries in the Styles pane

Issue relacionada: 1146422

Prévia do web-bundle no painel Network

Web bundle é um formato de arquivo para encapsular um ou mais recursos HTTP em um único arquivo. Agora você pode visualizar o conteúdo do web bundle no painel Network.

O recurso de web-bundle é atualmente experimental. Habilite a sinalização #enable-experimental-web-platform-features em chrome://flags para testá-la.

web bundle preview

Issue relacionada: 1182537

Depuração da Attribution Reporting API

Os erros da Attribution Reporting API agora são relatados na guia Issues.

Attribution Reporting é uma nova API para ajudá-lo a medir quando uma ação do usuário (como um clique no anúncio ou visualização) leva a uma conversão, sem usar identificadores entre sites.

Attribution Reporting API errors in the Issues tab

Issue relacionada: 1190735

Melhor manejo de string no console

O novo menu de contexto no Console permite que você copie qualquer string como conteúdo, literais de JavaScript ou literais de JSON.

New context menu in the Console

No Chrome 90, o DevTools atualizou o Console para sempre formatar saídas de string como literais JSON válidos. Recebemos feedback dos desenvolvedores de que essa mudança poderia ser confusa, e alguns acharam que a quantidade de escape era excessiva e tornava a saída ilegível.

O Console agora formata as saídas de string como literais JavaScript válidas e, além disso, fornece a você 3 opções de string de cópia. A opção Copy as JavaScript literal escapará dos caracteres especiais apropriados e envolverá a string entre aspas simples, aspas duplas ou barras, dependendo do conteúdo. Em vez disso, o Copy string contents copia o conteúdo da string bruta (incluindo nova linha e outros caracteres especiais) na íntegra para a área de transferência. Por fim, Copy as JSON literal formata a string como uma literal JSON válida e a copia para a área de transferência.

Issue relacionada: 1208389

Depuração CORS aprimorada

Os TypeErrors relacionados ao CORS no Console agora estão vinculados ao painel Network e à guia Issues.

Clique nos dois novos ícones ao lado da mensagem de erro relacionada ao CORS para visualizar a solicitação de rede ou entender melhor a mensagem de erro e obter possíveis soluções na guia Problemas.

Icons next to the CORS-related error message

Issue relacionada: 1213393

Lighthouse 8.1

O painel Lighthouse agora está executando o Lighthouse 8.1.

Lighthouse

Se seu site expõe source maps para o Lighthouse, procure o botão View Treemap para ver uma análise do JavaScript enviado, filtrável por tamanho e cobertura no carregamento.

O relatório também inclui um novo filtro de métrica (consulte Mostrar auditorias relevantes para filtro na captura de tela). Escolha uma métrica para se concentrar nas oportunidades e diagnósticos mais relevantes para melhorar apenas essa métrica.

A Categoria de desempenho teve uma série de alterações de pontuação para se alinhar com outras ferramentas de desempenho e refletir melhor o estado da web.

Confira a lista completa de mudanças nas notas de lançamento.

Issue relacionada: 772558

Exibir o novo URL da nota no painel Manifest

O painel Manifest agora exibe o URL da nova nota.

Atualmente no Chrome OS (CrOS), os aplicativos Chrome e aplicativos Android que declaram um recurso de "nova nota", podem ser selecionados como um aplicativo de anotações nas configurações da caneta (aparece se o dispositivo CrOS foi usado com uma caneta).

Quando selecionado como um aplicativo de anotações, ele pode ser iniciado a partir do botão "Criar Anotação" da paleta da caneta. Para adicionar a aplicação web como uma das opções de aplicativo de anotação você precisará adicionar o campo new-note-url no manifesto web do aplicativo.

New note URL in the Manifest pane

Issue relacionada: 1185678

Seletores de correspondência de CSS corrigidos

O DevTools corrigiu os seletores de correspondência de CSS, que não estavam funcionando na versão anterior.

Os seletores separados por vírgulas no painel Styles são coloridos de maneira diferente dependendo se eles correspondem ao nó DOM selecionado:

  • Uma parte sem correspondência é mostrada em cinza claro.
  • Uma parte do seletor correspondente é mostrada em preto.
CSS matching selectors

Issue relacionada: 1219153

Respostas JSON Pretty-printing no painel Network

Agora você pode ver respostas JSON no painel Network de forma agradável (Pretty-printing).

Abra uma resposta JSON no painel Network, clique no ícone {} para transformar em pretty-print.

Pretty-printing JSON responses in the Network panel

Bug relacionado: 998674

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.