Novidades do DevTools (Chrome 80)

Kayce Basques

Suporte para redeclarações de let e class no console

O console agora é compatível com novas declarações de instruções let e class. A incapacidade de redeclarar era um problema comum para desenvolvedores da Web que usam o console para testar novos códigos JavaScript.

Por exemplo, antes, ao redeclarar uma variável local com let, o console gerava um erro:

Agora, o console permite a nova declaração:

Problema do Chromium #1004193

Depuração aprimorada do WebAssembly

As DevTools começaram a oferecer suporte ao padrão de depuração DWARF, o que significa mais suporte para percorrer o código, definir pontos de interrupção e resolver rastreamentos de pilha nas linguagens de origem nas DevTools. Confira Depuração aprimorada do WebAssembly no Chrome DevTools para saber mais.

Atualizações do painel "Rede"

Cadeias de iniciadores de solicitação na guia "Iniciador"

Agora você pode ver os iniciadores e as dependências de uma solicitação de rede como uma lista aninhada. Isso pode ajudar você a entender por que um recurso foi solicitado ou qual atividade de rede um determinado recurso (como um script) causou.

Depois de registrar a atividade de rede no painel "Rede", clique em um recurso e acesse a guia Iniciador para conferir a Cadeia de iniciadores de solicitação:

• O recurso inspecionado está em negrito. Na captura de tela acima, https://web.dev/default-627898b5.js é o recurso inspecionado.
• Os recursos acima do inspecionado são os iniciadores. Na captura de tela acima, https://web.dev/bootstrap.js é o iniciador de https://web.dev/default-627898b5.js. Em outras palavras, https://web.dev/bootstrap.js causou a solicitação de rede para https://web.dev/default-627898b5.js.
• Os recursos abaixo do inspecionado são as dependências. Na captura de tela acima, https://web.dev/chunk-f34f99f7.js é uma dependência de https://web.dev/default-627898b5.js. Em outras palavras, https://web.dev/default-627898b5.js causou a solicitação de rede para https://web.dev/chunk-f34f99f7.js.

Problema do Chromium #842488

Destacar a solicitação de rede selecionada na visão geral

Depois de clicar em um recurso de rede para inspecioná-lo, o painel "Rede" agora coloca uma borda azul ao redor desse recurso na Visão geral. Isso pode ajudar você a detectar se a solicitação de rede está ocorrendo antes ou depois do esperado.

Problema do Chromium #988253

Colunas de URL e caminho no painel "Rede"

Use as novas colunas Caminho e URL no painel Rede para conferir o caminho absoluto ou o URL completo de cada recurso de rede.

Clique com o botão direito do mouse no cabeçalho da tabela Cascata e selecione Caminho ou URL para mostrar as novas colunas.

Problema do Chromium #993366

Strings do user agent atualizadas

O DevTools permite definir uma string User-Agent personalizada na guia Condições de rede. A string User-Agent afeta o cabeçalho HTTP User-Agent anexado aos recursos de rede e também o valor de navigator.userAgent.

As strings de user agent predefinidas foram atualizadas para refletir as versões modernas do navegador.

Para acessar Condições de rede, abra o menu de comandos e execute o comando Show Network Conditions

Problema do Chromium #1029031

Atualizações no painel "Auditorias"

Nova interface de configuração

A interface de configuração tem um novo design responsivo, e as opções de configuração de limitação foram simplificadas. Consulte Limitação do painel de auditorias para mais informações sobre as mudanças na interface de limitação.

Atualizações da guia "Cobertura"

Modos de cobertura por função ou por bloco

A guia "Cobertura" tem um novo menu suspenso que permite especificar se os dados de cobertura de código devem ser coletados por função ou por bloco. A cobertura por bloco é mais detalhada, mas também muito mais cara de coletar. O DevTools agora usa a cobertura por função por padrão.

A cobertura agora precisa ser iniciada com uma atualização de página

A alternância da cobertura de código sem uma atualização de página foi removida porque os dados de cobertura não eram confiáveis. Por exemplo, uma função pode ser marcada como não utilizada se a execução dela ocorreu há muito tempo e o coletor de lixo do V8 a limpou.

Problema do Chromium #1004203

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.