Executar o JavaScript no console

Kayce Basques

Este tutorial interativo mostra como executar JavaScript no console do Chrome DevTools. Consulte Primeiros passos com as mensagens do Logging para saber como registrar mensagens no console. Consulte Primeiros passos com a depuração do JavaScript para saber como pausar o código JavaScript e percorrê-lo uma linha por vez.

Figura 1. O Console.

Visão geral

O console é um REPL, que significa "ler, avaliar, imprimir e repetir". Ele lê o JavaScript digitado, avalia o código, exibe o resultado da expressão e retorna à primeira etapa.

Configurar o DevTools

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

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 alterar 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 a execução 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. A aparência do Console depois de avaliar a expressão acima.

   Abaixo do código que você avaliou, você verá "Hello, Console!". Lembre-se das quatro etapas do REPL: ler, avaliar, imprimir e fazer loop. Depois de avaliar o 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 esteja relacionado à página

Às vezes, você só quer um playground de código para testar alguns códigos ou experimentar novos recursos do JavaScript que você não conhece. O console é o lugar perfeito para esses tipos de experimentos.

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 mostra o resultado da expressão abaixo do código. A Figura 4 abaixo mostra como o console vai ficar depois de avaliar essa expressão.

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

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

   Consulte definir valores padrão para argumentos de função se você não conhecer a sintaxe b=20.

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

   add(25);
   

   

   Figura 4. Como o console fica após avaliar as expressões acima.

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

Não será possível executar nenhum código nesta sessão do console até que a função retorne. Se isso demorar muito, use o Gerenciador de tarefas para cancelar a computação demorada. No entanto, isso também fará 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 estiver pausado, você pode usar o Console para conferir e mudar a window ou a DOM da página naquele momento. Isso cria um fluxo de trabalho de depuração poderoso. Consulte Primeiros passos com a depuração do JavaScript para conferir 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 no console.

Além disso, o Console também tem um conjunto de funções práticas que facilitam a interação com as páginas. Exemplo:

• Em vez de digitar document.querySelector() para selecionar um elemento, você pode digitar $(). Essa sintaxe é inspirada no jQuery, mas não é realmente do jQuery. É apenas um alias de 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 conferir todas as funções de conveniência.