Novidades do DevTools (Chrome 80)

Kayce Basques
Kayce Basques
X GitHub Falha

Suporte para declaraçõ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 declarar novamente era um incômodo comum entre os desenvolvedores Web que usavam o console para testar o novo JavaScript. o código-fonte é alterado.

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

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

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

Uma captura de tela do Console no Chrome 80 mostrando que a nova declaração de permissão foi bem-sucedida.

Problema do Chromium #1004193

Depuração aprimorada do WebAssembly

O DevTools passou a ser compatível com o padrão de depuração DWARF (link em inglês), o que significa um maior suporte a pular o código, definir pontos de interrupção e resolver stack traces nas linguagens de origem do DevTools. Confira Depuração WebAssembly aprimorada no Chrome DevTools para conhecer a história completa.

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

Atualizações do painel Network

Solicitar cadeias de iniciadores na guia "Initiator"

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

Captura de tela de uma cadeia de iniciadores de solicitações na guia "Initiator"

Depois de registrar atividade de rede no painel Network, clique em um recurso e acesse Guia Initiator para consultar a Cadeia de iniciadores 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 dependencies. 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 https://web.dev/chunk-f34f99f7.js.
.

Problema do Chromium 842488

Destacar a solicitação de rede selecionada na seção "Visão geral"

Quando você clica em um recurso de rede para inspecioná-lo, o painel Network coloca uma borda azul em torno desse recurso na Visão geral. Isso pode ajudar a detectar se a solicitação de rede acontecer antes ou depois do esperado.

Captura de tela do painel "Overview" destacando o recurso inspecionado.

Problema do Chromium 988253

Colunas de URL e caminho no painel "Rede"

Use as novas colunas Caminho e URL no painel Rede para ver o caminho absoluto ou completo o URL 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 de user agent personalizada pela guia NetworkConditions. A A string do user agent afeta o cabeçalho HTTP User-Agent anexado aos recursos de rede, além da de navigator.userAgent.

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

Uma captura de tela do menu "User agent" na guia "NetworkConditions".

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

Problema do Chromium #1029031

Atualizações do painel de auditorias

Nova interface de configuração

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

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 o que também é muito mais caro de coletar. Agora, o DevTools usa a cobertura por função por padrão.

Menu suspenso do modo de cobertura.

A cobertura agora precisa ser iniciada pelo recarregamento da página

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

Problema do Chromium #1004203

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.