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 adaptativo

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

Avaliação curiosa

Agora, quando você digita uma expressão no Console, ele 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 ter sido executada explicitamente.

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

Para ativar a avaliação rápida:

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

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

Dicas de argumentos

Conforme você digita as funções, o Console agora mostra os argumentos esperados pela função.

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 arg, como ?options, representa um arg opcional.
  • Uma elipse antes de um argumento, como ...items, representa uma distribuiçã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 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.querySeletor('p'), o console pode mostrar as propriedades e 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 IU 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 mais rapidamente 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 (Research & 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 inclui quatro novas auditorias:

  • Primeira exibição de conteúdo
  • O arquivo robots.txt não é válido
  • Usar formatos de vídeo para conteúdo animado
  • Evitar várias viagens de ida e volta caras para qualquer origem

Suporte do BigInt

O Chrome 68 oferece suporte a um novo primitivo numérico chamado BigInt. BigInt permite representar números inteiros com precisão arbitrária. Teste no console:

Um exemplo de BigInt no Console.

Figura 6. Um exemplo de BigInt no console

Adicionar caminho de propriedade a ser observado

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 a ser observado para adicionar essa propriedade ao painel "Assistir".

Exemplo de caminho de adição de propriedade a ser observado.

Figura 7. Exemplo de Adicionar o caminho da propriedade a ser observado

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

A caixa de seleção Mostrar carimbos de data/hora, que ficava antes em Configurações do console O botão "Configurações do console", mudou 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é-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59