Novidades do DevTools (Chrome 92)

Jecelyn Yeen

Editor de grade CSS

Um recurso muito solicitado. Agora é possível visualizar e criar grades CSS com o novo editor de grades CSS.

Quando um elemento HTML na sua página tem display: grid ou display: inline-grid aplicado, um ícone aparece ao lado dele no painel "Estilos". Clique no ícone para ativar ou desativar o editor de grade CSS. Aqui, você pode visualizar as possíveis mudanças com os ícones na tela (por exemplo, justify-content: space-around) e criar a aparência da grade com apenas um clique.

Problema do Chromium: 1203241

Suporte para redeclarações de const no console

O console agora oferece suporte à redeclaração da instrução const, além das redeclarações let e class atuais. A incapacidade de redeclarar era um problema comum para desenvolvedores da Web que usam o console para testar novos códigos JavaScript.

Isso permite que os desenvolvedores copiem e colem o código no console do DevTools para ver como ele funciona ou testar, fazer pequenas mudanças no código e repetir o processo sem atualizar a página. Antes, o DevTools gerava um erro de sintaxe se o código redeclarasse uma vinculação const.

Consulte o exemplo abaixo. A redeclaração de const é compatível em scripts REPL separados (consulte a variável a). Os seguintes cenários não são compatíveis por design:

• Não é permitido redeclarar scripts de página em scripts REPL.const
• A redeclaração de const no mesmo script REPL não é permitida. Consulte a variável b.

Problema do Chromium: 1076427

Visualizador da ordem de origem

Agora é possível conferir a ordem dos elementos de origem na tela para uma melhor inspeção de acessibilidade.

A ordem do conteúdo em um documento HTML é importante para a otimização de mecanismos de pesquisa e a acessibilidade. Os recursos mais recentes do CSS permitem que os desenvolvedores criem conteúdo com uma ordem na tela muito diferente da ordem no documento HTML. Esse é um grande problema de acessibilidade, já que os usuários de leitores de tela teriam uma experiência diferente e provavelmente confusa em comparação com os usuários com visão.

Problema do Chromium: 1094406

Novo atalho para ver detalhes do frame

Para conferir os detalhes do iframe, clique com o botão direito do mouse no elemento iframe no painel "Elementos" e selecione Mostrar detalhes do frame.

Isso leva você a uma visualização dos detalhes do iframe no painel "Application ", onde é possível examinar detalhes do documento, status de segurança e isolamento, política de permissões e muito mais para depurar possíveis problemas.

Problema do Chromium: 1192084

Suporte aprimorado para depuração do CORS

Os erros de compartilhamento de recursos entre origens (CORS) agora aparecem na guia "Problemas". Existem vários motivos para erros de CORS. Clique para expandir cada problema e entender as possíveis causas e soluções.

Problema do Chromium: 1141824

Atualizações do painel "Rede"

Renomear o rótulo XHR para "Busca/XHR"

O rótulo XHR agora se chama Buscar/XHR. Essa mudança deixa mais claro que o filtro inclui solicitações de rede XMLHttpRequest e da API Fetch.

Problema do Chromium: 1201398

Filtrar o tipo de recurso Wasm no painel de rede

Agora é possível clicar no novo botão Wasm para filtrar as solicitações de rede do Wasm.

Problema do Chromium: 1103638

Dicas de cliente HTTP do user agent para dispositivos na guia "Condições de rede"

As dicas de cliente HTTP do user agent agora são aplicadas a dispositivos no campo User agent na guia Condições de rede.

As dicas de cliente do user agent são uma nova expansão da API Client Hints, que permite aos desenvolvedores acessar informações sobre o navegador de um usuário de maneira ergonômica e que preserva a privacidade.

Problema do Chromium: 1174299

Informar problemas do modo Quirks na guia "Problemas"

O DevTools agora informa problemas do Modo de quirks e do Modo de quirks limitado.

O modo Quirks e o modo Limited-quirks são modos de navegador legados de antes da criação dos padrões da Web. Esses modos emulam comportamentos de layout da era pré-padrão que geralmente causam efeitos visuais inesperados.

Ao depurar problemas de layout, os desenvolvedores podem pensar que eles são causados por bugs de CSS ou HTML criados pelo usuário, quando o problema real é o modo de compatibilidade em que a página está. O DevTools oferece sugestões para corrigir isso.

Problema do Chromium: 622660

Incluir o cálculo de intersecções no painel "Performance"

O DevTools agora mostra as Interseções de computação no gráfico de chamas. Essas mudanças ajudam você a identificar os eventos de observadores de interseção e depurar possíveis sobrecargas de desempenho.

Problema do Chromium: 1199137

Lighthouse 7.5 no painel do Lighthouse

O painel do Lighthouse agora está executando o Lighthouse 7.5. O aviso "largura e altura explícitas ausentes" foi removido para imagens com aspect-ratio definido em CSS. Antes, o Lighthouse mostrava avisos para imagens sem largura e altura definidas.

Confira as notas da versão para ver uma lista completa de mudanças.

Problema do Chromium: 772558

O menu contextual "Reiniciar frame" na pilha de chamadas foi descontinuado.

A opção Reiniciar frame foi descontinuada. Esse recurso precisa de mais desenvolvimento para funcionar bem. No momento, ele está com falhas e trava com frequência.

Problema do Chromium: 1203606

[Experimental] Monitor de protocolo

O Chrome DevTools usa o Chrome DevTools Protocol (CDP) para instrumentar, inspecionar, depurar e criar perfis de navegadores Chrome. O Monitor de protocolo oferece uma maneira de ver todas as solicitações e respostas do CDP feitas pelas DevTools.

Duas novas funções foram adicionadas para facilitar o teste do CDP:

• O novo botão Salvar permite baixar as mensagens gravadas como um arquivo JSON.
• Um novo campo que permite enviar um comando bruto do CDP diretamente

Problemas do Chromium: 1204004, 1204466

[Experimental] Gravador do Puppeteer

O gravador do Puppeteer agora gera uma lista de etapas com base na sua interação com o navegador. Antes, o DevTools gerava um script do Puppeteer diretamente. Um novo botão Exportar foi adicionado para permitir que você exporte as etapas como um script do Puppeteer.

Depois de gravar as etapas, use o novo botão Repetir para reproduzi-las. Siga as instruções aqui para saber como começar a gravar.

Este é um experimento em estágio inicial. Planejamos melhorar e expandir a funcionalidade do Gravador com o tempo.

Problema do Chromium: 1199787

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.