JavaScript: ¿Cómo imprimo un mensaje en la consola de error?

438

¿Cómo puedo imprimir un mensaje en la consola de error, preferiblemente incluyendo una variable?

Por ejemplo, algo como:

print('x=%d', x);
Mark Harrison
fuente
8
¿De qué consola estás hablando? ¿Consola del navegador o consola específica del marco de JavaScript?
Eric Schoonover
Publicación relacionada: Chrome: console.log, console.debug no funcionan
RBT

Respuestas:

470

Instale Firebug y luego puede usar console.log(...)y console.debug(...), etc. (consulte la documentación para obtener más información).

Dan
fuente
14
@Dan: WebKit Web Inspector también es compatible con la API de la consola FireBug
olliej
160
¿Por qué es esta la respuesta aceptada? no preguntó cómo escribir en la consola firebug, preguntó cómo escribir en la consola de error. no ser un idiota ni nada, solo señalarlo.
Matt Lohkamp
127
+1. Y para el beneficio de cualquiera que llegue a esta pregunta ahora, vale la pena señalar que, dado que la pregunta fue respondida, todos los navegadores ahora han implementado el objeto de la consola, por lo que console.log()etc. debería funcionar en todos los navegadores, incluido IE. Sin embargo, en todos los casos, debe tener la ventana del depurador abierta en ese momento, de lo contrario, las llamadas a consolegenerarán errores.
Spudley
2
@andrewjackson como se señaló anteriormente, console.log funciona bien en todos los navegadores modernos, incluido IE. Su código sigue siendo perfectamente válido y útil si tiene la intención de admitir navegadores antiguos (y si está trabajando en un sitio web público, ¡seguro que sí!), Sin embargo, mi crítica es solo que su comentario es engañoso / no es preciso.
BrainSlugs83
1
console.debug () por otro lado no existe en IE. Podemos solucionar eso con: if (! Console.debug) {console.debug = function (args) {console.log (args); }}
Rovanion
319
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

También puede agregar CSS a sus mensajes de registro:

console.log('%c My message here', "background: blue; color: white; padding-left:10px;");
Nicholas
fuente
8
Documentación para Chrome: developers.google.com/chrome-developer-tools/docs/console
mrzmyr
10
Esta es la respuesta correcta. La palabra "error" ni siquiera se menciona en la respuesta seleccionada, aunque está en el título de la pregunta.
Ivan Durst
3
El bit extra sobre agregar CSS es bastante divertido. +1!
sudo make install
@ORMapper ¿Qué no funciona allí? ¿El CSS que supongo?
Nicholas
2
En el momento en que te das cuenta de eso, todos estos años de uso console.logpuedes usar css dentro de la consola: |
Rojo
86

Las excepciones se registran en la consola de JavaScript. Puede usar eso si desea mantener Firebug deshabilitado.

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

Uso:

log('Hello World');
log('another message');
Ivo Danihelka
fuente
8
En algunos navegadores, si tiene habilitada la depuración, esto arrojará mensajes emergentes.
BrainSlugs83
¿Podría explicar por qué throwdebe estar envuelto en un setTimeout?
Antony
55

Una buena forma de hacer esto que funciona en varios navegadores se describe en Depuración de JavaScript: ¡Deseche sus alertas! .

