Novidades do DevTools (Chrome 94)

Jecelyn Yeen

Usar as Ferramentas do desenvolvedor no seu idioma preferido

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

Abra Configurações, selecione o idioma de sua preferência no menu suspenso Preferências > Idioma e recarregue as Ferramentas do desenvolvedor.

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    , selecione Nest Hub ou Nest Hub Max na lista de dispositivos.

Problema do Chromium: 1223525

Testes de origem na visualização "Detalhes do frame"

Agora é possível conferir 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 tempo limitado antes de serem disponibilizadas para todos.

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

Problema do Chromium: 607555

Selo de novas consultas de contêiner do CSS

Um novo selo container foi adicionado ao lado dos elementos de contêiner (os elementos ancestrais que correspondem aos critérios das regras de @container). Clique no selo para alternar a exibição de uma sobreposição do contêiner escolhido e de 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 de rede.

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 estão com o status 404).

Problema do Chromium: 1054464

Descontinuação da barra lateral do Console

A barra lateral do console será removida para que a interface do filtro seja movida para a barra de ferramentas. Tem alguma dúvida ou feedback? Informe o problema pelo Issue Tracker.

Problema do Chromium: 1232937

Mostrar cabeçalhos Set-Cookie brutos na guia "Issues" e no painel "Network"

Agora, o DevTools 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 no painel Rede, os usuários podem filtrar a resposta do cabeçalho Set-Cookie bruto. O DevTools vai vincular os cabeçalhos Set-Cookie brutos na guia Issues ao painel Network.

Problema do Chromium: 1179186

Os acionadores nativos são mostrados de forma consistente como propriedades próprias no console

O Console agora mostra os acessórios nativos como propriedades próprias de forma consistente.

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

Problemas do Chromium: 1076820, ​​1199247

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

Agora, o DevTools resolve scripts inline com #sourceURL corretamente e mostra rastros de pilha de erros adequados para depuração.

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

Problemas do Chromium: 1183990, ​​578269

Mudar o formato de cor no painel Computed

Agora você pode mudar o formato de cor de qualquer elemento no painel Computed clicando em Shift + na visualização de cores.

Problema do Chromium: 1226371

Substituir dicas de ferramentas personalizadas por dicas de ferramentas HTML nativas

O DevTools agora 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 nativa do HTML.

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

Depois de reavaliar os benefícios das implementações personalizadas, descobrimos que as dicas de ferramentas HTML nativas são suficientes para as 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 do problema    à direita e 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 navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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