Novidades do DevTools (Chrome 70)

Kayce Basques
Kayce Basques
X GitHub Falha

Que bom que você voltou! Já se passaram cerca de 12 semanas desde nossa última atualização, que foi para o Chrome 68. Ignoramos o Chrome 69 porque não tínhamos novos recursos ou mudanças na interface suficientes para justificar uma postagem.

Os novos recursos e as principais mudanças do DevTools no Chrome 70 incluem:

Continue lendo ou assista à versão em vídeo deste documento:

Expressões ao vivo no console

Fixe uma expressão dinâmica na parte superior do console quando quiser monitorar o valor dela em tempo real.

  1. Clique em Create Live Expression Crie expressão ao vivo. A interface do Live Expression será aberta.

    A interface do Live Expression

    Figura 1. A interface do Live Expression

  2. Digite a expressão que você quer monitorar.

    Digitar "Date.now()" na interface de expressão ao vivo

    Figura 2. Digitar Date.now() na interface do recurso Expressão ao vivo

  3. Clique fora da interface do Live Expression para salvar sua expressão.

    Uma Live Expression salva.

    Figura 3. Uma expressão ao vivo salva

Os valores do Live Expression são atualizados a cada 250 milissegundos.

Destacar os nós do DOM durante a avaliação antecipada

Digite uma expressão que seja avaliada como um nó DOM no console e Eager Evaluation vai destacar esse nó na janela de visualização.

Depois de digitar document.activeElement no Console, um nó é destacado na janela de visualização.

Figura 4. Como a expressão atual é avaliada como um nó, esse nó é destacado na janela de visualização.

Estas são algumas expressões que podem ser úteis:

  • document.activeElement para destacar o nó que está em foco no momento.
  • document.querySelector(s) para destacar um nó arbitrário, em que s é um seletor de CSS. Isso é equivalente a passar o cursor sobre um nó na Árvore DOM.
  • $0 para destacar qualquer nó que esteja selecionado na árvore do DOM.
  • $0.parentElement para destacar o pai do nó selecionado no momento.

Otimizações do painel de desempenho

Antes, ao criar o perfil de uma página grande, o Painel de desempenho levava dezenas de segundos para processar e visualizar os dados. Clicar em um evento para saber mais sobre ele na guia "Resumo" também levava vários segundos para carregar. O processamento e a visualização são mais rápidos no Chrome 70.

Processar e carregar dados de desempenho.

Figura 5. Como processar e carregar dados de desempenho

Depuração mais confiável

O Chrome 70 corrige alguns bugs que faziam com que os pontos de interrupção desaparecessem ou não fossem acionados.

Ela também corrige bugs relacionados aos mapas de origem. Alguns usuários do TypeScript instrui o DevTools a ignorar um determinado arquivo TypeScript enquanto percorre o código e, em vez disso, o DevTools ignora o arquivo JavaScript inteiro empacotado. Essas correções também abordam um problema que fazia com que o painel Sources geralmente fosse executado lentamente.

Ativar a limitação de rede no menu de comando

Agora você pode definir a limitação de rede para 3G rápido ou 3G lento no menu de comando.

Comandos de limitação de rede no menu de comando.

Figura 6. Comandos de limitação de rede no menu de comando

Preencher automaticamente pontos de interrupção condicionais

Use a interface de preenchimento automático para digitar as expressões de ponto de interrupção condicional mais rapidamente.

A interface de preenchimento automático

Figura 7. A interface de preenchimento automático

Você sabia? A interface de preenchimento automático é possível graças ao CodeMirror, que também ativa o Console.

Interromper nos eventos do AudioContext

Use o painel Event Listener Breakpoints para pausar na primeira linha de um manipulador de eventos do ciclo de vida AudioContext.

O AudioContext faz parte da API Web Audio, que pode ser usada para processar e sintetizar áudio.

Eventos do AudioContext no painel Pontos de interrupção do listener de eventos.

Figura 8. Eventos do AudioContext no painel "Pontos de interrupção do listener de eventos"

Depurar aplicativos Node.js com ndb

O ndb é um novo depurador para aplicativos Node.js. Além dos recursos de depuração comuns do DevTools, o ndb também oferece:

  • Como detectar e anexar a processos filhos.
  • É obrigatório posicionar pontos de interrupção antes dos módulos.
  • Edição de arquivos na interface do DevTools.
  • Ignorando todos os scripts fora do diretório de trabalho atual por padrão.

A interface ndb.

Figura 9. A interface ndb

Confira o README do ndb para saber mais.

Dica bônus: meça as interações reais dos usuários com a API User Timing

Quer avaliar quanto tempo usuários reais levam para concluir jornadas críticas nas suas páginas? instrumente seu código com a API User Timing.

Por exemplo, suponha que você queira avaliar quanto tempo um usuário passa na sua página inicial antes de clicar no botão de call-to-action (CTA). Primeiro, marque o início da jornada em um manipulador de eventos associado a um evento de carregamento de página, como DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Depois, marque o fim da jornada e calcule a duração dela quando o botão for clicado:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Você também pode extrair suas medições, facilitando o envio delas ao seu serviço de análise para coletar dados anônimos e agregados:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

O DevTools marca automaticamente as medições de velocidade do usuário na seção Velocidade do usuário dos registros de desempenho.

A seção "Velocidade do usuário".

Figura 10. A seção "Tempo do usuário"

Isso também é útil ao depurar ou otimizar o código. Por exemplo, se você quiser otimizar uma certa fase do ciclo de vida, chame window.performance.mark() no início e no fim da função de ciclo de vida. O React faz isso no modo de desenvolvimento.

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