JavaScript
Consola

Introducción

Sintaxis

• void console.log (obj1 [, obj2, ..., objN]);
• void console.log (msg [, sub1, ..., subN]);

Parámetros

Observaciones

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

Tabulando valores - console.table ()

En la mayoría de los entornos, console.table() se puede usar para mostrar objetos y matrices en un formato tabular.

Por ejemplo:

console.table(['Hello', 'world']);

muestra como

console.table({foo: 'bar', bar: 'baz'});

muestra como

var personArr = [{"personId": 123, "name": "Jhon", "city": "Melbourne", "phoneNo": "1234567890"}, {"personId": 124, "name": "Amelia" , "city": "Sydney", "phoneNo": "1234567890"}, {"personId": 125, "name": "Emily", "city": "Perth", "phoneNo": "1234567890"}, {"personId": 126, "name": "Abraham", "city": "Perth", "phoneNo": "1234567890"}];

console.table (personArr, ['name', 'personId']);

muestra como

Incluyendo un seguimiento de la pila al registrar - console.trace ()

function foo() {
  console.trace('My log statement');
}

foo();

Mostrará esto en la consola:

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

Nota: donde esté disponible, también es útil saber que el mismo seguimiento de pila es accesible como una propiedad del objeto Error. Esto puede ser útil para el procesamiento posterior y la recopilación automática de comentarios.

var e = new Error('foo');
console.log(e.stack);

Imprimir en la consola de depuración de un navegador

Se puede utilizar la consola de depuración de un navegador para imprimir mensajes simples. Esta depuración o consola web se puede abrir directamente en el navegador (tecla F12 en la mayoría de los navegadores; consulte las Notas a continuación para obtener más información) y el método de log del objeto Javascript de la console puede invocarse escribiendo lo siguiente:

console.log('My message');

Luego, al presionar Intro , esto mostrará My message en la consola de depuración.

console.log() se puede llamar con cualquier número de argumentos y variables disponibles en el alcance actual. Se imprimirán múltiples argumentos en una línea con un pequeño espacio entre ellos.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

El método de log mostrará lo siguiente en la consola de depuración:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

Además de cadenas simples, console.log() puede manejar otros tipos, como matrices, objetos, fechas, funciones, etc.

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

Muestra:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

Los objetos anidados pueden estar colapsados:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

Muestra:

Object { key1: 'val', key2: Array[2], key3: Object }

Ciertos tipos, como los objetos de Date y las function pueden mostrarse de manera diferente:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

Muestra:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

Otros métodos de impresión

Además del método de log , los navegadores modernos también admiten métodos similares:

• console.info - pequeño icono informativo (ⓘ) aparece en la parte izquierda de la cadena impresa (s) u objeto (s).

• console.warn : aparece un pequeño icono de advertencia (!) en el lado izquierdo. En algunos navegadores, el fondo del registro es amarillo.

• console.error - el ícono de los tiempos pequeños (⊗) aparece en el lado izquierdo. En algunos navegadores, el fondo del registro es rojo.

• console.timeStamp : genera la hora actual y una cadena especificada, pero no es estándar:

  console.timeStamp('msg');
  

  Muestra:

  00:00:00.001 msg
  

• console.trace : genera el seguimiento de la pila actual o muestra el mismo resultado que el método de log si se invoca en el ámbito global.

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  Muestra:

  first
  sec
  (anonymous function)
  

La imagen de arriba muestra todas las funciones, con la excepción de timeStamp , en Chrome versión 56.

Estos métodos se comportan de manera similar al método de log y en diferentes consolas de depuración pueden renderizarse en diferentes colores o formatos.

En ciertos depuradores, la información de los objetos individuales se puede ampliar aún más haciendo clic en el texto impreso o en un triángulo pequeño (►) que se refiere a las propiedades respectivas del objeto. Estas propiedades de objeto colapsado pueden estar abiertas o cerradas en el registro. Vea la console.dir para obtener información adicional sobre este

Tiempo de medición - console.time ()

console.time() se puede usar para medir cuánto tarda en ejecutarse una tarea en su código.

Al llamar a console.time([label]) inicia un nuevo temporizador. Cuando se llama a console.timeEnd([label]) , el tiempo transcurrido, en milisegundos, ya que la .time() original .time() se calcula y registra. Debido a este comportamiento, puede llamar a .timeEnd() varias veces con la misma etiqueta para registrar el tiempo transcurrido desde que se realizó la .time() original a .time() .

Ejemplo 1:

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

saldrá:

response in: 774.967ms
response in: 1402.199ms

Ejemplo 2:

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

saldrá:

Loop time: 40.716ms

