Novidades do DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
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:

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 Editar. e edite.

O erro CORS foi corrigido por uma substituição de cabeçalho.

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

Adicionar um cabeçalho personalizado.

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 (*).

Editar todas as substituições.

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:

O stack trace antes e depois de ativar a lista de ignorados de terceiros.

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:

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.

Nome e valor de propriedade inválidos.

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.

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

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. Configurações > Console > Caixa de seleção. Aceitar sugestão de preenchimento automático ao pressionar Enter.

A caixa de seleção correspondente em "Configurações".

Além disso, o texto de outra configuração agora é mais fácil de usar: Caixa de seleção. 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ê.

Um script ignorado na lista na caixa de diálogo de abertura rápida antes e depois da mudança.

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.

Descontinuação do criador de perfil do JavaScript.

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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.