Novidades do DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Substituir cabeçalhos de resposta da rede

Agora é possível substituir os 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 substituições de cabeçalho de resposta, você pode criar protótipos locais de correções para vários cabeçalhos, incluindo, entre outros:

• Cabeçalhos de compartilhamento de recursos entre origens (CORS)
• Cabeçalhos da 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 só lugar, edite o arquivo .headers em Fontes > Substituições. 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 do Nuxt, Vite e Rollup

Para ajudar você a identificar problemas mais rapidamente durante a depuração, o stack trace aprimorado agora oculta frames de fontes geradas pelo Nuxt 3.3 ou versões mais recentes. O DevTools ignora esses frames:

• Em rastreamentos do Console, no link Mostrar mais N frames.
• Em Fontes > Pilha de chamadas, em Mostrar frames na lista de ignorados.

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

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

A equipe do DevTools agradece à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 de CSS inválidos

Para ajudar você a diagnosticar problemas de CSS mais rápido, o painel Estilos agora risca:

• Uma declaração 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 agradece a Yisi(一丝) por implementar essa melhoria.

Links para frames-chave na propriedade abreviada de animação

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

Problema do Chromium: 1420656.

Nova configuração do 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 usar 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 comandos enfatiza os arquivos criados

A caixa de diálogo de abertura rápida no menu de comandos agora esmaece os arquivos de terceiros ignorados para dar mais ênfase aos arquivos criados por você.

Problema do Chromium: 1424345.

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

Desde o Chrome 58, a equipe do DevTools planejou descontinuar o JavaScript Profiler e fazer com 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 do JavaScript Profiler em quatro fases. 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 nesta versão:

• Foi corrigido um bug que fazia com que a impressão formatada no painel Fontes processasse nomes de variáveis com caracteres Unicode de maneira incorreta (1425055).
• A guia Problemas adicionou uma nova mensagem para problemas de preenchimento automático relacionados a valores HTML não padrão (1399414).

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 ao 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 Novidades do DevTools.