Visão geral do console

A Consola é como uma linha de comandos avançada e inteligente no DevTools e é uma excelente ferramenta complementar para utilizar com outras ferramentas. A Consola fornece uma forma avançada de criar scripts, inspecionar a página Web atual e manipular a página Web atual com JavaScript.

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

• Detete problemas para saber por que motivo algo não está a funcionar no projeto atual. Veja Corrigir erros de JavaScript comunicados na Consola.
• Obtenha informações sobre o projeto Web no browser como mensagens de registo. Veja Filtrar mensagens da Consola.
• Informações de registo em scripts para fins de depuração. Veja Mensagens de registo na ferramenta Consola.
• Experimente as expressões JavaScript em direto num ambiente REPL . Veja Executar JavaScript na Consola.
• Interaja com o projeto Web no browser com JavaScript. Veja Interagir com o DOM com a Consola.

Pode abrir a ferramenta Consola na parte superior ou inferior das DevTools; é apresentado aqui na parte superior, na Barra de Atividade:

A Consola é apresentada aqui na parte inferior de DevTools (o painel Vista Rápida ), com a ferramenta Elementos aberta acima:

A forma mais rápida de abrir diretamente a Consola é premir Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

Relatórios de erros e a Consola

A Consola é o local predefinido onde são comunicados erros de Conectividade e JavaScript. Para obter mais informações, veja Corrigir erros de JavaScript comunicados na Consola.

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

Procurar na Web uma cadeia de mensagem de erro da Consola

Pesquise na Web as mensagens de erro da Consola diretamente a partir de DevTools. Na Consola, muitas mensagens de erro têm um botão Procurar esta mensagem na Web , apresentado como uma lupa:

Quando clica no botão Procurar esta mensagem na Web , é aberto um novo separador no browser e mostra os resultados da pesquisa para a mensagem de erro:

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

Quando abre o DevTools numa página Web, pode haver uma grande quantidade de informações na Consola. A quantidade de informações torna-se um problema quando precisa de identificar informações importantes. Para ver as informações importantes que precisam de ação, utilize a ferramenta Problemas em DevTools.

Os problemas estão a ser gradualmente movidos da Consola para a ferramenta Problemas . No entanto, ainda existem muitas informações na Consola, razão pela qual é boa ideia saber mais sobre as opções de registo e filtro automatizadas na Consola. Para obter mais informações, veja Filtrar mensagens da Consola.

DevTools com uma Consola cheia de mensagens:

Informações de registo a apresentar na Consola

O caso de utilização mais popular para a Consola é registar informações dos scripts com 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 registar informações a apresentar na Consola:

1. Abra a página Web de demonstração Exemplos de mensagens da consola: registo, informações, erro e aviso numa nova janela ou separador.

2. Para abrir a Consola, prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

   A Consola apresenta as mensagens resultantes causadas pelo código de demonstração:

   

3. Cole o código acima na Consola e, em seguida, prima Enter.

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

4. Abra um novo separador ou janela.

5. Para abrir a Consola, prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

6. Cole o código acima na Consola e, em seguida, prima Enter.

Estão disponíveis muitos métodos úteis quando trabalha com a Consola. Para obter mais informações, veja Mensagens de registo na ferramenta Consola.

Experimente o JavaScript em direto na Consola

A Consola não é apenas um local para registar informações. A Consola é um ambiente REPL . Quando escreve javaScript na Consola, o código é executado imediatamente. Poderá considerar útil testar algumas novas funcionalidades do JavaScript ou efetuar alguns cálculos rápidos. Além disso, obtém todas as funcionalidades esperadas de um ambiente de edição moderno, como a conclusão automática, o realce da sintaxe e o histórico.

Para tentar executar o JavaScript na Consola:

1. Abra a Consola.

2. Digite 2+2.

A Consola apresenta o resultado de 2+2 dinâmico à medida que o escreve, apresentando o resultado 4 na seguinte linha:

Esta funcionalidade de avaliação Ansiosa é útil para depurar e verificar se não está a cometer erros no seu código.

Para executar a expressão JavaScript na Consola e, opcionalmente, apresentar um resultado, prima Enter. Em seguida, pode escrever o código JavaScript seguinte para ser executado na Consola.

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

Por predefinição, executa código JavaScript numa única linha. Para executar uma linha, escreva o seu JavaScript e, em seguida, prima Enter. Para contornar a limitação de linha única, prima Shift+Enter em vez de Enter.

Semelhante a outras experiências de linha de comandos, para aceder aos comandos javaScript anteriores, prima Seta Para Cima. A funcionalidade de conclusão automática da Consola é uma excelente forma de saber mais sobre métodos desconhecidos.

Para tentar a conclusão automática:

1. Abra a Consola.
2. Digite doc.
3. Selecione document no menu pendente.
4. Prima a Tecla de Tabulação para selecionar document.
5. Digite .bo.
6. Prima a Tecla de Tabulação para selecionar document.body.
7. Escreva outro . para apresentar a lista completa de propriedades e métodos disponíveis no corpo da página Web atual.

Para obter mais informações sobre todas as formas de trabalhar com a Consola, consulte Consola como um ambiente JavaScript.

Conclusão automática de expressões JavaScript na Consola:

Interagir com a página Web atual no browser

A Consola tem acesso ao objeto Janela do browser. Pode escrever scripts que interagem com a página Web atual ao ler dados do DOM e atribuir dados a elementos DOM.

Leitura a partir da árvore DOM na Consola

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

1. Abra a Consola.

2. Cole o seguinte código na Consola e, em seguida, prima Enter:

   document.querySelector('h1').innerHTML
   

   Esta expressão seleciona o primeiro nível de cabeçalho 1 no DOM e, em seguida, seleciona o conteúdo HTML que está contido entre as <h1> etiquetas de início e de fim. A Consola apresenta o resultado da expressão, que é o texto do cabeçalho:

   

Leu a partir da representação DOM da página Web, introduzindo uma expressão JavaScript na Consola e apresentando o resultado na Consola.

Escrever na árvore do DOM e na página Web a partir da Consola

Também pode alterar a página Web composta, alterando o DOM (ou escrevendo no DOM), a partir da Consola.

Para alterar a página Web composta:

1. Abra a Consola.

2. Cole o seguinte código na Consola e, em seguida, prima Enter:

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

   A expressão JavaScript acima utiliza o = sinal para atribuir um valor ao item DOM selecionado. O valor avaliado da expressão é uma cadeia para um cabeçalho, neste exemplo. O valor da expressão (a cadeia de cabeçalho) é apresentado na Consola e na página Web composta:

   

   Alterou o cabeçalho de main da página Web para Rocking the Console (A balançar a Consola).

Utilizar o método utilitário da Consola $$ para

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

Por exemplo, para adicionar um limite verde à volta de todas as ligações na página Web atual:

1. Abra a Consola.

2. Cole o seguinte código na Consola e, em seguida, prima Enter:

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

   A $$(selector) função utilitária da consola é "Seletor de consultas tudo". Esta função do seletor de consulta DOM devolve 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> hiperligação e, em seguida, aplicamos uma caixa verde à volta dos mesmos:

   

Para obter mais informações, veja Console tool utility functions and selectors (Funções e seletores de utilitários da ferramenta de consola).

Consulte também

• Interaja com o DOM através da Consola.
• 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