TL;DR
- Usa console.log() para registros básicos
- Usa console.error() y console.warn() para cosas atractivas
- Usa console.group() y console.groupEnd() para agrupar mensajes relacionados y evitar el desorden
- Usa console.assert() para mostrar mensajes de error condicional
Escribir en la consola
Usa el método console.log() para registros básicos en consola. Esta toma una o más expresiones como parámetros y sus valores actuales en la consola. Concatena varios parámetros en una línea separada por espacios.
Por ejemplo, ejecuta esta línea de código en tu JavaScript:
console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());
Como resultado, se obtendrá lo siguiente en la consola:
Autocompletar comandos
Cuando escribes en la consola, en esta se muestra automáticamente un menú desplegable con métodos relevantes autocompletados que coinciden con texto ya ingresado. También se incluyen comandos que hayas ejecutado anteriormente.
Organizar la salida de la consola
Agrupa los mensajes
Con los comandos de grupo, puedes agrupar las salidas relacionadas. El comando console.group() recibe un solo parámetro de string para establecer el nombre del grupo. Cuando lo llames en tu JavaScript, la consola comenzará a agrupar todas las salidas posteriores.
Para finalizar con la agrupación, solo debes llamar a console.groupEnd() cuando hayas terminado.
Ejemplo de entrada:
var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
console.log("User '%s' not authenticated.", user)
}
console.groupEnd();
Ejemplo de salida:
Grupos anidados
Los grupos de registro también se pueden anidar. Esto resulta útil cuando necesitas ver un grupo grande en partes más pequeñas.
En este ejemplo, se muestra un grupo de registros para la etapa de autenticación de un proceso de acceso:
var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated", user);
// Start nested group
console.group("Authorizing user '%s'", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
}
// End nested group
console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");
Aquí se muestra la salida de los grupos anidados en la consola:
Grupos con contracción automática
Si usas mucho los grupos, puede resultarte muy útil evitar que se muestre todo a medida que sucede. Cuando esto ocurra, podrás contraer automáticamente los grupos llamando a console.groupCollapsed() en lugar de console.group():
console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
...
}
console.groupEnd();
Salida de groupCollapsed():
Errores y advertencias
Los errores y las advertencias se comportan del mismo modo que los registros normales. La única diferencia es que error() y warn() tienen estilos para poder destacarse.
console.error()
El método console.error() muestra un ícono rojo y el texto del mensaje en el mismo color:
function connectToServer() {
console.error("Error: %s (%i)", "Server is not responding",500);
}
connectToServer();
Se obtiene lo siguiente:
console.warn()
El método console.warn() muestra un ícono de advertencia amarillo con el texto del mensaje:
if(a.childNodes.length < 3 ) {
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}
Se obtiene lo siguiente:
Aserciones
El método console.assert() muestra, de forma condicional, una string de error (su segundo parámetro) solo si el primer parámetro se avalúa como false.
Una aserción simple y su visualización
El siguiente código generará un mensaje de error en la consola solo si la cantidad de nodos secundarios correspondiente al elemento list es superior a 500.
console.assert(list.childNodes.length < 500, "Node count is > 500");
Así se muestra una falla de aserción en la consola:
Dar formato a las strings y sustituirlas
El primer parámetro que se pasa a cualquier método de registro puede contener uno o más especificadores de formato. Un especificador de formato consta de un símbolo % seguido de una letra que indica el formato que recibirá el valor. Los parámetros que siguen a la string corresponden a los marcadores de posición en orden.
En el siguiente ejemplo, se usan formateadores de strings y dígitos para insertar valores en la string de salida. En la consola, aparecerá “Sam tiene 100 puntos”.
console.log("%s has %d points", "Sam", 100);
A continuación, se proporciona toda la lista de especificadores de formato:
| Especificador | Salida |
|---|---|
| %s | Da al valor el formato de una string. |
| %i o %d | Da al valor el formato de un entero. |
| %f | Da al valor el formato de un punto flotante. |
| %o | Da al valor el formato de un elemento DOM expandible. Tal como se ve en el panel Elements, |
| %O | Da al valor el formato de un objeto JavaScript expandible. |
| %c | Aplica reglas de estilo CSS a la string de salida según la especificación del segundo parámetro. |
En este ejemplo, se usa el especificador de dígito para dar formato al valor de document.childNodes.length. También se usa el especificador de punto flotante para dar formato al valor de Date.now().
Código:
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());
Salida del ejemplo del código anterior:
Aplicar estilos a la consola con CSS
El especificador de formato CSS te permite personalizar la pantalla de la consola. Inicia la string con el especificador y aplica el estilo que desees como segundo parámetro.
Prueba con este código:
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
La salida del registro se verá con tamaño grande y en azul:
Dar a elementos DOM formato de objetos JavaScript
De forma predeterminada, los elementos DOM se registran en la consola como representaciones de sus HTML, pero a veces te convendrá acceder al elemento DOM como un objeto JavaScript e inspeccionar sus propiedades. Para hacer esto, puedes usar el especificador de string %O (ver arriba) o console.dir:
