Visão geral do console

O Console é como uma linha de comando inteligente e avançada no DevTools e é uma ótima ferramenta complementar para usar com outras ferramentas. O Console fornece uma maneira poderosa de criar scripts de funcionalidades, inspecionar a página da web atual e manipular a página da web atual usando JavaScript.

A ferramenta Console ajuda com várias tarefas, que são abordadas com mais detalhes nos seguintes artigos:

• Rastreie os problemas para descobrir por que algo não está funcionando no projeto atual. Consulte Corrigir erros de JavaScript relatados no Console.
• Obtenha informações sobre o projeto da web no navegador como mensagens de log. Consulte Filtrar mensagens do Console.
• Registrar informações em scripts para fins de depuração. Consulte Registrar mensagens na ferramenta Console.
• Experimente expressões JavaScript ao vivo em um ambiente REPL . Consulte Executar JavaScript no Console.
• Interaja com o projeto Web no navegador usando JavaScript. Consulte Interagir com o DOM usando o console.

Você pode abrir a ferramenta Console na parte superior ou inferior do DevTools; é mostrado aqui na parte superior, na Barra de Atividades:

O Console é mostrado aqui na parte inferior do DevTools (o painel Visualização Rápida ), com a ferramenta Elementos aberta acima dele:

A maneira mais rápida de abrir diretamente o Console é pressionar Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

Relatórios de erros e o Console

O Console é o local padrão onde erros de conectividade e JavaScript são relatados. Para obter mais informações, consulte Corrigindo erros do JavaScript relatados no Console.

O DevTools fornece informações detalhadas sobre o erro na Console:

Pesquisar na Web por uma cadeia de caracteres de mensagem de erro de Console

Pesquise na Web suas mensagens de erro do Console , diretamente de dentro do DevTools. No Console, muitas mensagens de erro têm um botão Pesquisar esta mensagem na Web , mostrado como uma lupa:

Quando você clica no botão Pesquisar esta mensagem na Web , uma nova guia é aberta no navegador e mostra os resultados da pesquisa para a mensagem de erro:

Inspecionar e filtrar informações na página da web atual

Quando você abre o DevTools em uma página da Web, pode haver uma quantidade enorme de informações no Console. A quantidade de informações se torna um problema quando você precisa identificar informações importantes. Para exibir as informações importantes que precisam de ação, use a ferramenta Issues no DevTools.

Os problemas estão sendo movidos gradualmente do Console para a ferramenta Problemas . No entanto, ainda há muitas informações no Console, por isso é uma boa ideia saber sobre as opções de log e filtro automatizados no Console. Para obter mais informações, consulte Filtrar mensagens do Console.

DevTools com um console cheio de mensagens:

Informações de log a serem exibidas no console

O caso de uso mais popular para o Console é registrar informações de seus scripts usando o console.log() método ou outros métodos semelhantes.

Código de exemplo

// prints the text to the console as  a log message
console.log('This is a log message');

// prints the text to the console as an informational message
console.info('This is some information'); 

// prints the text to the console as an error message
console.error('This is an error');

// prints the text to the console as a warning
console.warn('This is a warning');

// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());

// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());

// shows a list of technologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technologies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd();

Para registrar informações a serem exibidas no Console:

1. Abra a página da Web da demonstração Exemplos de mensagens do console: log, info, error e warn em uma nova janela ou guia.

2. Para abrir a Console, pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O Console exibe as mensagens resultantes causadas pelo código de demonstração:

   

3. Cole o código acima no Console e pressione Enter.

   Se você receber uma mensagem: Uncaught SyntaxError: Identifier 'technologies' has already been declared:

4. Abra uma nova guia ou janela.

5. Para abrir a Console, pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

6. Cole o código acima no Console e pressione Enter.

Muitos métodos úteis estão disponíveis quando você trabalha com o Console. Para obter mais informações, consulte Registrar mensagens na ferramenta Console.

Experimente seu JavaScript ao vivo no Console

O Console não é apenas um local para registrar informações. O Console é um ambiente REPL . Quando você escreve qualquer JavaScript no Console, o código é executado imediatamente. Você pode achar útil testar alguns novos recursos do JavaScript ou fazer alguns cálculos rápidos. Além disso, você obtém todos os recursos que espera de um ambiente de edição moderno, como preenchimento automático, realce de sintaxe e histórico.