Contando - console.count ()

console.count([obj]) coloca un contador en el valor del objeto proporcionado como argumento. Cada vez que se invoca este método, se incrementa el contador (con la excepción de la cadena vacía '' ). Una etiqueta junto con un número se muestra en la consola de depuración de acuerdo con el siguiente formato:

[label]: X

label representa el valor del objeto pasado como argumento y X representa el valor del contador.

El valor de un objeto siempre se considera, incluso si las variables se proporcionan como argumentos:

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

Muestra:

1: 1
2: 1
: 1
1: 2
2: 2
: 1

Las cadenas con números se convierten en objetos Number :

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

Muestra:

42.3: 1
42.3: 2
42.3: 3

Las funciones apuntan siempre al objeto Function global:

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

Muestra:

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

Ciertos objetos obtienen contadores específicos asociados al tipo de objeto al que hacen referencia:

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

Muestra:

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

Cadena vacía o ausencia de argumento

Si no se proporciona ningún argumento mientras se ingresa secuencialmente el método de conteo en la consola de depuración , se asume una cadena vacía como parámetro, es decir:

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

Depuración con aserciones - console.assert ()

Escribe un mensaje de error en la consola si la aserción es false . De lo contrario, si la afirmación es true , esto no hace nada.

console.assert('one' === 1);

Se pueden proporcionar múltiples argumentos después de la aserción, que pueden ser cadenas u otros objetos, que solo se imprimirán si la aserción es false :

console.assert no lanza un AssertionError (excepto en Node.js ), lo que significa que este método es incompatible con la mayoría de los marcos de prueba y que la ejecución del código no se interrumpirá en una aserción fallida.

Formato de salida de consola

Muchos de los métodos de impresión de la consola también pueden manejar el formato de cadena tipo C , usando % tokens:

console.log('%s has %d points', 'Sam', 100);

Muestra Sam has 100 points .

La lista completa de especificadores de formato en Javascript es:

Estilo avanzado

Cuando el especificador de formato CSS ( %c ) se coloca en el lado izquierdo de la cadena, el método de impresión aceptará un segundo parámetro con reglas CSS que permiten un control preciso sobre el formato de esa cadena:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

Muestra:

Es posible usar múltiples especificadores de formato %c :

• cualquier subcadena a la derecha de un %c tiene un parámetro correspondiente en el método de impresión;
• este parámetro puede ser una cadena vacía, si no hay necesidad de aplicar reglas CSS a esa misma subcadena;
• Si se encuentran dos especificadores de formato %c , la ^1ª (incluida en %c ) y la ^2ª subcadena tendrán sus reglas definidas en los parámetros ^2º y ^3º del método de impresión, respectivamente.
• Si se encuentran tres especificadores de formato %c , las subcadenas ^1ª , ^2ª y ^3ª tendrán sus reglas definidas en los parámetros ^2ª , ^3ª y ^4ª respectivamente, y así sucesivamente ...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

Muestra:

Usando grupos para sangrar la salida

La salida se puede identificar y encerrar en un grupo plegable en la consola de depuración con los siguientes métodos:

• console.groupCollapsed() : crea un grupo colapsado de entradas que se puede expandir a través del botón de revelación para revelar todas las entradas realizadas después de invocar este método;
• console.group() : crea un grupo expandido de entradas que se pueden contraer para ocultar las entradas después de invocar este método.

La identificación puede eliminarse para entradas posteriores utilizando el siguiente método:

• console.groupEnd () : sale del grupo actual, permitiendo que las entradas más nuevas se impriman en el grupo principal después de invocar este método.

Los grupos se pueden conectar en cascada para permitir múltiples salidas identificadas o capas plegables entre sí:

= Collapsed group expanded =>

Limpiando la consola - console.clear ()

Puede borrar la ventana de la console.clear() utilizando el método console.clear() . Esto elimina todos los mensajes impresos previamente en la consola y puede imprimir un mensaje como "La consola se borró" en algunos entornos.

Visualización de objetos y XML interactivamente - console.dir (), console.dirxml ()

console.dir(object) muestra una lista interactiva de las propiedades del objeto JavaScript especificado. La salida se presenta como una lista jerárquica con triángulos de divulgación que le permiten ver el contenido de los objetos secundarios.

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

muestra:

console.dirxml(object) imprime una representación XML de los elementos descendientes del objeto, si es posible, o la representación de JavaScript, si no. Llamar a console.dirxml() en elementos HTML y XML es equivalente a llamar a console.log() .

Ejemplo 1:

console.dirxml(document)

muestra:

Ejemplo 2:

console.log(document)

muestra:

Ejemplo 3:

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

muestra: