Novidades do DevTools (Chrome 93)

Jecelyn Yeen

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

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

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

No painel Elementos, clique em um elemento DOM com a regra at @container. Agora, o DevTools mostra as informações @container no painel Estilos. Clique nele para editar o tamanho. O painel Estilos também mostra as informações do contêiner correspondente. Passe o cursor sobre ele para destacar o elemento do contêiner na página e verificar o tamanho do contêiner. 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.

No momento, o recurso de pacote da Web é experimental. 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 Problemas.

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

Problema do Chromium: 1190735

Melhor tratamento 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, 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 pode ser confusa. Alguns acham que a quantidade de escape é excessiva e torna a saída ilegível.

O Console agora formata 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 JavaScript vai dar escape nos caracteres especiais apropriados e envolver a string em aspas simples, aspas duplas ou crases, 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) exatamente como está para a área de transferência. Por fim, Copiar string 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 ao CORS no Console agora estão vinculados ao painel "Rede" e à guia "Problemas".

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

Problema do Chromium: 1213393

Lighthouse 8.1

O painel Lighthouse agora está executando o Lighthouse 8.1.

Se o site expuser mapas de origem ao Lighthouse, procure o botão Ver mapa de árvore 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 focar nas oportunidades e nos 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 ver uma lista completa de mudanças.

Problema do Chromium: 772558

Mostrar o URL da nova nota no painel "Manifesto"

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

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

Problema do Chromium: 1185678

Corrigimos seletores correspondentes de CSS.

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

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

• Uma parte não correspondente é mostrada em cinza claro.
• Uma parte do seletor correspondente é mostrada em preto.

Problema do Chromium: 1219153

Pretty-printing de respostas JSON no painel "Rede"

Agora é possível imprimir respostas JSON no painel Rede.

Abra uma resposta JSON no painel Rede e clique no ícone {} para fazer a formatação.

Bug do Chromium: 998674

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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 aos DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.