Novidades do DevTools (Chrome 94)

Jecelyn Yeen

Usar o DevTools no seu idioma

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

Abra Configurações e selecione seu idioma preferido no menu suspenso Preferências > Idioma. Depois, recarregue o DevTools.

Preferences" width="800" height="494">

Problema do Chromium: 1163928

Novos dispositivos Nest Hub na lista de dispositivos

Agora é possível 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 você pode acessar informações sobre os testes de origem de um site na visualização de detalhes do frame, no painel "Application".

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, a página de demonstração). No painel Application, role para baixo até a seção Frames e selecione o frame superior.

Problema do Chromium: 607555

Novo selo de consultas de contêiner do CSS

Um novo selo de container é adicionado ao lado dos elementos de contêiner (os elementos ancestrais que correspondem aos critérios das regras-at @container). Clique no ícone para ativar ou desativar a exibição de uma sobreposição do contêiner escolhido e de todos os descendentes de consulta dele 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 "Rede".

Por exemplo, digite "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 estão com o status 404).

Problema do Chromium: 1054464

Em breve: descontinuação da barra lateral do console

A barra lateral do console será removida para mover a interface do usuário do filtro para a barra de ferramentas. Tem alguma dúvida ou feedback? Informe-nos usando este Issue Tracker.

Problema do Chromium: 1232937

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

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

Antes, o DevTools não mostrava cookies malformados (cabeçalho Set-Cookie incorreto) no painel "Rede". Com o novo filtro response-header-set-cookie adicionado ao painel Rede, 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 Problemas ao painel Rede.

Problema do Chromium: 1179186

Mostrar acessadores nativos consistentes como propriedades próprias no console

O console agora mostra os acessadores nativos como propriedades próprias de maneira consistente.

Por exemplo, ao avaliar a expressão new Int8Array([1, 2, 3]) no Console, os acessadores nativos, como length e byteOffset, não apareciam na prévia. Com essa atualização mais recente, os acessadores nativos são mostrados na prévia, e os valores são avaliados imediatamente quando expandidos.

Problemas do Chromium: 1076820, 1199247

Rastreamentos de pilha de erros adequados para scripts inline com #sourceURL

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

Antes, o DevTools mostrava o local incorreto para scripts inline com #sourceURL, em relação ao documento ao redor em vez da tag de abertura <script>.

Problemas do Chromium: 1183990, 578269

Mudar o formato de cor no painel "Calculado"

Agora é possível mudar o formato de cor de qualquer elemento no painel "Calculado" pressionando Shift e clicando na visualização de cores.

Problema do Chromium: 1226371

Substituir dicas personalizadas por dicas HTML nativas

Agora, o DevTools adota dicas de ferramentas 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 regularmente encontramos bugs complexos.

Depois de reavaliar os benefícios das implementações personalizadas, descobrimos que as dicas de ferramentas HTML nativas são suficientes para o DevTools e que 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. Assim, você pode se concentrar nos problemas importantes para você.

Na guia Problema, passe o cursor sobre um problema, clique no menu dele à direita e selecione Ocultar problemas semelhantes.

Problema do Chromium: 1175722

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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