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 agora pode mostrar uma visualização do resultado dessa expressão 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 ele ser explicitamente executado.

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

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

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

Dicas de argumentos

Enquanto 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 estão disponíveis 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 na parte 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 "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 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 as auditorias com mais rapidez e com menos variação entre execuções.

Nova interface

O Lighthouse 3.0 também traz uma nova interface graças à 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
  • 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 representar 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 "Scope" e selecione Add propriedade path to watch para adicionar essa propriedade ao painel "Watch".

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

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

A opção "Mostrar marcações de tempo" foi movida para as configurações

A caixa de seleção Mostrar carimbos de data/hora em Configurações do console O botão "Configurações do console" foi movida para 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59