JavaScript: como imprimir uma mensagem no console de erros?

438

Como posso imprimir uma mensagem no console de erro, preferencialmente incluindo uma variável?

Por exemplo, algo como:

print('x=%d', x);
Mark Harrison
fonte
8
De que console você está falando? Console do navegador ou console específico da estrutura JavaScript?
Eric Schoonover

Respostas:

469

Instale o Firebug e, em seguida, você pode usar console.log(...)e console.debug(...)etc. (consulte a documentação para obter mais informações).

Dan
fonte
14
@ Dan: O Web Inspector WebKit também suporta o console do Firebug API
olliej
160
por que essa é a resposta aceita? ele não perguntou como escrever no console do firebug, ele perguntou como escrever no console do erro. não sendo um idiota ou qualquer coisa, apenas apontando.
Matt lohkamp
127
+1. E para o benefício de quem chega agora a essa pergunta, vale ressaltar que desde que a pergunta foi respondida, todos os navegadores implementaram o objeto do console, portanto, console.log()etc, devem funcionar em todos os navegadores, incluindo o IE. No entanto, em todos os casos, você precisa abrir a janela do depurador no momento, caso contrário, as chamadas para consolegerarão erros.
Spudley
2
@andrewjackson como observado anteriormente, o console.log funciona bem em todos os navegadores modernos, incluindo o IE. Seu código ainda é perfeitamente válido e útil se você pretende oferecer suporte a navegadores mais antigos (e se estiver trabalhando em um site público, com certeza deveria!), No entanto, minha crítica é apenas que seu comentário é enganoso / não é preciso.
BrainSlugs83
1
console.debug () por outro lado, não existe no IE. Podemos contornar isso com: if (! Console.debug) {console.debug = function (args) {console.log (args); }}
Rovanion
318
console.error(message); //gives you the red errormessage
console.log(message); //gives the default message
console.warn(message); //gives the warn message with the exclamation mark in front of it
console.info(message); //gives an info message with an 'i' in front of the message

Você também pode adicionar CSS às suas mensagens de log:

console.log('%c My message here', "background: blue; color: white; padding-left:10px;");
Nicholas
fonte
8
Documentação para chrome: developers.google.com/chrome-developer-tools/docs/console
mrzmyr 12/08/2013
10
Essa é a resposta correta. A palavra "erro" nem é mencionada na resposta selecionada, embora esteja no título da pergunta.
Ivan Durst
3
A parte extra sobre a adição de CSS é bastante divertida. +1!
sudo make install
@ORMapper O que não funciona lá? O CSS que eu assumo?
Nicholas
2
No momento em que você percebe que, todos esses anos de uso, console.logvocê é capaz de usar css dentro do console: |
Vermelho
86

Exceções são registradas no console do JavaScript. Você pode usar isso se quiser manter o Firebug desativado.

function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
}

Uso:

log('Hello World');
log('another message');
Ivo Danihelka
fonte
8
Em alguns navegadores, se você tiver a depuração ativada, isso exibirá mensagens pop-up.
BrainSlugs83
Você poderia explicar por que o item throwdeve ser embrulhado em um setTimeout?
Antony
55

Uma boa maneira de fazer isso que funciona em vários navegadores é descrita em Depurando JavaScript: Jogue Fora Seus Alertas! .

