Novidades do DevTools (Chrome 68)

Kayce Basques
Kayce Basques
X GitHub Falha

Novidades no DevTools no Chrome 68:

.

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.

O Console está exibindo o resultado da operação sort() antes de ela ser executada explicitamente.

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. O botão "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.

Dicas de argumentos no console.

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.

Depois de executar document.querySelector('p'), o Console poderá mostrar as propriedades e as funções disponíveis para esse elemento.

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.

O console agora sugere "aguardar" na interface de preenchimento automático.

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

A nova interface de relatórios no Lighthouse 3.0.

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:

Um exemplo do BigInt 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.

Exemplo de "Adicionar caminho de propriedade para 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 O botão "Configurações do console" 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   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.