Para tentar executar o JavaScript no Console:

1. Abra o console.

2. Digite 2+2.

O Console exibe o resultado de 2+2 ao vivo conforme você o digita, exibindo o resultado 4 na seguinte linha:

Esse recurso de avaliação rápida é útil para depurar e verificar se você não está cometendo erros em seu código.

Para executar a expressão JavaScript no Console e, opcionalmente, exibir um resultado, pressione Enter. Em seguida, você pode escrever o próximo código JavaScript a ser executado no Console.

Executando várias linhas de código JavaScript em sucessão:

Por padrão, você executa código JavaScript em uma única linha. Para executar uma linha, digite seu JavaScript e pressione Enter. Para contornar a limitação de linha única, pressione Shift+ Enter em vez de Enter.

Semelhante a outras experiências de linha de comando, para acessar seus comandos JavaScript anteriores, pressione Seta para Cima. O recurso de preenchimento automático do Console é uma ótima maneira de aprender sobre métodos desconhecidos.

Para experimentar o preenchimento automático:

1. Abra o console.
2. Digite doc.
3. Selecione document no menu suspenso.
4. Pressione Tab para selecionar document.
5. Digite .bo.
6. Pressione Tab para selecionar document.body.
7. Digite outro . para exibir a lista completa de propriedades e métodos disponíveis no corpo da página da Web atual.

Para obter mais informações sobre todas as maneiras de trabalhar com o Console, consulte Console como um ambiente JavaScript.

Preenchimento automático de expressões JavaScript no Console:

Interagir com a página da Web atual no navegador

O Console tem acesso ao objeto Window do navegador. Você pode escrever scripts que interagem com a página da Web atual, lendo dados do DOM e atribuindo dados a elementos DOM.

Leitura da árvore DOM no Console

Para usar uma expressão JavaScript para ler a página atual lendo um elemento selecionado da árvore DOM:

1. Abra o console.

2. Cole o seguinte código no Console e pressione Enter:

   document.querySelector('h1').innerHTML
   

   Essa expressão seleciona o primeiro nível de cabeçalho 1 do DOM e, em seguida, seleciona o conteúdo HTML contido entre as <h1> marcas de início e término. O Console exibe a saída da expressão, que é o texto do título:

   

Você leu a representação DOM da página da Web, inserindo uma expressão JavaScript no Console e exibindo a saída no Console.

Gravando na árvore DOM e na página da Web do Console

Você também pode alterar a página da Web renderizada, alterando o DOM (ou gravando no DOM), de dentro do Console.

Para alterar a página da Web renderizada:

1. Abra o console.

2. Cole o seguinte código no Console e pressione Enter:

   document.querySelector('h1').innerHTML = 'Rocking the Console';
   

   A expressão JavaScript acima usa o = sinal para atribuir um valor ao item DOM selecionado. O valor avaliado da expressão é uma cadeia de caracteres para um título, neste exemplo. O valor da expressão (a cadeia de caracteres de título) é mostrado no Console e na página da Web renderizada:

   

   Você alterou o título principal da página da Web para Rocking the Console.

Usando o método do utilitário $$ Console para

Os métodos do Utilitário de Console facilitam o acesso e a manipulação da página da Web atual.

Por exemplo, para adicionar uma borda verde em torno de todos os links na página da web atual:

1. Abra o console.

2. Cole o seguinte código no Console e pressione Enter:

   $$('a').forEach(a => a.style.border='1px solid lime');
   

   A $$(selector) função do utilitário do console é "Query selector all". Essa função seletora de consulta DOM retorna uma matriz de todos os elementos que correspondem ao seletor CSS especificado, como a função document.querySelectorAll()JavaScript . Neste exemplo, selecionamos todos os elementos do <a> hiperlink e, em seguida, aplicamos uma caixa verde ao redor deles:

   

Para obter mais informações, consulte Seletores e funções do utilitário da ferramenta de console.

Consulte também

• Interaja com o DOM usando o console.
• Referência de recursos do console
• Referência da API do objeto do console
• Seletores e funções do utilitário da ferramenta de console