O que é o console.log?

414

Para que serve console.log?

Por favor, explique como usá-lo em JavaScript, com um exemplo de código.

Mihir
fonte

Respostas:

454

Não é um recurso do jQuery, mas um recurso para fins de depuração. Você pode, por exemplo, registrar algo no console quando algo acontecer. Por exemplo:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Você então veria #someButton was clickedna guia "Console" do Firebug (ou no console de outra ferramenta - por exemplo, o Web Inspector do Chrome) quando clicar no botão.

Por alguns motivos, o objeto do console pode estar indisponível. Em seguida, você pode verificar se é - isso é útil, pois você não precisa remover o código de depuração ao implantar na produção:

if (window.console && window.console.log) {
  // console is available
}
Jan Hančič
fonte
17
As ferramentas de desenvolvedor do Google Chrome também possuem um console integrado.
RobertPitt
8
"Isso é útil porque você não precisa remover seu código de depuração ao implantar na produção" <- E se um usuário final abrir o Firebug?
AbdullahC
6
também é útil para não deixar o IE lançar um erro para o console não estar definido
Alan Whitelaw
4
Imho, melhor do que verificar todas as vezes que o console.log está disponível, é melhor ter algo parecido com isto: if (typeof (console) == 'undefined') {console = {'log': function () {return}}} Nesse caso, você pode escrever console.log sempre que precisar, sem verificar a presença dele!
Enrico Carlesso
12
if (console.log)(ou mesmo if (console && console.log)) ainda gerará um erro se o console não estiver disponível. Você deve usar window.console(como windowé garantido que existe) e verificar apenas um nível de profundidade por vez.
Tgr
226

Lugares que você pode ver no console! Apenas para tê-los todos em uma resposta.

Raposa de fogo

http://getfirebug.com/

(agora você também pode usar as ferramentas de desenvolvedor incorporadas do Firefox Ctrl + Shift + J (Ferramentas> Desenvolvedor Web> Console de erros), mas o Firebug é muito melhor; use o Firebug)

Safari e Chrome

Basicamente o mesmo.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

Não esqueça que você pode usar os modos de compatibilidade para depurar o IE7 e IE8 no IE9 ou IE10

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Se você precisar acessar o console no IE6 para IE7, use o bookmarklet Firebug Lite

http://getfirebug.com/firebuglite/ procure por bookmarklet estável

http://en.wikipedia.org/wiki/Bookmarklet

Ópera

http://www.opera.com/dragonfly/

iOS

Funciona para todos os iPhones, iPod touch e iPads.

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Agora, com o iOS 6, você pode ver o console pelo Safari no OS X se conectar o dispositivo. Ou você pode fazer isso com o emulador, basta abrir uma janela do navegador Safari e vá para a guia "Desenvolver". Lá você encontrará opções para que o inspetor Safari se comunique com seu dispositivo.

Windows Phone, Android

Ambos não possuem console embutido nem capacidade de bookmarklet. Portanto, usamos http://jsconsole.com/ type: listen e ele fornecerá uma tag de script para colocar no seu HTML. A partir de então, você poderá visualizar seu console no site jsconsole.

iOS e Android

Você também pode usar http://html.adobe.com/edge/inspect/ para acessar as ferramentas do inspetor da web e o console em qualquer dispositivo usando o conveniente plug-in do navegador.


Problemas mais antigos do navegador

Por fim, as versões mais antigas do IE falham se você usar o console.log no seu código e não tiver as ferramentas de desenvolvedor abertas ao mesmo tempo. Felizmente, é uma solução fácil. Use o snippet de código abaixo na parte superior do seu código:

 if(!window.console){ window.console = {log: function(){} }; } 

Isso verifica se o console está presente e, se não, ele o define como um objeto com uma função em branco chamada log. Dessa forma, window.console e window.console.log nunca são verdadeiramenteundefined.

Fresheyeball
fonte
26
Corrija-me se errado, mas acho que não há necessidade de Firebug no Firefox para ver o console, basta clicar em Ctrl + Shift + J (Ferramentas> Web Developer> Error Console)
Dane411
4
@ Dane411 isso é verdade, mas o firebug é melhor e mais comumente usado.
27713 Fresheyeball
3
@Fresheyeball Alguém tem que limpar todo o lixo, mas acho que em algum momento fica menos interessante colher esses representantes e realmente manter a comunidade limpa.
andlrc
2
Quem votou negativamente nesta resposta, comente. downvotes sem comentários são inúteis
Fresheyeball
havia window.dump antes de window.console.log. É melhor do que a função log vazio
octagram
100

Você pode visualizar todas as mensagens registradas no console se usar uma ferramenta como o Firebug para inspecionar seu código. Digamos que você faça isso:

console.log('Testing console');

Ao acessar o console no Firebug (ou qualquer outra ferramenta que você decidir usar para inspecionar seu código), você verá qualquer mensagem que você disse à função para registrar. Isso é particularmente útil quando você deseja ver se uma função está sendo executada ou se uma variável está sendo passada / atribuída corretamente. Na verdade, é bastante valioso para descobrir exatamente o que deu errado com seu código.

