Visão geral do console

Artigo
07/12/2023

O Console é como uma linha de comando inteligente e rica dentro do DevTools e é uma ótima ferramenta complementar para usar com outras ferramentas. O Console fornece uma maneira poderosa de criar scripts, 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:

Localize os problemas para descobrir por que algo não está funcionando no projeto atual. Consulte Corrigir erros javaScript relatados no Console.
Obtenha informações sobre o projeto Web no navegador como mensagens de log. Consulte Filtrar mensagens do Console.
Registrar informações em scripts para fins de depuração. Consulte Mensagens de log 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:

A ferramenta Console é aberta no painel superior

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

O Console no painel inferior com a ferramenta Elementos aberto 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 erro e o Console

O Console é o local padrão em que erros de conectividade e JavaScript são relatados. Para obter mais informações, consulte Corrigir erros javaScript relatados no Console.

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

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

Pesquise na Web uma cadeia de caracteres de mensagem de erro do Console

Pesquise na Web suas mensagens de erro do Console , diretamente de dentro do DevTools. No Console, muitas mensagens de erro têm uma pesquisa desta mensagem no botão Web , mostrada como uma lupa:

Quando você clica no botão Pesquisar essa 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 esmagadora 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 Problemas em DevTools.

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

DevTools com um Console cheio de mensagens:

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 techologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technolgies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd('Technolgies');

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

Abra os exemplos de mensagens de console da página da Web de demonstração : log, informações, erro e aviso em uma nova janela ou guia.
Para abrir o 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:
Cole o código acima no Console e pressione Enter.

Se você receber uma mensagem: : Uncaught SyntaxError: Identifier 'technologies' has already been declared
Abra uma nova guia ou janela.
Para abrir o Console, pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).
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, confira Registrar mensagens na ferramenta Console.

Experimente seu JavaScript ao vivo no Console

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

Para tentar executar o JavaScript no Console:

Abra o Console.
Digite 2+2.

O Console exibe o resultado do 2+2 live ao digitá-lo, exibindo o resultado 4 na seguinte linha:

O Console exibe o resultado de 2+2 ao vivo ao digitá-lo

Esse recurso de avaliação ansiosa é ú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:

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

Por padrão, você executa o 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 autocompilação do Console é uma ótima maneira de aprender sobre métodos desconhecidos.

Para tentar a autocompleção:

Abra o Console.
Digite doc.
Selecione document no menu suspenso.
Pressione Tab para selecionar document.
Digite .bo.
Pressione Tab para selecionar document.body.
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 Console, consulte Console como um ambiente JavaScript.

Autocompleção de expressões JavaScript no Console:

Acompanhamento automático do console de expressões JavaScript

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 na página atual lendo um elemento selecionado na árvore DOM:

Abra o Console.
Cole o seguinte código no Console e pressione Enter:
```
document.querySelector('h1').innerHTML
```
Essa expressão seleciona o primeiro nível de título 1 no DOM e, em seguida, seleciona o conteúdo HTML contido entre as <h1> marcas inicial e final. O Console exibe a saída da expressão, que é o texto do título:

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

Gravar 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 para o DOM), de dentro do Console.

Para alterar a página da Web renderizada:

Abra o Console.
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 main da página da Web para Rocking the Console.

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

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

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

Abra o Console.
Cole o seguinte código no Console e pressione Enter:
```
$$('a').forEach(a => a.style.border='1px solid lime');
```
A $$(selector) função de utilitário do console é "Todos os seletores de consulta". Essa função seletor 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 de <a> hiperlink e, em seguida, aplicamos uma caixa verde ao seu redor:

Para obter mais informações, consulte Funções e seletores do utilitário de ferramenta de console.

Compartilhar via