Novidades do DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Substituir cabeçalhos de resposta da rede

Agora é possível substituir cabeçalhos de resposta no painel Rede. Antes, era necessário ter acesso ao servidor da Web para testar os cabeçalhos de resposta HTTP.

Com as substituições de cabeçalho de resposta, é possível criar protótipos de correção localmente para vários cabeçalhos, incluindo, entre outros:

• Cabeçalhos de compartilhamento de recursos entre origens (CORS)
• Cabeçalhos de política de permissões
• Cabeçalhos de isolamento de origem cruzada

Para substituir um cabeçalho, acesse Rede > Cabeçalhos > Cabeçalhos de resposta, passe o cursor sobre o valor de um cabeçalho, clique em e edite.

Também é possível adicionar cabeçalhos personalizados.

Para editar todas as substituições em um único lugar, edite o arquivo .headers em Origens > Substituições. Nele, você também pode clicar em Adicionar regra de substituição para substituir várias solicitações usando caracteres curinga (*).

Problema do Chromium: 1288023.

Melhorias na depuração de Nuxt, Vite e Rollup

Para ajudar a identificar problemas mais rapidamente durante a depuração, o stack trace aprimorado agora oculta frames que vêm de fontes geradas pelo Nuxt 3.3 ou mais recente. O DevTools pula esses frames:

• Nos rastros do Console, no link Mostrar mais N frames.
• Em Origens > Pilha de chamadas, em Mostrar frames ignorados.

Para oferecer essas melhorias, as equipes do DevTools, Nuxt, Vite e Rollup colaboraram para adotar a extensão do mapa de origem x_google_ignoreList:

• Lançamento da Nuxt 3.3
• Opções do servidor Vite
• Opções de configuração de agrupamento

A equipe do DevTools gostaria de expressar gratidão às equipes do Nuxt, Vite e Rollup por tornar isso possível. Agradecemos seus esforços e colaboração, que foram essenciais para o sucesso dessa implementação. Agradecemos novamente suas contribuições.

Melhorias no CSS em Elementos > Estilos

Propriedades e valores CSS inválidos

Para ajudar a diagnosticar problemas de CSS com mais rapidez, o painel Styles agora exibe:

• Uma declaração de CSS inteira (propriedade e valor) quando a propriedade CSS é inválida.
• Apenas o valor quando a propriedade CSS é válida, mas o valor é inválido.

A equipe do DevTools gostaria de agradecer a Yisi(一丝) por essa melhoria.

Vincula a frames-chave na propriedade abreviada de animação

A propriedade CSS abreviada animation agora contém links para as @keyframes at-rules correspondentes, para que você possa navegar pelo painel Estilos mais rapidamente.

Problema do Chromium: 1420656.

Nova configuração do Play Console: preenchimento automático ao pressionar Enter

A partir da versão anterior (112), é possível configurar o Console do DevTools para aplicar uma sugestão de preenchimento automático ao pressionar Enter.

Por padrão, para aceitar uma sugestão de preenchimento automático, pressione Tab ou Arrow right. Para também fazer o preenchimento automático com Enter, ative Configurações > Console > Aceitar sugestão de preenchimento automático ao pressionar Enter.

Além disso, o texto de outra configuração agora é mais fácil de usar: Tratar a avaliação do código como uma ação do usuário.

Problema do Chromium: 1276960.

O menu de comando enfatiza os arquivos criados

A caixa de diálogo de abertura rápida no Menu de comando agora desativa os arquivos de terceiros ignorados para dar mais ênfase nos arquivos criados por você.

Problema do Chromium: 1424345.

Descontinuação do criador de perfil do JavaScript: segunda fase

No Chrome 58, a equipe do DevTools planejou a desatualização do JavaScript Profiler e que os desenvolvedores do Node.js e do Deno usassem o painel Performance para criar perfis de desempenho da CPU JavaScript.

A versão 113 do DevTools inicia a segunda fase da descontinuação em quatro fases do Profiler do JavaScript. Durante essa fase, ainda é possível abrir o painel, mas a interface dele não está mais disponível.

Para criar um perfil de desempenho da CPU, clique em Acessar o painel de desempenho.

Problema do Chromium: 1354548.

Destaques diversos

Confira algumas correções importantes desta versão:

• Correção de um bug que fazia com que a impressão bonita no painel Origens processasse nomes de variáveis com caracteres Unicode incorretamente (1425055).
• A guia Problemas adicionou uma nova mensagem para problemas de preenchimento automático relacionados a valores HTML não padrão (1399414).

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.