Novidades do DevTools (Chrome 80)

Kayce Basques
Kayce Basques
X GitHub Falha

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

O console agora oferece suporte a novas declarações de let e class. A incapacidade de declarar novamente era uma chatice comum para desenvolvedores da Web que usam o console para testar novos códigos JavaScript.

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

Uma captura de tela do console no Chrome 78 mostrando que a nova declaração de let falha.

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

Uma captura de tela do console no Chrome 80 mostrando que a rededicação de let foi bem-sucedida.

Problema do Chromium #1004193

Depuração aprimorada do WebAssembly

O DevTools começou a oferecer suporte ao padrão de depuração DWARF, o que significa mais suporte para passar por código, definir pontos de interrupção e resolver rastros de pilha nas linguagens de origem no DevTools. Confira a história completa em Melhorias na depuração do WebAssembly no Chrome DevTools.

Captura de tela da nova depuração de WebAssembly com DWARF.

Atualizações do painel de rede

Solicitar cadeias de iniciador na guia "Iniciador"

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

Captura de tela de uma cadeia do iniciador de solicitação na guia "Iniciador"

Depois de registrar a atividade de rede no painel "Rede", clique em um recurso e acesse a guia Iniciador para conferir a cadeia de iniciador de solicitações:

  • O recurso inspecionado está em negrito. Na captura de tela acima, https://web.dev/default-627898b5.js é o recurso inspecionado.
  • Os recursos acima do recurso 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 recurso 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 seção "Visão geral"

Depois de clicar em um recurso de rede para inspecionar, o painel "Network" agora coloca uma borda azul em torno desse recurso na Visão geral. Isso pode ajudar a detectar se a solicitação de rede está acontecendo antes ou depois do esperado.

Captura de tela do painel "Visão geral" destacando o recurso inspecionado.

Problema do Chromium #988253

Colunas de URL e caminho no painel de rede

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

Captura de tela das novas colunas "Caminho" e "URL" no painel "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 oferece suporte à configuração de uma string User-Agent personalizada na guia Network Conditions. 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 predefinidas do User-Agent foram atualizadas para refletir as versões modernas do navegador.

Captura de tela do menu "User Agent" na guia "Network conditions".

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

Problema do Chromium #1029031

Atualizações do painel de 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.

A nova interface de configuraçã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 precisam ser coletados por função ou por bloco. A cobertura por bloco é mais detalhada, mas também muito mais cara de coletar. Agora, o DevTools usa a cobertura por função por padrão.

Menu suspenso do modo de cobertura.

Agora, a cobertura precisa ser iniciada com uma atualização de página

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

Problema do Chromium #1004203

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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.