Executar o JavaScript no console

Kayce Basques

Neste tutorial interativo, mostramos como executar JavaScript no console do Chrome DevTools. Consulte Começar a usar mensagens de registro para saber como registrar mensagens no console. Consulte Introdução à depuração de JavaScript para saber como pausar e percorrer o código JavaScript uma linha por vez.

Figura 1. O Console.

Visão geral

O Console é um REPL, que significa Read, Evaluate, Print e Loop. Ele lê o JavaScript que você digita, avalia seu código, imprime o resultado da sua expressão e volta à primeira etapa.

Configurar o DevTools

Este tutorial foi criado para que você possa abrir a demonstração e testar todos os fluxos de trabalho. Quando você acompanha fisicamente, é mais provável que se lembre dos fluxos de trabalho depois.

1. Pressione Command+Option+J (Mac) ou Control+Shift+J (Windows, Linux, ChromeOS) para abrir o Console, aqui mesmo nesta página.

   

   Figura 2. Este tutorial à esquerda e o DevTools à direita.

Ver e mudar o JavaScript ou o DOM da página

Ao criar ou depurar uma página, muitas vezes é útil executar instruções no Console para mudar a aparência ou o funcionamento da página.

1. Observe o texto no botão abaixo.

   Hello, World!

2. Digite document.getElementById('hello').textContent = 'Hello, Console!' no Console e pressione Enter para avaliar a expressão. Observe como o texto dentro do botão muda.

   

   Figura 3. Como o console aparece depois de avaliar a expressão acima.

   Abaixo do código avaliado, você vai encontrar "Hello, Console!". Lembre-se das quatro etapas do REPL: ler, avaliar, imprimir e fazer loop. Depois de avaliar seu código, um REPL imprime o resultado da expressão. Portanto, "Hello, Console!" precisa ser o resultado da avaliação de document.getElementById('hello').textContent = 'Hello, Console!'.

Executar JavaScript arbitrário que não está relacionado à página

Às vezes, você só quer um ambiente de programação para testar um código ou experimentar novos recursos do JavaScript com que não está familiarizado. O console é o lugar perfeito para esse tipo de experimento.

1. Digite 5 + 15 no console. O resultado 20 vai aparecer abaixo da expressão, a menos que ela demore muito para ser avaliada.
2. Pressione Enter para avaliar a expressão. O console vai imprimir o resultado da expressão abaixo do código. A Figura 4 abaixo mostra como o console deve aparecer depois de avaliar essa expressão.

3. Digite o seguinte código no Console. Tente digitar, caractere por caractere, em vez de copiar e colar.

   function add(a, b=20) {
     return a + b;
   }
   

4. Agora, chame a função que você acabou de definir.

   add(25);
   

   

   Figura 4. Como o console aparece depois de avaliar as expressões acima.

   add(25) é avaliado como 45 porque, quando a função add é chamada sem um segundo argumento, b usa 20 como padrão.

Não será possível executar nenhum código nesta sessão do console até que a função seja retornada. Se isso demorar muito, use o Gerenciador de tarefas para cancelar o cálculo demorado. No entanto, isso também vai fazer com que a página atual falhe e todos os dados inseridos sejam perdidos.

Próximas etapas

Consulte Executar JavaScript para conhecer mais recursos relacionados à execução de JavaScript no console.

O DevTools permite pausar um script no meio da execução. Enquanto a página está pausada, você pode usar o Console para ver e mudar o window ou DOM da página naquele momento. Isso cria um fluxo de trabalho de depuração eficiente. Consulte Introdução à depuração de JavaScript para um tutorial interativo.

O Console também oferece suporte a um conjunto de especificadores de formato. Consulte Formatar e estilizar mensagens no console para conhecer todos os métodos de formatação e estilização de mensagens do console.

Além disso, o Console também tem um conjunto de funções de conveniência que facilitam a interação com uma página. Exemplo:

• Em vez de digitar document.querySelector() para selecionar um elemento, digite $(). Essa sintaxe é inspirada no jQuery, mas não é jQuery. É apenas um alias para document.querySelector().
• debug(function) define um ponto de interrupção na primeira linha dessa função.
• keys(object) retorna uma matriz que contém as chaves do objeto especificado.

Consulte a referência da API Console Utilities para conhecer todas as funções convenientes.