Novidades do DevTools (Chrome 68)

Kayce Basques

Novidades no DevTools no Chrome 68:

• Avaliação antecipada. À medida que você digita expressões, o Console visualiza o resultado.
• Dicas de argumento. Conforme você digita as funções, o console mostra os argumentos esperados para elas função.
• Preenchimento automático de função. Depois de digitar uma chamada de função como document.querySelector('p'), o Console mostra as funções e propriedades compatíveis com o valor de retorno.
• Palavras-chave do ES2017 no console. Palavras-chave como await já estão disponíveis no console interface de preenchimento automático.
• Lighthouse 3.0 no painel "Auditorias". Auditorias mais rápidas e consistentes, uma nova interface e novas auditorias.
• Suporte para BigInt. Teste o novo número inteiro de precisão arbitrária do JavaScript no Console.
• Como adicionar caminhos de propriedade ao painel "Watch". Adicionar propriedades do painel "Scope" ao relógio .
• "Mostrar marcações de tempo" foi movida para "Configurações".

Continue lendo ou assista à versão em vídeo das notas da versão abaixo.

Console assistivo

O Chrome 68 é fornecido com alguns recursos novos do Console relacionados ao preenchimento automático e à visualização.

Avaliação estrita

Quando você digita uma expressão no console, ele pode mostrar uma prévia do resultado abaixo do cursor.

Figura 1. O console está exibindo o resultado da operação sort() antes de ser executada explicitamente

Para ativar a avaliação antecipada, faça o seguinte:

1. Abra o console.
2. Abra as Configurações do console.
3. Marque a caixa de seleção Avaliação áspera.

O DevTools não avalia prontamente se a expressão causa efeitos colaterais.

Dicas de argumentos

À medida que você digita as funções, o console agora mostra os argumentos que a função espera.

Figura 2. Vários exemplos de dicas de argumento no console

Observações:

• Um ponto de interrogação antes de um argumento, como ?options, representa um argumento opcional.
• Uma elipse antes de um argumento, como ...items, representa uma distribuição.
• Algumas funções, como CSS.supports(), aceitam várias assinaturas de argumento.

Preenchimento automático após execuções de funções

Depois de ativar a avaliação antecipada, o console também mostra quais propriedades e funções são disponível depois que você digita uma função.

Figura 3. A captura de tela de cima representa o comportamento antigo e a de baixo mostra o novo comportamento compatível com o preenchimento automático de funções

Palavras-chave ES2017 no preenchimento automático

As palavras-chave ES2017, como await, agora estão disponíveis na interface de preenchimento automático do console.

Figura 4. O console agora sugere await na interface de preenchimento automático

Auditorias mais rápidas e confiáveis, uma nova interface e novas auditorias

O Chrome 68 vem com o Lighthouse 3.0. As próximas seções são um resumo de algumas das maiores mudanças. Consulte Anúncio do Lighthouse 3.0 para ver a história completa.

Auditorias mais rápidas e confiáveis

O Lighthouse 3.0 tem um novo mecanismo de auditoria interna, o codinome Lantern, que conclui suas auditorias. mais rápido e com menos variação entre as execuções.

Nova interface

O Lighthouse 3.0 também traz uma nova interface, graças à colaboração entre o Lighthouse e a UX do Chrome. (pesquisa e design).

Figura 5. A nova interface de relatórios no Lighthouse 3.0

Novas auditorias

O Lighthouse 3.0 também está disponível com quatro novas auditorias:

• First Contentful Paint
• O robots.txt não é válido
• Usar formatos de vídeo para conteúdo animado
• Evite várias idas e voltas caras a qualquer origem

Suporte do BigInt

O Chrome 68 é compatível com um novo primitivo numérico chamado BigInt. BigInt permite que você represente números inteiros com precisão arbitrária. Faça o teste no console:

Figura 6. Um exemplo de BigInt no console

Adicionar caminho de propriedade ao monitoramento

Enquanto estiver pausado em um ponto de interrupção, clique com o botão direito do mouse em uma propriedade no painel "Escopo" e selecione Adicionar propriedade caminho a ser observado para adicionar essa propriedade ao painel de observação.

Figura 7. Um exemplo de Adicionar caminho de propriedade ao monitoramento

"Mostrar carimbos de data/hora" movidas para as configurações

a caixa de seleção Mostrar carimbos de data/hora nas configurações do console; O app foi movido para as Configurações.

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   > 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.