JavaScript: como imprimir uma mensagem no console de erros?


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).


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;");


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');

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! .


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á.


15

Se você usa o Safari , pode escrever

console.log("your message here");

e aparece diretamente no console do navegador.


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.


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.


2
Uau .. Firebug Lite é incrível
Dexter


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 ...


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;
    }
}

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");


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.



1

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

var var=10;
console.log(`var=${var}`);

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");

Isso não é nada em comum do que OP perguntou
Zefir Zdravkov

0

Com a sintaxe es6, você pode usar:

console.log(`x = ${x}`);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.