Ian Oxley
fuente
77
throw () es una gran sugerencia: esta debería ser la respuesta elegida.
Matt Lohkamp
17
De acuerdo, este es un enfoque de navegador cruzado. Pero ... ¿No es lanzar una excepción fundamentalmente diferente de los mensajes de registro?
Robin Maben
14
Por otro lado, lanzar una excepción detendrá la ejecución del "hilo" actual (como lo señaló Yuval A), y lo reanudará en la captura si hay uno. Dudo que esto sea lo que se desea.
dlaliberte
77
throw()Definitivamente no es la forma de hacer esto. te meterás en problemas tarde o temprano. para mí fue antes :(
Hugo Mota
44
@Ian_Oxley: estaba inactivo en algún momento, ahora está respaldado, pero publicar el código aquí es aún mejor, y lo recomiendan las mejores prácticas de stackoverflow.
woohoo
15

Aquí hay una solución a la pregunta literal de cómo imprimir un mensaje en la consola de errores del navegador, no en la consola del depurador. (Puede haber buenas razones para omitir el depurador).

Como señalé en los comentarios sobre la sugerencia de lanzar un error para obtener un mensaje en la consola de error, un problema es que esto interrumpirá el hilo de ejecución. Si no desea interrumpir el hilo, puede lanzar el error en un hilo separado, uno creado usando setTimeout. De ahí mi solución (que resulta ser una elaboración de la 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');

Incluyo el tiempo en milisegundos desde la hora de inicio porque el tiempo de espera podría sesgar el orden en el que puede esperar ver los mensajes.

El segundo argumento para el método de error es para el nombre de archivo, que es una cadena vacía aquí para evitar la salida del nombre de archivo inútil y el número de línea. Es posible obtener la función de llamada pero no de una manera simple e independiente del navegador.

Sería bueno si pudiéramos mostrar el mensaje con un icono de advertencia o mensaje en lugar del icono de error, pero no puedo encontrar una manera de hacerlo.

Otro problema con el uso del tiro es que podría ser atrapado y tirado por un try-catch cerrado, y poner el tiro en un hilo separado también evita ese obstáculo. Sin embargo, hay otra forma de detectar el error, que es si el controlador window.onerror se reemplaza por uno que hace algo diferente. No puedo ayudarte allí.

dlaliberte
fuente
15

Si usas Safari , puedes escribir

console.log("your message here");

y aparece justo en la consola del navegador.

Lukas
fuente
11
Todos los navegadores modernos son compatibles console.log().
JJJ
2
Todos los navegadores modernos AHORA son compatibles console.log(). No era cierto hasta hace poco.
Bryce
9

Para responder realmente la pregunta:

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

En lugar de error, también puede usar información, iniciar sesión o advertir.

Yster
fuente
Su respuesta parece la mejor, pero la página MDN de Mozilla dice que console.error(..)es una característica no estándar y no debe usarse en producción. ¿Cuál es su opinión sobre esto? ¿Tiene alguna sugerencia para un programador novato usando console.errorvs console.log?
modulitos
Esto es interesante. No deberíamos usar esto entonces. Gracias por la información, Lucas.
Yster
2
MDN considera console.log(...)"no estándar" también. En ese sentido, console.errores tan estable como console.log.
Mike Rapadas
1
@Lucas ¿A quién le importa si es estándar? ¿Quién va a usar el registro de la consola para la producción?
Andrew
Console.error funciona ahora en todos los principales navegadores. Incluso IE8. Ver developer.mozilla.org/en-US/docs/Web/API/Console/error
Rojo
8

Si está utilizando Firebug y necesita admitir IE, Safari u Opera también, Firebug Lite agrega soporte de console.log () a estos navegadores.

Devon
fuente
2
Wow .. Firebug Lite es increíble
Dexter
6

El WebKit Web Inspector también es compatible con Firebug consola de API (sólo una pequeña adición a la respuesta de Dan ).

olliej
fuente
Muy bonito WebKit lo admite. Por lo tanto, es bastante compatible entonces. ¡Excelente!
Albus Dumbledore
5

Una nota sobre 'throw ()' mencionada anteriormente. Parece que detiene la ejecución de la página por completo (verifiqué en IE8), por lo que no es muy útil para registrar "procesos en curso" (como rastrear una determinada variable ...)

Mi sugerencia es quizás agregar un elemento de área de texto en algún lugar de su documento y cambiar (o agregar) su valor (que cambiaría su texto) para registrar información cuando sea necesario ...

Yuval A.
fuente
Supongo que es porque no respondiste la pregunta del OP. Para imprimir en la consola JS, debe usar un método incorporado como console.log(), throw()etc. Además, no hay nada de malo en el comportamiento de throw()lo que parece implicar: el hecho de que detenga la ejecución es intencional y documentado ( desarrollador. mozilla.org/en-US/docs/Web/JavaScript/Reference/… ), y es coherente con la forma en que se lanzan / capturan las excepciones en otros lenguajes de programación. (Si desea registrar el contenido de una variable sin detener la ejecución, para eso console.log()está.)
Sean the Bean
@SeantheBean, originalmente hubo una discusión sobre el hecho de que IE no era compatible console.log, por lo que la gente daba alternativas. Sobre throw()detener la ejecución, por supuesto , es intencional, nadie dijo que no. Es por eso que generalmente no es una buena manera de registrar información de depuración en tiempo de ejecución, lo que el OP quería ...
Yuval A.
5

Como siempre, Internet Explorer es el gran elefante en patines que te detiene simplemente usando console.log().

El registro de jQuery se puede adaptar con bastante facilidad, pero es una molestia tener que agregarlo en todas partes. Una solución si está utilizando jQuery es colocarlo en su archivo jQuery al final, minimizado primero:

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
fuente
Ahora se acepta como extensiones de jQuery, pero ¿no sería más eficiente verificar si existen objetos 'consola' y 'opera' antes de detectar una excepción?
Danubian Sailor
@lechlukasz Creo que puede guardar la sobrecarga de la extensión y simplemente usar console.log más esta comprobación de IE: 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
fuente
1
console.log("your message here");

trabajando para mí ... estoy buscando esto ... utilicé Firefox. Aquí está mi guión.

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

Funciona en Firefox y Chrome.

DK
fuente
1

La forma más sencilla de hacer esto es:

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

Para responder a su pregunta, puede usar las funciones de ES6,

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

Esto no se imprime en la consola, pero le abrirá una ventana emergente de alerta con su mensaje que podría ser útil para algunas depuraciones:

solo haz:

alert("message");
mmm
fuente
Eso no es nada en común de lo que OP pidió
Zefir Zdravkov
0

Con la sintaxis es6 puede usar:

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