Novidades do DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Substituir cabeçalhos de resposta da rede

Agora é possível modificar os cabeçalhos de resposta no painel Network. Anteriormente, era necessário acesso ao servidor da Web para testar cabeçalhos de resposta HTTP.

Com substituições de cabeçalho de resposta, é possível criar protótipos de correções localmente para vários cabeçalhos, incluindo, mas não se limitando a:

• Cabeçalhos do Compartilhamento de recursos entre origens (CORS)
• Cabeçalhos Permissions-Policy
• Cabeçalhos de isolamento de origem cruzada

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

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

Para editar todas as substituições em um único local, edite o arquivo .headers em Sources > Substituições. Nessa página, você também pode clicar em Adicionar regra de substituição para modificar 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 de origens geradas pelo Nuxt 3.3 ou versões mais recentes. O DevTools pula estes frames:

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

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

• Versão 3.3 do Nuxt
• Opções do servidor do Vite
• Opções de configuração de visualização completa

A equipe do DevTools gostaria de agradecer às equipes Nuxt, Vite e Rollup por tornarem 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 de CSS em Elementos > Estilos

Propriedades e valores CSS inválidos

Para ajudar você a diagnosticar problemas de CSS mais rapidamente, o painel Estilos agora tem:

• 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 gostaria de agradecer a Yisi(goals丝) por conseguir essa melhoria.

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

A propriedade CSS abreviada animation agora contém links para as regras do atributo @keyframes correspondentes. Assim, você pode navegar no painel Estilos mais rapidamente.

Problema do Chromium: 1420656.

Configuração do novo 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 usar o preenchimento automático com Enter, ative Configurações > Console > Aceitar a sugestão de preenchimento automático ao pressionar Enter.

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

Problema do Chromium: 1276960.

O menu de comando enfatiza arquivos criados

A caixa de diálogo de abertura rápida no Menu de comando agora esmaece os arquivos de terceiros na lista de ignorados para dar mais ênfase aos arquivos de sua autoria.

Problema do Chromium: 1424345.

Suspensão de uso do JavaScript Profiler: estágio dois

Já no Chrome 58 (link em inglês), a equipe do DevTools planejava suspender o uso do JavaScript Profiler e fazer com que os desenvolvedores do Node.js e do Deno usassem o painel Performance para criar o perfil de desempenho da CPU JavaScript.

A versão 113 do DevTools começa a fase dois da descontinuação do JavaScript Profiler de 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

Estas são algumas correções importantes nesta versão:

• Correção de um bug que causava uma boa impressão no painel Sources para lidar com nomes de variáveis com caracteres Unicode incorretamente (1425055).
• A guia Issues adicionou uma nova mensagem para problemas de preenchimento automático em relação a valores HTML não padrão (1399414).

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.