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 declaração de const é aceita em scripts REPL separados (consulte a variável a). Os cenários a seguir não são aceitos 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

Você verá os detalhes do iframe no painel "Aplicativo ". Nele, é 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.

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. O aviso "largura e altura explícitas ausentes" 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

Suspensão do uso do menu de contexto "Reiniciar frame" 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59