Novidades do DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Substituir cabeçalhos de resposta da rede

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

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

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 playlist. e edite-o.

Erro de CORS 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 local, edite o arquivo .headers em Origens > Substituições. Nessa página, também é possível clicar em Adicionar regra de substituição para substituir várias solicitações usando caracteres curinga (*).

Editando todas as substituições.

Problema do Chromium: 1288023.

Melhorias na depuração Nuxt, Vite e Rollup

Para ajudar a identificar problemas mais rapidamente durante a depuração, o stack trace avançado agora oculta frames de origens geradas pelo Nuxt 3.3 ou versões mais recentes. O DevTools pula estes 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 x_google_ignoreList do mapa de origem:

A equipe do DevTools gostaria de agradecer às equipes da Nuxt, Vite e Rollup por tornar isso possível. Agradecemos seu esforço 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 a diagnosticar problemas de CSS com mais rapidez, 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.

O nome e o valor da propriedade são inválidos.

A equipe do DevTools gostaria de expressar gratidão a Yisi(recommended丝) por ter feito essa melhoria.

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

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

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

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 preencher automaticamente com Enter, ative a opção Configurações. Configurações > Console > Caixa de seleção. Aceitar a 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 está mais fácil de usar: Caixa de seleção. Trate 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 esmaece os arquivos de terceiros na lista de ignorados para dar mais ênfase aos arquivos de sua autoria.

um script da lista de ignorados na caixa de diálogo de abertura rápida antes e depois da mudança;

Problema do Chromium: 1424345.

Descontinuação do JavaScript Profiler: estágio dois

No Chrome 58, a equipe do DevTools planejava suspender o uso do JavaScript Profiler e fazer com que os desenvolvedores Node.js e Deno usassem o painel Performance para criar perfis de desempenho da CPU JavaScript.

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

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

Descontinuação do JavaScript Profiler.

Problema do Chromium: 1354548.

Destaques diversos

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

  • Correção de um bug que fazia com que a formatação do painel Origens fosse usada incorretamente em nomes de variáveis com caracteres Unicode (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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59