Novidades do DevTools (Chrome 92)

Editor de grade CSS

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

Quando um elemento HTML na página tem display: grid ou display: inline-grid aplicado, um ícone aparece ao lado dele no painel "Styles". 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 à nova declaração de const, além das declarações let e class. A incapacidade de declarar novamente era uma irritação 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 conferir como ele funciona ou fazer experimentos, 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 declarasse novamente uma vinculação const.

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

• A declaração de const de scripts de página não é permitida em scripts REPL.
• A nova declaraçã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 que parece muito diferente na ordem na tela do que está no documento HTML. Esse é um grande problema de acessibilidade, porque 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 conferir detalhes do frame

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

Isso leva você a uma visualização dos detalhes do iframe no painel "Application ", onde é possível examinar os detalhes do documento, o status de segurança e isolamento, a 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 são exibidos na guia "Problemas". Existem vários motivos que causam erros do CORS. Clique para abrir cada problema e entender as possíveis causas e soluções.

Problema do Chromium: 1141824

Atualizações do painel de rede

Renomear o rótulo XHR para Fetch/XHR

O rótulo XHR foi renomeado para Fetch/XHR. Essa mudança deixa mais claro que esse filtro inclui solicitações de rede XMLHttpRequest e API Fetch.

Problema do Chromium: 1201398

Filtrar o tipo de recurso Wasm no painel "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 para 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 que os desenvolvedores acessem informações sobre o navegador de um usuário de maneira ergonômica e que preserva a privacidade.

Problema do Chromium: 1174299

Informar problemas no modo Quirks na guia "Problemas"

Agora, o DevTools informa problemas com o Modo de peculiaridades e o Modo de peculiaridades limitado.

Os modos Quirks e Limited-quirks são modos de navegador legados de antes 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, mas o problema real é o modo de compatibilidade em que a página está. O DevTools oferece sugestões para corrigir o problema.

Problema do Chromium: 622660

Incluir interseções de computação no painel "Performance"

As DevTools agora mostram as interseções de computação no gráfico de chama. Essas mudanças ajudam a identificar os eventos de observadores de interseção e depurar os possíveis custos adicionais de desempenho.

Problema do Chromium: 1199137

Lighthouse 7.5 no painel do Lighthouse

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

Confira as notas da versão para conferir a lista completa de mudanças.

Problema do Chromium: 772558

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

A opção Reiniciar frame foi descontinuada. Esse recurso precisa de mais desenvolvimento para funcionar bem. No momento, ele está quebrado e falha 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 conferir todas as solicitações e respostas do CDP feitas pelo DevTools.

Duas novas funções foram adicionadas para facilitar os testes do CDP:

• O novo botão Salvar permite fazer o download das 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 Puppeteer

O registrador 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 Export 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 reproduzir as etapas. Siga as instruções aqui para saber como começar a gravar.

Este é um experimento em fase inicial. Planejamos melhorar e expandir a funcionalidade do gravador com o tempo.

Problema do Chromium: 1199787

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.