Executar o JavaScript no console

Kayce Basques

Este tutorial interativo mostra como executar o JavaScript no console do Chrome DevTools. Consulte Saiba como registrar mensagens no console. Consulte Primeiros passos Com o Debugging JavaScript, você aprende a pausar o código JavaScript e a percorrer uma linha por vez.

Figura 1. O Console.

Visão geral

O Console é um REPL (link em inglês), que significa "Ler", "Avaliar", "Imprimir" e "Repetir". Ele lê que você digita nele, avalia seu código, imprime o resultado da expression e volta para a primeira etapa.

Configurar o DevTools

Este tutorial foi elaborado para que você possa abrir a demonstração e testar todos os fluxos de trabalho por conta própria. Quando 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, bem aqui 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 para alterar a aparência ou o funcionamento da página.

1. Observe o texto no botão abaixo.

   Olá, mundo!

2. Digite document.getElementById('hello').textContent = 'Hello, Console!' no Console e 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 avaliado, você verá "Hello, Console!". Lembre-se das quatro etapas do REPL: ler, avaliar, imprimir, repetir. Depois de avaliar seu código, um REPL imprime o resultado da expressão. Portanto, "Hello, Console!" precisa ser o resultado da avaliação document.getElementById('hello').textContent = 'Hello, Console!'.

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

Às vezes, você quer apenas um playground de código onde possa testar um código ou um novo JavaScript recursos que você não conhece. O Console é o lugar perfeito para esse tipo de experimento.

1. Digite 5 + 15 no console. O resultado 20 aparecerá abaixo da expressão (a menos que sua expressão demore muito tempo para ser avaliada).
2. Pressione Enter para avaliar a expressão. O console imprime o resultado da expressão abaixo do código. A Figura 4 abaixo mostra como seu console precisa vai cuidar da avaliação dessa expressão.

3. Digite o código abaixo no Console. Tente digitá-lo, caractere por caractere, ao do que 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 estiver familiarizado com o b=20. .

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

   add(25);
   

   

   Figura 4. A aparência do console depois de avaliar as expressões acima.

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

Não será possível executar nenhum código nesta sessão de console até que a função retorne. Se 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 que você inseriu serão perdidos.

Próximas etapas

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

O DevTools permite pausar um script no meio da execução. Enquanto estiver pausado, você poderá usar o Console para visualizar e mudar o window ou o DOM da página naquele momento. Isso torna para um fluxo de trabalho de depuração eficiente. Consulte Primeiros passos com a depuração do JavaScript para um tutorial .

O Console também é compatível com 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 das mensagens do 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 $(). Isso é inspirada no jQuery, mas não no jQuery. É apenas um alias 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 Utilitários para conhecer todas as funções de conveniência.