Monitorizar alterações no JavaScript com Expressões Dinâmicas

As Expressões Dinâmicas são uma excelente forma de monitorizar o valor das expressões JavaScript que mudam muito ao longo do tempo. Em vez de gerar muitas mensagens distintas da Consola que tem de ler e percorrer, pode afixar expressões JavaScript na parte superior da ferramenta Consola .

Com as Expressões Dinâmicas, pode ver o valor das expressões JavaScript na parte superior da ferramenta Consola , sempre no mesmo local, e pode continuar a utilizar os registos da Consola para valores que não são alterados com frequência.

As Expressões Dinâmicas são executadas exclusivamente no seu computador e não precisa de alterar nada no código para apresentar os respetivos valores.

Adicionar uma nova expressão dinâmica

Para adicionar uma expressão dinâmica:

1. Abra a página Web de demonstração de expressão dinâmica numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web.

3. Em DevTools, abra a ferramenta Consola .

4. Na Consola, clique no ícone Criar expressão dinâmica () junto à caixa de texto Filtro .

   É apresentada uma caixa de texto:

   

5. Introduza 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 guardar a expressão, prima Ctrl+Enter (Windows, Linux) ou Comando+Enter (macOS). Em alternativa, clique fora da caixa de texto Expressão Dinâmica .

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

   

7. Clique em diferentes partes da página Web ou prima a Tecla de Tabulação ou Shift+Tecla de Tabulação para mover o foco na página Web.

   O document.activeElement valor da Expressão Dinâmica muda para refletir o elemento atualmente focado em tempo real:

   

Adicionar mais expressões dinâmicas

Pode adicionar várias Expressões Dinâmicas à ferramenta Consola . Cada Expressão Dinâmica é avaliada de forma independente e os resultados são apresentados pela ordem em que os adiciona.

Para adicionar uma segunda Expressão Dinâmica:

1. Na ferramenta Consola , clique no ícone Criar expressão dinâmica () junto à caixa de texto Filtro .

   É apresentada uma nova caixa de texto abaixo da primeira Expressão Dinâmica:

   

2. Introduza uma nova expressão JavaScript na caixa de texto, por exemplo window.innerWidth , para apresentar a largura da janela do browser.

3. Repita os passos para adicionar outra Expressão Dinâmica para window.innerHeight.

   A ferramenta Consola apresenta agora três Expressões Dinâmicas:

   

Remover Expressões Dinâmicas

Para eliminar uma Expressão Dinâmica, clique no ícone Fechar () junto à expressão:

Substituir o registo da Consola por Expressões Dinâmicas

Pode criar o número de Expressões Dinâmicas que quiser e manter cada Expressão Dinâmica entre sessões e janelas do browser. As Expressões Dinâmicas são uma forma de reduzir o ruído no fluxo de trabalho de depuração.

Utilizar o registo da Consola para apresentar coordenadas do rato

Para monitorizar o movimento do rato na página Web atual:

1. Abra a demonstração da página Web de demonstração Movimento do Rato de Registo numa nova janela ou separador.

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web de demonstração.

3. Mova o rato sobre a página Web de demonstração composta.

   Muitas mensagens de registo são apresentadas na Consola:

   

A grande quantidade de informações atrasa o processo de depuração e dificulta a visualização das alterações que está a tentar monitorizar. À medida que a Consola apresenta mais mensagens ao mover o rato, os valores que pretende ver desloquem-se para fora do ecrã.

Utilizar Expressões Dinâmicas para apresentar coordenadas do rato

Utilize Expressões Dinâmicas para monitorizar o movimento do rato na página Web atual, sem depender de mensagens de registo verbosas.

Para utilizar Expressões Dinâmicas para evitar mensagens de registo excessivas da Consola:

1. Abra a página Web de demonstração Movimento do rato sem registar a demonstração numa nova janela ou separador.

   Esta página Web de demonstração utiliza JavaScript para controlar a posição atual do rato e armazena as coordenadas nas variáveis globais e .xy

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web de demonstração.

3. Mova o rato.

   Os valores das x variáveis e y são atualizados, mas não são apresentadas mensagens de registo.

4. Na ferramenta Consola , clique no ícone Criar expressão dinâmica () junto à caixa de texto Filtro e, em seguida, introduza a expressão xJavaScript .

5. Repita o passo acima para adicionar uma segunda Expressão Dinâmica para y.

6. Mova o rato na página Web composta.

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

   

Confira também

• demonstração de expressão dinâmica
• Demonstração do Movimento do Rato de Registo
• Movimento do rato sem demonstração de registo