Novidades do DevTools (Chrome 93)

Jecelyn Yeen

Consultas editáveis do contêiner de CSS no painel "Estilos"

Agora é possível visualizar e editar consultas de contêiner de CSS no painel Estilos.

As consultas de contêiner oferecem uma abordagem muito mais dinâmica ao design responsivo. A regra @container funciona de maneira semelhante a uma consulta de mídia com @media. No entanto, em vez de consultar o viewport e o user agent para informações, @container consulta o contêiner ancestral que corresponde a determinados critérios.

No painel Elements, clique em um elemento DOM com @container at-rule. Agora, o DevTools mostra as informações de @container no painel Styles. Clique nele para editar o tamanho. O painel Styles também mostra as informações correspondentes do contêiner. Passe o cursor sobre ele para destacar o elemento do contêiner na página e verificar o tamanho dele. Clique nele para selecionar o elemento contêiner.

No momento, o recurso de consultas de contêiner é experimental. Ative a flag #enable-container-queries em chrome://flags para testar.

Problema do Chromium: 1146422

Prévia do pacote da Web no painel de rede

O pacote da Web é um formato de arquivo para encapsular um ou mais recursos HTTP em um único arquivo. Agora é possível visualizar o conteúdo do pacote da Web no painel Rede.

O recurso de pacote da Web é experimental no momento. Ative a flag #enable-experimental-web-platform-features em chrome://flags para testar.

Problema do Chromium: 1182537

Depuração da API Attribution Reporting

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

A API Attribution Reporting é uma nova API que ajuda a medir quando uma ação do usuário (como um clique ou visualização de anúncio) leva a uma conversão, sem usar identificadores entre sites.

Problema do Chromium: 1190735

Melhor gerenciamento de strings no console

O novo menu de contexto no Console permite copiar qualquer string como conteúdo, literal JavaScript ou literal JSON.

No Chrome 90, as Ferramentas do desenvolvedor foram atualizadas para que o console sempre formate as saídas de string como literais JSON válidos. Recebemos feedback dos desenvolvedores de que essa mudança poderia ser confusa. Alguns acham que a quantidade de escape é excessiva e torna a saída ilegível.

O Console agora formata as saídas de string como literais JavaScript válidos e oferece três opções de cópia de string. A opção Copiar como literal do JavaScript vai escapar dos caracteres especiais apropriados e envolver a string em aspas simples, aspas duplas ou chaves invertidas, dependendo do conteúdo da string. A opção Copiar conteúdo da string copia o conteúdo bruto da string (incluindo novas linhas e outros caracteres especiais) literalmente para a área de transferência. Por fim, Copiar como literal JSON formata a string como um literal JSON válido e a copia para a área de transferência.

Problema do Chromium: 1208389

Depuração aprimorada do CORS

Os TypeErrors relacionados a CORS no Console agora estão vinculados ao painel de rede e à guia "Problemas".

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

Problema do Chromium: 1213393

Lighthouse 8.1

O painel Lighthouse agora está executando o Lighthouse 8.1.

Se o site expor mapas de origem para o Lighthouse, procure o botão View Treemap para conferir um detalhamento do JavaScript enviado, que pode ser filtrado por tamanho e cobertura no carregamento.

O relatório também inclui um novo filtro de métrica. Consulte o filtro Mostrar auditorias relevantes para 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 performance teve várias mudanças na pontuação para se alinhar a outras ferramentas de performance e refletir melhor o estado da Web.

Confira as notas da versão para conferir a lista completa de mudanças.

Problema do Chromium: 772558

Mostrar o URL da nova nota no painel "Manifest"

O painel "Manifest" agora mostra o URL da nova nota.

No momento, no ChromeOS (CrOS), os apps do Chrome e Android que declaram um recurso "new-note" podem ser selecionados como um app de anotações nas configurações da stylus (aparece se o dispositivo CrOS foi usado com uma stylus). Quando selecionado como um app de anotações, ele pode ser iniciado pelo botão "Criar anotação" da paleta da stylus. Adicionar o campo new-note-url no manifesto do aplicativo faz parte do esforço para adicionar uma funcionalidade equivalente aos apps da Web.

Problema do Chromium: 1185678

Seletores de correspondência de CSS corrigidos

As Ferramentas do desenvolvedor corrigiram 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 não correspondente é mostrada em cinza claro.
• Uma parte correspondente do seletor é mostrada em preto.

Problema do Chromium: 1219153

Como mostrar respostas JSON no painel de rede

Agora é possível mostrar as respostas JSON no painel Rede.

Abra uma resposta JSON no painel Network e clique no ícone {} para mostrar a resposta em formato legível.

Bug do Chromium: 998674

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.