Novidades do DevTools (Chrome 93)

Jecelyn Yeen

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

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

As consultas em contêineres fornecem uma abordagem muito mais dinâmica para o design responsivo. A at-rule @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 em busca de informações, o @container consulta o contêiner ancestral que corresponde a determinados critérios.

No painel Elements, clique em um elemento DOM com @container na regra. O DevTools agora exibe as informações de @container no painel Styles. Clique nele para editar o tamanho. O painel Estilos também exibe 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 dele. Clique nele para selecionar o elemento do 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

Visualização do pacote da Web no painel "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 ainda está em fase experimental. Ative a sinalização #enable-experimental-web-platform-features em chrome://flags para testá-la.

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 para ajudar você a medir quando uma ação do usuário (como um clique em um anúncio ou uma visualização) leva a uma conversão sem usar identificadores entre sites.

Problema do Chromium: 1190735

Melhor processamento de strings no console

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

No Chrome 90, o DevTools atualizou o Console para sempre formatar as saídas das strings como literais JSON válidos. Recebemos feedback dos desenvolvedores informando 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 JavaScript faz o escape dos caracteres especiais apropriados e coloca a string entre aspas simples, duplas ou acentos graves, dependendo do conteúdo da string. A opção Copiar conteúdo da string copia o conteúdo da string bruta (incluindo novas linhas e outros caracteres especiais) na íntegra para a área de transferência. Por fim, a opção 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 de 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 encontrar possíveis soluções na guia Problemas.

Problema do Chromium: 1213393

Lighthouse 8.1

O painel Lighthouse agora está executando o Lighthouse 8.1.

Caso seu site exponha mapas de origem ao Lighthouse, procure o botão Ver mapa de árvore para ver 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 Mostrar auditorias relevantes para na captura de tela. Escolha uma métrica para se concentrar nas oportunidades e nos diagnósticos mais relevantes para melhorar essa métrica.

A categoria de desempenho passou por uma série de mudanças na pontuação para se alinhar a outras ferramentas de desempenho e refletir melhor o estado da Web.

Confira as notas da versão para ver uma lista completa das alterações.

Problema do Chromium: 772558

Exibir o URL da nova observação no painel "Manifest"

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

Atualmente no ChromeOS (CrOS), apps do Chrome e apps Android que declaram uma "nova nota" pode ser selecionado como um app de anotações nas configurações da stylus. Essa opção vai aparecer se o dispositivo ChromeOS tiver sido usado com uma stylus. Quando selecionado como um app de anotações, ele pode ser iniciado na opção "Criar nota" da paleta da stylus. . A adição do campo new-note-url ao manifesto do aplicativo faz parte do esforço para oferecer uma funcionalidade equivalente aos apps da Web.

Problema do Chromium: 1185678

Corrigimos os seletores de correspondência de CSS

O DevTools corrigiu os seletores de correspondência de CSS. Ele não estava funcionando na última versão.

Os seletores separados por vírgula no painel Estilos têm cores diferentes dependendo se correspondem ao nó DOM selecionado:

• A parte sem correspondência aparece em cinza claro.
• Uma parte do seletor correspondente é mostrada em preto.

Problema do Chromium: 1219153

Respostas JSON de visual atraente no painel Network

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

Abra uma resposta JSON no painel Network e clique no ícone {} para aplicar um estilo de formatação.

Bug do Chromium: 998674

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.