Novidades do DevTools (Chrome 68)

Kayce Basques
Kayce Basques
X GitHub

Novidades do DevTools no Chrome 68:

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

Console assistivo

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

Avaliação estrita

Agora, quando você digita uma expressão no console, ele pode mostrar uma prévia 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 de ela ser executada explicitamente.

Para ativar a avaliação estrita:

  1. Abra o console.
  2. Abra Configurações do console O botão "Configurações do console".
  3. Marque a caixa de seleção Avaliação imediata.

O DevTools não faz avaliação imediata se a expressão causar efeitos colaterais.

Dicas de argumentos

À medida que você digita as funções, o console mostra os argumentos esperados.

Dicas de argumentos 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.
  • Reticências antes de um argumento, como ...items, representam uma propagação.
  • Algumas funções, como CSS.supports(), aceitam várias assinaturas de argumentos.

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

Depois de ativar a avaliação imediata, o console 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 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 do ES2017, como await, agora estão disponíveis na interface de usuário 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 é lançado com o Lighthouse 3.0. As próximas seções são um resumo de algumas das maiores mudanças. Confira Anúncio do Lighthouse 3.0 para saber mais.

Auditorias mais rápidas e confiáveis

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

Nova interface

O Lighthouse 3.0 também traz uma nova interface do usuário, graças a uma colaboração entre as equipes do Lighthouse e do Chrome UX (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 vem com quatro novas auditorias:

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

Suporte a BigInt

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

Um exemplo de BigInt no console.

Figura 6. Exemplo de BigInt no console

Adicionar caminho de propriedades para observação

Enquanto estiver em pausa 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 "Observar".

Um 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 ficava em Configurações do console O botão "Configurações do console", foi movida para Configurações.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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