Monitorar alterações no JavaScript usando Expressões Dinâmicas

As expressões dinâmicas são uma ótima maneira de monitorar o valor das expressões JavaScript que mudam muito ao longo do tempo. Em vez de gerar muitas mensagens distintas do Console que você precisa ler e percorrer, é possível fixar expressões JavaScript na parte superior da ferramenta Console .

Com as Expressões Dinâmicas, você vê o valor de suas expressões JavaScript na parte superior da ferramenta Console , sempre no mesmo lugar, e pode continuar usando os logs do Console para valores que não são alterados com tanta frequência.

As Expressões Dinâmicas são executadas exclusivamente no seu computador e você não precisa alterar nada em seu código para exibir seus valores.

Adicionar uma nova expressão dinâmica

Para adicionar uma expressão ao vivo:

1. Abra a página da Web de demonstração de expressão ao vivo em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

3. No DevTools, abra a ferramenta Console .

4. No Console, clique no ícone Criar expressão ao vivo () ao lado da caixa de texto Filtro .

   Uma caixa de texto é exibida:

   

5. Insira a expressão document.activeElement JavaScript na caixa de texto. Uma Expressão Dinâmica pode ser qualquer expressão JavaScript válida.

6. Para salvar a expressão, pressione Ctrl+Enter (Windows, Linux) ou Command+Enter (macOS). Ou clique fora da caixa de texto Expressão ao vivo .

   A expressão agora está ativa e exibe body como resultado:

   

7. Clique em diferentes partes da página da Web ou pressione Tab ou Shift+Tab para mover o foco pela página da Web.

   O document.activeElement valor da Expressão Dinâmica é alterado para refletir o elemento com foco no momento em tempo real:

   

Adicionar mais expressões dinâmicas

Você pode adicionar várias Expressões Dinâmicas à ferramenta Console . Cada Expressão Ativa é avaliada de forma independente e os resultados são exibidos na ordem em que você os adiciona.

Para adicionar uma segunda Expressão ao Vivo:

1. Na ferramenta Console , clique no ícone Criar expressão ao vivo () ao lado da caixa de texto Filtro .

   Uma nova caixa de texto aparece abaixo da primeira Expressão Ativa:

   

2. Insira uma nova expressão JavaScript na caixa de texto, por exemplo window.innerWidth , para exibir a largura da janela do navegador.

3. Repita as etapas para adicionar outra expressão dinâmica para window.innerHeight.

   A ferramenta Console agora exibe três Expressões Dinâmicas:

   

Remover Expressões Dinâmicas

Para se livrar de uma Expressão Ativa, clique no ícone Fechar () ao lado da expressão:

Substituir o registro do console por expressões dinâmicas

Você pode criar quantas Expressões ao Vivo desejar e persistir cada Expressão ao Vivo nas sessões do navegador e nas janelas. As expressões dinâmicas são uma maneira de reduzir o ruído no fluxo de trabalho de depuração.

Usar o registro do Console para exibir as coordenadas do mouse

Para monitorar o movimento do mouse na página da Web atual:

1. Abra a página da demonstração Registro da demonstração do movimento do mouse em uma nova janela ou guia.

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web de demonstração.

3. Mova o mouse sobre a página da demonstração renderizada.

   Muitas mensagens de log são exibidas no console:

   

A grande quantidade de informações torna o processo de depuração mais lento e dificulta a visualização das alterações que você está tentando monitorar. À medida que o Console exibe mais mensagens quando você move o mouse, os valores que você deseja ver rolam para fora da tela.

Usar Expressões Dinâmicas para exibir as coordenadas do mouse

Use Expressões Dinâmicas para monitorar o movimento do mouse na página da Web atual, sem depender de mensagens de log detalhadas.

Para usar Expressões Dinâmicas para evitar mensagens de log excessivas do console:

1. Abra a página da Web de demonstração Movimento do mouse sem registrar a demonstração em uma nova janela ou guia.

   Esta página de demonstração usa JavaScript para rastrear a posição atual do mouse e armazena as coordenadas nas x variáveis globais e y .

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web de demonstração.

3. Mova o mouse.

   Os valores das variáveis and y são atualizados, mas nenhuma mensagem de x log é exibida.

4. Na ferramenta Console , clique no ícone Criar expressão ao vivo () ao lado da caixa de texto Filtro e insira a expressão xJavaScript.

5. Repita a etapa acima para adicionar uma segunda expressão dinâmica para y.

6. Mova o mouse na página da Web renderizada.

   Agora no Console, os valores das Expressões Dinâmicas x e y são atualizados em tempo real:

   

Confira também

• demonstração de expressão ao vivo
• Demonstração de movimento do mouse
• Demonstração de movimento do mouse sem registro em log