Partilhar via


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 (o ícone ) junto à caixa de texto Filtro .

    É apresentada uma caixa de texto:

    A ferramenta Consola em DevTools, com a caixa de texto de expressão dinâmica abaixo da barra de ferramentas

  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:

    A ferramenta Consola, com uma linha de Expressão Dinâmica abaixo da barra de ferramentas, a mostrar a expressão JavaScript document.activeElement e o respetivo resultado atual: corpo

  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:

    A ferramenta Consola, com uma linha de Expressão Dinâmica abaixo da barra de ferramentas, a mostrar a expressão JavaScript document.activeElement e o resultado atual: input#password

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 (o ícone ) junto à caixa de texto Filtro .

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

    A ferramenta Consola no DevTools, com uma expressão dinâmica e uma nova caixa de texto de expressão dinâmica abaixo da mesma

  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:

    A ferramenta Consola no DevTools, com três expressões dinâmicas: document.activeElement, window.innerWidth e window.innerHeight

Remover Expressões Dinâmicas

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

A ferramenta Consola, com três expressões dinâmicas, cada uma com um ícone de fecho junto às mesmas

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 ferramenta Consola apresenta um grande número de mensagens sobre a posição do rato

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 (o ícone ) 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:

    A ferramenta Consola, com as expressões dinâmicas x e y, a mostrar as coordenadas do rato na página Web composta

Confira também