O que há de novo no DevTools (Chrome 94)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Utilize o DevTools em seu idioma preferido

O Chrome DevTools agora suporta mais de 80 idiomas, permitindo que você trabalhe no seu idioma preferido!

Abra Settings, selecione seu idioma preferido na lista suspensa Preferences>Language e recarregue o DevTools.

Altere o idioma em Settings > Preferences

Issue relacionada: 1163928

Novos dispositivos Nest Hub na lista de dispositivos

Agora você pode simular as dimensões do Nest Hub e Nest Hub Max no Device mode.

Clique no Toggle Device Toolbar   Toggle Device Toolbar  , selecione Nest Hub ou Nest Hub Max na lista de dispositivos.

Dispositivo Nest Hub no Device mode

Issue relacionada: 1223525

Origin trials na visão Frame Detail

Agora você pode obter informações sobre Origin trials de um site na visão Frame Detail no painel Application.

Os Origin trials oferecem acesso a um recurso novo ou experimental para criar funcionalidades que seus usuários podem experimentar por um tempo limitado antes que o recurso seja disponibilizado para todos.

Abra a página com o origin trials (exemplo nessa página demo). No painel Application, role para baixo até a seção Frames e selecione o quadro superior.

Origin trials na visão Frame Detail

Issue relacionada: 607555

Novo ícone de consultas de contêiner CSS

Um novo ícone de container foi adicionado próximo aos elementos do contêiner (os elementos antecessores que correspondem aos critérios de regras @container). Clique no ícone para alternar a exibição de uma sobreposição do contêiner escolhido e todos os seus descendentes de consulta na página.

ícone de consultas de contêiner CSS

Issue relacionada: 1146422

Nova caixa de seleção para inverter os filtros de rede

Use a nova caixa de seleção Invert para inverter os filtros no painel Rede.

Por exemplo, você pode digitar "status-code: 404" para filtrar as requisições de rede com status 404. Habilite a caixa de seleção Invert para negar o filtro (mostrar todas as requisições de rede que não estão com status 404).

Inverta os filtros de rede

Issue relacionada: 1054464

Depreciação da barra lateral do Console

A barra lateral do Console será removida em favor de mudar a interface do usuário do filtro para a barra de ferramentas. Você tem alguma preocupação ou feedback? Informe-nos por meio desta Issue.

Mensagem de obsolescência da barra lateral do console

Issue relacionada: 1232937

Exibição dos cabeçalhos Set-Cookie na guia Issues e no painel Network

O DevTools agora exibe cabeçalhos Set-Cookie na guia Issues.

Anteriormente, o DevTools não mostrava cookies malformados (cabeçalho Set-Cookie incorreto) no painel Network. Com o novo filtro response-header-set-cookie adicionado ao painel Network, os usuários podem filtrar a resposta do cabeçalho Set-Cookie. O DevTools vinculará os cabeçalhos Set-Cookie na guia Issues ao painel Network.

Cabeçalhos 'Set-Cookie' na guia Issues no painel Network

Issue relacionada: 1179186

Exibição consistente dos métodos de acesso nativos como propriedades no Console

O Console agora mostra métodos de acesso nativos como propriedades de forma consistente.

Por exemplo, ao avaliar a expressão new Int8Array ([1, 2, 3]) no Console, propriedades nativas como length,byteOffset não eram exibidas na visualização. Com esta atualização, os métodos de acesso nativos aparecem na visualização e os valores são avaliados quando expandidos.

Exibição consistente dos métodos de acesso nativos como propriedades no Console

Issue relacionadas: 1076820, ​​1199247

Adequação dos stacks traces para scripts inline com #sourceURL

O DevTools agora exibe scripts inline com #sourceURL corretamente e mostra os stack traces apropriados para depuração.

Anteriormente, o DevTools exibia a localização incorreta para scripts inline com #sourceURL, em relação ao documento em vez de em relação à tag de abertura<script>.

Adequação dos stacks traces para scripts inline com #sourceURL

Issue relacionadas: 1183990, ​​578269

Alteração do formato da configuração da cor no painel Computed

Você agora pode alterar o formato da cor de qualquer elemento no painel Computed segurando a tecla Shift e clicando na visualização da cor.

Shift+Clique na visualização da cor para alterar o formato da cor

Issue relacionada: 1226371

Substituição dos tooltips customizados por tooltips nativos do HTML

O DevTools agora adota tooltips nativos do HTML em todos os componentes. O DevTools teve uma implementação de tooltips customizados por muito tempo devido à falta de estilização de um tooltip nativo.

Infelizmente, manter uma implementação de tooltips customizado é complexo e encontramos bugs complicados regularmente.

Depois de ponderar novamente os benefícios das implementações customizadas, descobrimos que os tooltips nativos são suficientes para o DevTools e a adoção dos tooltips evita uma grande variedade de problemas para nossos usuários.

DevTools tooltip

Issue relacionada: 1223391

[Experimental] Ocultar problemas na guia Issues

Para ativar o experimento, marque a caixa de seleção Enable hide issues menu em Settings > Experimentos.

Ative o experimento hide issues menu para ocultar problemas na guia Issues. Dessa forma, você pode se concentrar nos problemas importantes para você.

Na guia Issues, passe o mouse sobre um problema e clique no menu do problema   More   à direita, selecione Hide issues like this para ocultá-lo.

Menu de contexto experimental esconder problema

Issue relacionada: 1175722

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.