Novidades do DevTools (Chrome 68)

Kayce Basques
Kayce Basques
X GitHub Falha

Novidades do Chrome DevTools 68:

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

Console do Assistive

O Chrome 68 vem com alguns novos recursos do Console relacionados à conclusão automática e à visualização.

Avaliação estrita

Ao digitar uma expressão no console, ele agora pode mostrar uma visualização do resultado dessa expressão abaixo do cursor.

O console está imprimindo o resultado da operação sort() antes que ela seja executada explicitamente.

Figura 1. O console está imprimindo o resultado da operação sort() antes que ela seja executada explicitamente.

Para ativar a avaliação estrita:

  1. Abra o Console.
  2. Abra as Configurações do console Botão "Console Settings".
  3. Marque a caixa de seleção Eager evaluation.

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

Dicas de argumentos

Ao digitar funções, o console agora mostra os argumentos esperados pela função.

Dicas de argumento no console.

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

Observações:

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

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

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

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

Figura 3. A captura de tela de cima representa o comportamento antigo, e a de baixo representa o novo comportamento que oferece suporte ao 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 "await" 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 principais mudanças. Confira o anúncio completo em Anúncio do Lighthouse 3.0.

Auditorias mais rápidas e confiáveis

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

Nova interface

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

A nova interface de relatórios do Lighthouse 3.0.

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

Novas auditorias

O Lighthouse 3.0 também vem com quatro novas auditorias:

  • First Contentful Paint
  • robots.txt não é válido
  • Usar formatos de vídeo para conteúdo animado
  • Evite viagens de ida e volta caras para qualquer origem

Suporte a BigInt

O Chrome 68 oferece suporte a uma nova primitiva numérica chamada BigInt. BigInt permite representar números inteiros com precisão arbitrária. Teste no console:

Exemplo de BigInt no console.

Figura 6. Exemplo de BigInt no console

Adicionar caminho de propriedades para observação

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 caminho de propriedade para observação para adicionar essa propriedade ao painel "Observação".

Exemplo de "Adicionar caminho de propriedades para observação".

Figura 7. Exemplo de Adicionar caminho de propriedades para observação

A opção "Mostrar carimbos de data/hora" foi movida para as configurações

A caixa de seleção Mostrar carimbos de data/hora, que antes estava em Configurações do console, Botão "Console Settings" foi movida para Configurações.

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.