Novidades do DevTools (Chrome 92)

Jecelyn Yeen

Editor de grade CSS

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

Editor de grade CSS

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

Problema do Chromium: 1203241

Suporte para redeclarações de const no Console

Agora o console permite a nova declaração de instruções const, além das novas declarações let e class. A incapacidade de redeclarar era um problema comum para os desenvolvedores da Web que usam o console para testar o novo código JavaScript.

Isso permite que os desenvolvedores copiem e colem o código no console do DevTools para ver como ele funciona ou testa, fazer pequenas alterações no código e repetir o processo sem atualizar a página. Anteriormente, 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 pode ser feita em scripts REPL separados (consulte a variável a). Os cenários a seguir não são compatíveis por padrão:

  • const não é permitida a nova declaração de scripts de páginas em scripts REPL.
  • Não é permitida uma nova declaração de const dentro do mesmo script REPL (consulte a variável b).

const redeclarações

Problema do Chromium: 1076427

Leitor da ordem de origem

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

Leitor da ordem de origem

A ordem do conteúdo em um documento HTML é importante para a otimização e a acessibilidade de mecanismos de pesquisa. Os novos recursos 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 do que os usuários sem 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 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 detalhes do documento, status de segurança e isolamento, política de permissões e muito mais para depurar possíveis problemas.

Visualização de detalhes do frame

Problema do Chromium: 1192084

Suporte avançado à 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 abrir 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 rótulo XHR para Fetch/XHR

O rótulo XHR agora é renomeado para Fetch/XHR. Com a mudança, fica mais claro que o filtro inclui solicitações de rede do XMLHttpRequest e da API Fetch.

Rótulo Fetch/XHR

Problema do Chromium: 1201398

Filtrar o tipo de recurso do Wasm no painel "Rede"

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

Filtrar por Wasm

Problema do Chromium: 1103638

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

As dicas de cliente do user agent agora são aplicadas aos 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. Com ela, os desenvolvedores podem acessar informações sobre o navegador do usuário de maneira ergonômica e que preserva a privacidade.

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

Problema do Chromium: 1174299

Informar problemas no modo Quirks na guia "Problemas"

O DevTools agora informa problemas do Modo quirks e do Modo quirks limitados.

O modo Quirks e o modo Limited-quirks são modos de navegadores legados de antes da criação dos padrões da Web. Esses modos emulam comportamentos de layout pré-padrão que muitas vezes 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 problema real está no modo de compatibilidade em que a página está. O DevTools dá sugestões para corrigir o problema.

Informar problemas no modo Quirks na guia "Problemas"

Problema do Chromium: 622660

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

O DevTools agora mostra as interseções de computação no diagrama de chamas. Essas mudanças ajudam a identificar os eventos intersection observadores e 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 a versão 7.5. O aviso "largura e altura explícitas ausentes" foi removido para imagens com aspect-ratio definido no CSS. Anteriormente, o Lighthouse mostrava avisos para imagens sem largura e altura definidas.

Confira as notas da versão para conferir uma lista completa das 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 apresenta falhas e apresenta falhas.

Menu de contexto de reinicialização do frame descontinuado

Problema do Chromium: 1203606

[Experimental] Monitoramento 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 visualizar todas as solicitações e respostas do CDP feitas pelo DevTools.

Adicionamos duas novas funções para facilitar o teste do CDP:

  • Com o novo botão Save, você pode fazer o download das mensagens gravadas em um arquivo JSON
  • Um novo campo que permite enviar diretamente um comando CDP bruto

Monitor de protocolo

Problemas do Chromium: 1204004, 1204466

[Experimental] Gravador de marionetes

Agora, o Gravador do Puppeteer 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 a exportação das etapas como um script do Puppeteer.

Depois de gravar as etapas, use o novo botão Repetir para reproduzir as etapas novamente. Siga estas instruções para saber como começar a gravar.

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

Gravador de fantoches

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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59