Fibericon
fonte
10
Não se esqueça de defini-lo primeiro para evitar erros no IE: stackoverflow.com/a/7585409/318765
mgutt
83

Ele postará uma mensagem de log no console javascript do navegador, por exemplo, Firebug ou Developer Tools (Chrome / Safari) e mostrará a linha e o arquivo de onde foi executado.

Além disso, quando você gera um objeto jQuery, ele inclui uma referência a esse elemento no DOM e, ao clicar nele, ele é direcionado para a guia Elementos / HTML.

Você pode usar vários métodos, mas cuidado para que ele funcione no Firefox, você deve ter o Firebug aberto, caso contrário, a página inteira falhará. Se o que você está registrando é uma variável, matriz, objeto ou elemento DOM, ele fornecerá uma análise completa, incluindo também o protótipo do objeto (sempre interessante dar uma olhada). Você também pode incluir quantos argumentos quiser e eles serão substituídos por espaços.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Eles aparecem com logotipos diferentes para cada comando.

Você também pode usar console.profile(profileName);para iniciar a criação de perfil de uma função, script etc. E, em seguida, finalize-a console.profileEnd(profileName);e ela aparecerá na guia Perfis do Chrome (não sei com FF).

Para uma referência completa, acesse http://getfirebug.com/logging e sugiro que você a leia. (Rastreios, grupos, criação de perfil, inspeção de objetos).

Espero que isto ajude!

Fred
fonte
1
Por que é console.log("x:", x)melhor que console.log("x:" + x)? É menos propenso a erros, pois a ,é mais fácil de ler do que a +?
Kevin Meredith
Na minha opinião, é um pouco mais fácil ler quando você está produzindo muitas coisas diferentes. Nesse caso, provavelmente deveria ser usado +estritamente, mas eu queria mostrar que você também pode usar vírgulas nas funções do console. Além disso, evita problemas se as duas variáveis ​​forem números inteiros ou matrizes.
Fred
5
console.log("x:", x)é significativamente melhor, porque quando xé objeto ou matriz (ou qualquer coisa que não seja string), ele é exibido corretamente, sem conversão em string.
Josef Kufner
34

Não há nada a ver com jQuery e, se você quiser usá-lo, aconselho você a fazer

if (window.console) {
    console.log("your message")
}

Portanto, você não quebra seu código quando ele não está disponível.

Conforme sugerido no comentário, você também pode executá-lo em um local e depois usá-lo console.lognormalmente.

if (!window.console) { window.console = { log: function(){} }; }
Baptiste Pernet
fonte
18
Em vez disso, recomendo que você faça o mesmo if(!window.console){ window.console = function(){}; }em um lugar e use o console.log normalmente.
Fresheyeball
23

console.lognão tem nada a ver com jQuery. É um objeto / método comum fornecido pelos depuradores (incluindo o depurador do Chrome e o Firebug) que permite que um script registre dados (ou objetos na maioria dos casos) no console do JavaScript.

Quentin
fonte
19

console.logregistra informações de depuração no console em alguns navegadores (Firefox com Firebug instalado, Chrome, IE8, qualquer coisa com o Firebug Lite instalado). No Firefox, é uma ferramenta muito poderosa, permitindo inspecionar objetos ou examinar o layout ou outras propriedades dos elementos HTML. Não está relacionado ao jQuery, mas há duas coisas comumente feitas ao usá-lo com o jQuery:

  • instale a extensão FireQuery para Firebug. Isso, entre outras vantagens, torna o registro de objetos jQuery mais bonito.

  • crie um wrapper mais alinhado com as convenções de código de encadeamento do jQuery.

Isso significa geralmente algo como isto:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

que você pode invocar como

$('foo.bar').find(':baz').log().hide();

para verificar facilmente as cadeias jQuery.

Tgr
fonte
16

console.log não tem nada a ver com jQuery.

Ele registra uma mensagem em um console de depuração, como o Firebug.

SLaks
fonte
16

Um ponto de confusão às vezes é que, para registrar uma mensagem de texto junto com o conteúdo de um de seus objetos usando console.log, você deve passar cada um dos dois como um argumento diferente. Isso significa que você precisa separá-los por vírgulas, porque se você usar o operador + para concatenar as saídas, isso implicitamente chamará o .toString()método do seu objeto. Na maioria dos casos, isso não é explicitamente substituído e a implementação padrão herdada por Objectnão fornece nenhuma informação útil.

Exemplo para tentar no console:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

enquanto que se você tentasse concatenar a mensagem de texto informativa junto com o conteúdo do objeto, obteria:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Portanto, lembre-se de que o console.log, na verdade, leva quantos argumentos você desejar.

Thalis K.
fonte
13

Use console.logpara adicionar informações de depuração à sua página.

Muitas pessoas usam alert(hasNinjas)para esse fim, mas console.log(hasNinjas)é mais fácil trabalhar com isso. Usando um alerta, aparece uma caixa de diálogo modal que bloqueia a interface do usuário.

