Novidades do DevTools (Chrome 92)

Jecelyn Yeen

Editor de grade de CSS

Um recurso muito solicitado. Agora você pode visualizar e criar a grade CSS com o novo editor de grade CSS!

Editor de grade do 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 novas declarações de const no Console

Agora, o Console é compatível com a nova declaração de const, além das novas declarações let e class. A impossibilidade de declarar novamente era um incômodo comum entre os desenvolvedores Web que usavam 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 fazer experimentos, 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 declarasse novamente uma vinculação const.

Consulte o exemplo abaixo. A nova declaração de const é aceita em scripts REPL diferentes. Consulte a variável a. Os cenários a seguir não são disponibilizados por padrão:

  • Não é permitida a nova declaração de const de scripts de página em scripts REPL.
  • Não é permitida a declaração de const no mesmo script REPL (consulte a variável b)

const declarações

Problema do Chromium: 1076427

Leitor de pedidos de origem

Agora você pode ver a ordem dos elementos de origem na tela para melhorar a inspeção de acessibilidade.

Leitor de pedidos de origem

A ordem do conteúdo em um documento HTML é importante para a otimização e a acessibilidade dos mecanismos de pesquisa. Os novos recursos CSS permitem que os desenvolvedores criem conteúdo que pareça 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, provavelmente confusa, do que os usuários com visão.

Problema do Chromium: 1094406

Novo atalho para ver os detalhes do frame

Veja os detalhes do iframe clicando com o botão direito do mouse no elemento do iframe no painel "Elementos" e selecione Mostrar detalhes do frame.

Mostrar detalhes do frame

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

Visualização de detalhes do frame

Problema do Chromium: 1192084

Suporte aprimorado para depuração de CORS

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

Problemas de CORS na guia Problemas

Problema do Chromium: 1141824

Atualizações do painel Network

Renomear o rótulo XHR como Fetch/XHR

O marcador XHR agora é renomeado como Fetch/XHR. Essa mudança deixa mais claro que esse filtro inclui solicitações de rede do XMLHttpRequest e da API Fetch.

Busca/rótulo XHR

Problema do Chromium: 1201398

Filtrar tipo de recurso Wasm no painel Network

Agora você pode clicar no novo botão Wasm para filtrar as solicitações da rede Wasm.

Filtrar por 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 aos dispositivos no campo User agent da guia Condições de rede.

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

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

Problema do Chromium: 1174299

Informe problemas do modo quirks na guia "Problemas".

O DevTools agora relata problemas no modo Quirks e no Modo quirks limitada.

O modo quirks e o modo quirks limitado são modos de navegador legados anteriores à 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, enquanto o verdadeiro problema é o modo de compatibilidade em que a página se encontra. O DevTools fornece sugestões para corrigi-lo.

Informe problemas do modo quirks na guia "Problemas".

Problema do Chromium: 622660

Incluir interseções de computação no painel de desempenho

O DevTools agora mostra as Intersecções de computação no Flame Chart. Essas mudanças ajudam a identificar os eventos dos observadores de interseção e a depurar as possíveis sobrecargas de desempenho.

Calcular interseções no painel 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 "largura e altura explícitas ausentes" o aviso foi removido 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 ver uma lista completa das alterações.

Problema do Chromium: 772558

A opção "Reiniciar frame" foi descontinuada menu de contexto na pilha de chamadas

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

Menu de contexto "Reiniciar frame" descontinuado

Problema do Chromium: 1203606

[Experimental] Monitor de protocolo

O Chrome DevTools usa o protocolo Chrome DevTools (CDP, na sigla em inglês) para instrumentar, inspecionar, depurar e criar o perfil dos navegadores Chrome. O monitor de protocolo oferece uma maneira de visualizar todas as solicitações e respostas do CDP feitas pelo DevTools.

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

  • O novo botão Save permite fazer o download das mensagens gravadas como um arquivo JSON
  • Um novo campo que permite enviar um comando bruto de CDP diretamente

Monitor de protocolo

Problemas do Chromium: 1204004 e 1204466

[Experimental] Gravador do Puppeteer

O gravador 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 é adicionado para permitir que você exporte as etapas como um script do Puppeteer.

Depois de gravar as etapas, você poderá usar o novo botão Repetir para repeti-las. Siga estas instruções para saber como começar a gravar.

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

Gravador para Puppeteer

Problema do Chromium: 1199787

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   Mais > 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.