Este tutorial interativo mostra como executar o 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 aprender a pausar o código JavaScript e percorrê-lo uma linha por vez.
Figura 1. O Console.
Visão geral
O Console é um REPL (em inglês), 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 elaborado para que você possa abrir a demonstração e testar todos os fluxos de trabalho por conta própria. Ao acompanhar fisicamente, é mais provável que você se lembre dos fluxos de trabalho mais tarde.
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 mudar a aparência ou a execução da página.
Observe o texto no botão abaixo.
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 avaliado, você verá
"Hello, Console!"
. Lembre-se das 4 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 dedocument.getElementById('hello').textContent = 'Hello, Console!'
.
Executar JavaScript arbitrário não relacionado à página
Às vezes, você quer apenas um playground de código em que possa testar parte do código ou novos recursos do JavaScript que ainda não conhece. O Console é o lugar perfeito para esse tipo de experimento.
- Digite
5 + 15
no console. O resultado20
aparecerá abaixo da expressão (a menos que sua expressão demore muito tempo para ser avaliada). - Pressione
Enter
para avaliar a expressão. O console exibe o resultado da expressão abaixo do código. A Figura 4 abaixo mostra como o console ficará depois de avaliar essa expressão. Digite o código abaixo 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 estiver familiarizado com a sintaxe
b=20
.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 como45
porque, quando a funçãoadd
é chamada sem um segundo argumento,b
tem20
como padrão.
Não será possível executar nenhum código nesta sessão de console até que a função retorne. Se demorar muito, você poderá usar o Gerenciador de tarefas para cancelar a computação demorada. No entanto, isso também causará a falha da página atual e a perda de todos os dados inseridos.
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 o app estiver pausado, você poderá usar
o Console para conferir e mudar o window
ou o DOM
da página no momento. Isso cria
um fluxo de trabalho de depuração eficiente. Consulte Introdução à depuração do JavaScript para ver um tutorial
interativo.
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$()
. Essa sintaxe é inspirada no jQuery, mas não é realmente do jQuery. É apenas um alias dedocument.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.