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.