Novidades do DevTools (Chrome 94)

Jecelyn Yeen

Use o DevTools no seu idioma de preferência

O Chrome DevTools agora oferece suporte a mais de 80 idiomas, permitindo que você trabalhe no seu idioma preferido.

Abra as Configurações e selecione o idioma em Preferências > Menu suspenso Language e recarregue o DevTools.

Preferências" largura="800" height="494">

Problema do Chromium: 1163928

Novos dispositivos Nest Hub na lista de dispositivos

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

Clique em Alternar barra de ferramentas do dispositivo   e selecione "Nest Hub" ou "Nest Hub Max" na lista de dispositivos.

Problema do Chromium: 1223525

Testes de origem na visualização de detalhes do frame

Agora é possível receber informações sobre os testes de origem de um site na visualização de detalhes do frame no painel "Aplicativo".

Os testes de origem dão acesso a um recurso novo ou experimental para criar funcionalidades que os usuários podem testar por um tempo limitado antes que o recurso seja disponibilizado para todos.

Abra uma página com testes de origem (por exemplo, página de demonstração). No painel Aplicativo, role para baixo até a seção Frames e selecione o frame superior.

Problema do Chromium: 607555

Novo selo de consultas de contêineres do CSS

Um novo selo de container será adicionado ao lado dos elementos do contêiner (os elementos ancestrais que correspondem aos critérios de @container nas regras). Clique no selo para alternar a exibição de uma sobreposição do contêiner escolhido e todos os descendentes de consulta na página.

Problema do Chromium: 1146422

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

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

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

Problema do Chromium: 1054464

Descontinuação em breve da barra lateral do console

A barra lateral do console será removida para mover a interface do filtro para a barra de ferramentas. Você tem alguma dúvida ou feedback? Informe-nos usando o Issue Tracker.

Problema do Chromium: 1232937

Exibir cabeçalhos Set-Cookie brutos na guia "Problemas" e no painel "Rede"

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

Antes, 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 bruta do cabeçalho Set-Cookie. O DevTools vai vincular os cabeçalhos Set-Cookie brutos na guia Issues ao painel Network.

Problema do Chromium: 1179186

Acessadores nativos de exibição consistentes como propriedades próprias no console

O Console agora exibe os acessadores nativos como as propriedades deles de maneira consistente.

Por exemplo, ao avaliar a expressão new Int8Array([1, 2, 3]) no Console, os acessadores nativos, como length, byteOffset não foram exibidos na visualização. Com essa atualização mais recente, os acessadores nativos são mostrados na visualização, e os valores são avaliados com antecedência quando expandidos.

Problemas do Chromium: 1076820, 1199247

Rastreamentos de pilha de erros adequados para scripts in-line com #sourceURL

O DevTools agora resolve scripts inline com #sourceURL corretamente e mostra stack traces de erros adequados para depuração.

Anteriormente, o DevTools exibia o local incorreto para scripts inline com #sourceURL, em relação ao documento ao redor, e não à tag <script> de abertura.

Problemas do Chromium: 1183990, 578269

Mudar o formato de cor no painel "Calculado"

Agora você pode mudar o formato de cor de qualquer elemento no painel "Calculado" pressionando a tecla Shift e clicando na visualização da cor.

Problema do Chromium: 1226371

Substituir dicas personalizadas por dicas em HTML nativo

O DevTools agora adota dicas de HTML nativas em todos os componentes. O DevTools tem uma implementação de dica personalizada há muito tempo devido à falta de estilo de uma dica HTML nativa.

Infelizmente, manter uma implementação de dica personalizada é complicado e encontramos bugs complicados regularmente.

Depois de reavaliar os benefícios das implementações personalizadas, descobrimos que as dicas de HTML nativas são suficientes para o DevTools e a adoção delas evita uma grande variedade de problemas para nossos usuários.

Problema do Chromium: 1223391

[Experimental] Ocultar problemas na guia "Problemas"

Ative o experimento ocultar menu de problemas para ocultar problemas na guia Problemas. Dessa forma, você pode se concentrar nas questões importantes que importam para você.

Na guia Problema, passe o cursor sobre um problema, clique no menu de problemas à direita, selecione Ocultar problemas como este para ocultá-lo.

Problema do Chromium: 1175722

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.