Respostas:
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 clicked
na 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
}
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.
Lugares que você pode ver no console! Apenas para tê-los todos em uma resposta.
Raposa de fogo
(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.
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.
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.
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!
console.log("x:", x)
melhor que console.log("x:" + x)
? É menos propenso a erros, pois a ,
é mais fácil de ler do que a +
?
+
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.
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.
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.log
normalmente.
if (!window.console) { window.console = { log: function(){} }; }
if(!window.console){ window.console = function(){}; }
em um lugar e use o console.log normalmente.
console.log
registra 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.
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 Object
nã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.
Use console.log
para 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.console
está definido primeiro, para que seu código não seja quebrado se não houver console disponível.
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.")
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 .
if (!window.console) { window.console = { log : function() {} }; }
. Isso permite que você se esqueça de remover a instrução de depuração ocasional.
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
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.
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
console.log
especificamente, é 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.
É usado para registrar (qualquer coisa que você passar) no console do Firebug . O uso principal seria depurar seu código JavaScript.
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.
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.