Esta página explica como o console do Chrome DevTools facilita o desenvolvimento de páginas da Web. O console tem dois usos principais: visualização de mensagens registradas e execução de JavaScript.
Como ver mensagens registradas
Os desenvolvedores da Web geralmente registram mensagens no console para garantir que o JavaScript esteja funcionando conforme
o esperado. Para registrar uma mensagem, insira uma expressão como console.log('Hello, Console!') no
JavaScript. Quando o navegador executa seu JavaScript e vê uma expressão como essa, ele sabe
que precisa registrar a mensagem no console. Por exemplo, suponha que você esteja escrevendo o HTML e JavaScript de uma página:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
A Figura 1 mostra a aparência do console depois de carregar a página e aguardar três segundos. Tente descobrir quais linhas de código fizeram o navegador registrar as mensagens.
Figura 1. O painel do console.
Os desenvolvedores da Web registram mensagens por dois motivos gerais:
- Garantir que o código esteja sendo executado na ordem correta.
- Inspecionar os valores das variáveis em um determinado momento.
Consulte Noções básicas sobre o registro de mensagens para ter experiência prática com esse recurso. Consulte a Referência da API Console para navegar pela lista completa de métodos console. A principal diferença entre os
métodos é como eles exibem os dados que você está registrando.
Executar JavaScript
O console também é um REPL (em inglês). É possível executar o JavaScript no Console para interagir com a página que você está inspecionando. Por exemplo, a Figura 2 mostra o Console ao lado da página inicial do DevTools, e a Figura 3 mostra essa mesma página depois de usar o Console para mudar o título da página.
Figura 2. O painel do Console ao lado da página inicial do DevTools.
Figura 3. Usar o Console para alterar o título da página.
É possível modificar a página pelo console porque ele tem acesso total ao
window da página. O DevTools tem algumas funções de conveniência que facilitam a inspeção de uma página. Por exemplo, suponha que seu JavaScript contenha uma função chamada hideModal. A execução de
debug(hideModal) pausa o código na primeira linha de hideModal na próxima vez que ele for chamado.
Consulte a Referência da API Console Gerenciamento para ver a lista completa de funções utilitárias.
Quando você executa o JavaScript, não é necessário interagir com a página. Você pode usar o console para testar um novo código não relacionado à página. Por exemplo, suponha que você tenha acabado de conhecer o método integrado
de matriz do JavaScript map() e queira fazer experimentos com ele. O Console é um bom lugar
para testar a função.
Consulte Começar a usar o JavaScript para ter experiência prática com a execução do JavaScript no Console.