Ian Oxley
fonte
7
throw () é uma ótima sugestão - essa deve ser a resposta escolhida.
Matt lohkamp
17
Concordado, esta é uma abordagem entre navegadores. Mas .. Não está lançando uma exceção fundamentalmente diferente de registrar mensagens?
Robin Maben
14
Por outro lado, lançar uma exceção interromperá a execução do "encadeamento" atual (conforme observado por Yuval A) e o continuará na captura, se houver um. Duvido que é isso que se deseja.
precisa saber é o seguinte
7
throw()definitivamente não é o caminho para fazer isso. você terá problemas mais cedo ou mais tarde. para mim foi mais cedo :(
Hugo Mota
4
@Ian_Oxley: caiu em algum momento, agora está de volta, mas publicar o código aqui ainda é melhor e recomendado pelas melhores práticas de stackoverflow.
Woohoo
15

Aqui está uma solução para a pergunta literal de como imprimir uma mensagem no console de erros do navegador, não no console do depurador. (Pode haver boas razões para ignorar o depurador.)

Como observei nos comentários sobre a sugestão de gerar um erro para obter uma mensagem no console de erros, um problema é que isso interromperá o encadeamento de execução. Se você não quiser interromper o encadeamento, poderá lançar o erro em um encadeamento separado, criado usando setTimeout. Daí a minha solução (que acaba sendo uma elaboração da de Ivo Danihelka):

var startTime = (new Date()).getTime();
function logError(msg)
{
  var milliseconds = (new Date()).getTime() - startTime;
  window.setTimeout(function () {
    throw( new Error(milliseconds + ': ' + msg, "") );
  });
}
logError('testing');

Incluo o tempo em milissegundos desde o horário de início, pois o tempo limite pode distorcer a ordem na qual você espera ver as mensagens.

O segundo argumento para o método Error é o nome do arquivo, que é uma string vazia aqui para impedir a saída do nome de arquivo e número de linha inúteis. É possível obter a função de chamada, mas não de uma maneira simples e independente do navegador.

Seria bom se pudéssemos exibir a mensagem com um ícone de aviso ou mensagem em vez do ícone de erro, mas não consigo encontrar uma maneira de fazer isso.

Outro problema com o uso do arremesso é que ele pode ser pego e jogado fora por um try-catch anexo, e colocar o arremesso em um thread separado evita esse obstáculo também. No entanto, existe ainda outra maneira pela qual o erro pode ser detectado, ou seja, se o manipulador window.onerror for substituído por um que faça algo diferente. Não posso ajudá-lo lá.

dlaliberte
fonte
15

Se você usa o Safari , pode escrever

console.log("your message here");

e aparece diretamente no console do navegador.

Lukas
fonte
11
Todos os navegadores modernos suportam console.log().
11123 JJJ
2
Todos os navegadores modernos agora suportam console.log(). Isso não era verdade até recentemente.
Bryce
9

Para realmente responder à pergunta:

console.error('An error occurred!');
console.error('An error occurred! ', 'My variable = ', myVar);
console.error('An error occurred! ' + 'My variable = ' + myVar);

Em vez de erro, você também pode usar informações, log ou aviso.

Yster
fonte
Sua resposta parece melhor, mas a página MDN da Mozilla diz que console.error(..)é um recurso não padrão e não deve ser usado na produção. Qual é a sua opinião sobre isso? Você tem alguma sugestão para um programador iniciante usando console.errorvs console.log?
Modulitos
Isto é interessante. Não devemos usar isso então. Obrigado pela informação, Lucas.
Yster
2
O MDN também considera console.log(...)"não-padrão". A esse respeito, console.erroré tão estável quanto console.log.
Mike Rapadas
1
@ Lucas Quem se importa se é padrão? Quem vai usar o log do console para produção?
Andrew
Console.error agora funciona em todos os principais navegadores. Mesmo IE8. Veja developer.mozilla.org/pt-BR/docs/Web/API/Console/error
Red
8

Se você estiver usando o Firebug e também precisar oferecer suporte ao IE, Safari ou Opera, o Firebug Lite adiciona o suporte console.log () a esses navegadores.

Devon
fonte
2
Uau .. Firebug Lite é incrível
Dexter
6

O WebKit Web Inspector também suporta a API do console do Firebug (apenas uma pequena adição à resposta de Dan ).

olliej
fonte
O WebKit muito bom suporta isso. Portanto, é amplamente suportado então. Ótimo!
Albus Dumbledore
5

Uma observação sobre 'throw ()' mencionada acima. Parece que interrompe a execução da página completamente (verifiquei no IE8), por isso não é muito útil para registrar "processos em andamento" (como rastrear uma determinada variável ...)

Minha sugestão é, talvez, para adicionar um textarea elemento em algum lugar no seu documento e para a mudança (ou anexar a) o seu valor (que mudaria seu texto) para obter informações de log sempre que necessário ...

Yuval A.
fonte
Acho que é porque você não respondeu à pergunta do OP. Para imprimir no console JS, você deve usar um método interno como console.log(), throw()etc. Além disso, não há nada de errado com o comportamento throw()que você parece sugerir - o fato de ele interromper a execução é intencional e documentado ( desenvolvedor. mozilla.org/en-US/docs/Web/JavaScript/Reference/… ), e é consistente com a maneira como as exceções são lançadas / capturadas em outras linguagens de programação. (Se você quiser registrar o conteúdo de uma variável sem parar execução, que é o que console.log()é para.)
Sean Bean
@SeantheBean, originalmente houve uma discussão sobre o fato de o IE não apoiar console.log- então as pessoas estavam dando alternativas. Sobre throw()parar a execução, é claro que é intencional, ninguém disse que não. É por isso que geralmente É não uma boa maneira de registrar informações de depuração em tempo de execução, que o que o OP queria ...
Yuval A.
5

Como sempre, o Internet Explorer é o grande elefante em patins que o impede de usar console.log().

O log do jQuery pode ser adaptado com bastante facilidade, mas é uma dor ter que adicioná-lo a qualquer lugar. Uma solução se você estiver usando o jQuery é colocá-lo no seu arquivo jQuery no final, minificado primeiro:

function log()
{
    if (arguments.length > 0)
    {
        // Join for graceful degregation
        var args = (arguments.length > 1) ? Array.prototype.join.call(arguments, " ") : arguments[0];

        // This is the standard; Firebug and newer WebKit browsers support this.
        try {
            console.log(args);
            return true;
        } catch(e) {
            // Newer Opera browsers support posting erros to their consoles.
            try {
                opera.postError(args);
                return true;
            } 
            catch(e) 
            {
            }
        }

        // Catch all; a good old alert box.
        alert(args);
        return false;
    }
}
Chris S
fonte
Agora é aceito como extensões do jQuery, mas não seria mais eficiente verificar se os objetos 'console' e 'opera' existem antes de capturar a exceção?
Danubian Sailor
@lechlukasz Eu acho que você pode salvar a sobrecarga de extensão e uso apenas console.log mais este IE verificação: stackoverflow.com/questions/1215392/...
Chris S
3

function foo() {
  function bar() {
    console.trace("Tracing is Done here");
  }
  bar();
}

foo();

console.log(console); //to print console object
console.clear('console.clear'); //to clear console
console.log('console.log'); //to print log message
console.info('console.info'); //to print log message 
console.debug('console.debug'); //to debug message
console.warn('console.warn'); //to print Warning
console.error('console.error'); //to print Error
console.table(["car", "fruits", "color"]);//to print data in table structure
console.assert('console.assert'); //to print Error
console.dir({"name":"test"});//to print object
console.dirxml({"name":"test"});//to print object as xml formate

To Print Error:- console.error('x=%d', x);

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");

Parth Raval
fonte
1
console.log("your message here");

trabalhando para mim .. eu estou procurando por isso .. eu usei o Firefox. aqui está o meu script.

 $('document').ready(function() {
console.log('all images are loaded');
});

funciona no Firefox e Chrome.

DK
fonte
1

A maneira mais simples de fazer isso é:

console.warn("Text to print on console");
Kenneth John Falbous
fonte
1

Para responder sua pergunta, você pode usar os recursos do ES6,

var var=10;
console.log(`var=${var}`);
Aniket Kulkarni
fonte
0

Isso não é impresso no console, mas abre um pop-up de alerta com sua mensagem, que pode ser útil para algumas depurações:

apenas faça:

alert("message");
mmm
fonte
Isso não é nada em comum do que OP perguntou
Zefir Zdravkov
0

Com a sintaxe es6, você pode usar:

console.log(`x = ${x}`);
jkordas
fonte