Edit: Eu concordo com Baptiste Pernet e Jan Hančič que é uma boa idéia verificar se window.consoleestá definido primeiro, para que seu código não seja quebrado se não houver console disponível.

Mark Byers
fonte
12

Um exemplo - suponha que você queira saber qual linha de código foi capaz de executar seu programa (antes que ele quebrasse!), Simplesmente digite

console.log("You made it to line 26. But then something went very, very wrong.")
Gautam Kshatriya
fonte
11

Você o usa para depurar o código JavaScript no Firebug for Firefox ou no console JavaScript nos navegadores WebKit .

var variable;

console.log(variable);

Ele exibirá o conteúdo da variável, mesmo que seja uma matriz ou objeto.

É semelhante ao print_r($var);do PHP .

jondavidjohn
fonte
3
Uma dica útil ... Eu sempre incluem o seguinte em um arquivo javascript globalmente acessível: if (!window.console) { window.console = { log : function() {} }; }. Isso permite que você se esqueça de remover a instrução de depuração ocasional.
roufamatic
@roufamatic Eu não sei ... adicionar código, o código identificador que não pertence, parece ser uma solução muito terrível ... especialmente quando encontrar / substituir é tão fácil ...
jondavidjohn
10

Cuidado: deixar chamadas para o console em seu código de produção fará com que seu site seja interrompido no Internet Explorer. Nunca mantenha-o desembrulhado. Veja: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

Harlo Holmes
fonte
2
Não é que o log do console seja interrompido se você estiver usando uma máquina Windows, mas o site será quebrado se você estiver usando o Internet Explorer.
Kris Hollenbeck
Eu acho que o blog mencionado na resposta não existe mais.
Tsundoku 17/07/2017
O link original está morto. Encontrei uma cópia do arquivo da web.
Alex
8

Nos primeiros dias, a depuração do JS era realizada por meio da alert()função - agora é uma prática obsoleta.

A console.log()é uma função que escreve uma mensagem para efetuar login no console de depuração, como Webkit ou Firebug. Em um navegador, você não verá nada na tela. Ele registra uma mensagem em um console de depuração. Está disponível apenas no Firefox com Firebug e em navegadores baseados no Webkit (Chrome e Safari). Não funciona bem em todas as versões do IE .

O objeto do console é uma extensão para o DOM.

A console.log()deve ser usado em código só durante o desenvolvimento e depuração.

É uma prática recomendada que alguém deixe console.log()no arquivo javascript no servidor de produção.

jjpcondor
fonte
5

Se o seu navegador suportar depuração, você poderá usar o método console.log () para exibir valores JavaScript.

Ative a depuração no seu navegador com F12e selecione "Console" no menu do depurador.

Console em JavaScript. Tente corrigir ou "depurar" um programa JavaScript que não esteja funcionando e pratique usando o comando console.log (). Existem atalhos que ajudarão você a acessar o console JavaScript, com base no navegador que você está usando:

Atalhos de teclado do console do Chrome

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

Atalhos de teclado do console Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

Atalhos de teclado do Console do Internet Explorer

F12 chave

Atalhos de teclado do console Safari

Cmd+ Option+C

S. Mayol
fonte
4

console.logespecificamente, é um método para os desenvolvedores escreverem código para informar discretamente os desenvolvedores sobre o que o código está fazendo. Ele pode ser usado para alertá-lo de que há um problema, mas não deve substituir um depurador interativo na hora de depurar o código. Sua natureza assíncrona significa que os valores registrados não representam necessariamente o valor quando o método foi chamado.

Resumindo: registre erros com console.log(se disponível) e corrija os erros usando o depurador de sua escolha: Firebug , WebKit Developer Tools (incorporado ao Safari e Chrome ), IE Developer Tools ou Visual Studio.

fora
fonte
4

Eu realmente sinto a programação da Web fácil quando inicio console.loga depuração.

var i;

Se eu quiser verificar o valor do itempo de execução ..

console.log(i);

você pode verificar o valor atual ina guia console do firebug. É especialmente usado para depuração.

aksu
fonte
4

É usado para registrar (qualquer coisa que você passar) no console do Firebug . O uso principal seria depurar seu código JavaScript.

Poelinca Dorin
fonte
4

Além dos usos mencionados acima, console.logtambém pode imprimir no terminal em node.js. Um servidor criado com express (por exemplo.) Pode ser usado console.logpara gravar no arquivo do logger de saída.

surajck
fonte
2

Nos scripts java, não há funções de entrada e saída. Portanto, para depurar o código, o método console.log () é usado. Será impresso no log do console (ferramentas de desenvolvimento).

Ele não está presente no IE8 e inferior até você abrir a ferramenta de desenvolvimento do IE.

NavyaKumar
fonte
2

Isso não é nada para lidar com o jQuery. É console.log()uma referência à função de log do objeto do console, que fornece métodos para registrar informações no console do navegador. Esses métodos destinam-se apenas a fins de depuração e não devem ser invocados para a apresentação de informações aos usuários finais.

Aravinda Meewalaarachchi
fonte