Notice: Undefined index: Archivo in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Archivo in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Sobre mi in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Sobre mi in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Redescubriendo el console.log 1/2 in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Redescubriendo el console.log 1/2 in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Redescubriendo el console.log 1/2 in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Evite usar any, use unknown en TypeScript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: Evite usar any, use unknown en TypeScript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 400
Notice: Undefined index: MySql in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: General in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: 97-things in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: JavaScript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: https://codigolinea.com/category/javascript/ in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 523
Notice: Undefined index: TypeScript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Cheat Sheet in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Zend Framework in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Symfony Framework in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Patrones de Diseño in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Programacion Funcional in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Ingeniería de Software in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Patrones de Comportamiento in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: MySql in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: scrum in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: agile in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: scala in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: solid in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Nuevo in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: elixir in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: fsharp in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: amfphp in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: fechas in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: lambda in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: golang in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: erlang in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: haskell in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Closure in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: testing in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: chuleta in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: clojure in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: scalajs in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: modulos in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: reactjs in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Unknown in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: modular in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Cake PHP in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: dojo 1.2 in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: 97things in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: agilismo in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: software in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: contexto in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: ISO 8601 in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: seguridad in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: javascript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: purescript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: GET_FORMAT in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: encapsular in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: typescript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: manifiesto in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Zend_Cache in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: estrategia in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: interfaces in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: desarrollo in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: complejidad in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: conformidad in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Rendimiento in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Add new tag in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: STR_TO_DATE in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.dir in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Convención in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: cheat sheet in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: comparativa in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.time in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.warn in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: comparación in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.info in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: scrum master in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: ZendX_JQuery in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: arquitectura in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Code Igniter in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Dojo Toolkit in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: crear modulos in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.group in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: clojurescript in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.count in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: manual inicio in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.table in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.error in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.trace in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: bala de plata in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: hoja de trucos in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: configuración in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Zend Framework in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.assert in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.dirxml in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: código limpio in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: refactorizacion in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: zend_config_ini in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Instalando Zend in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: strategy pattern in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: carrito de compra in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: pruebas unitarias in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: patron estrategia in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Symfony Framework in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Estilo de Código in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: seguridad de tipos in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: console.countReset in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: ZendSkeletonModule in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: asegurando los ini in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: guia de referencia in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Frederick P. Brooks in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: aplicacion reactiva in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: efectos secundarios in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: reactive programming in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: proteger archivos ini in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: programacion reactiva in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Reglas de programacion in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: estilo de programacion in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: programacion funcional in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Añadir etiqueta nueva in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: functional programming in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: progranación funcional in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Patron de comportamieto in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: cheat sheet en español in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: transparencia refrencial in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: seguridad en archivos ini in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: Libro blanco sobre frameworks PHP para empresas in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
Notice: Undefined index: La comunidad Ágil abraza una fantasía inviable in /home/codigoli/public_html/wp-content/plugins/seo-automatic-links/seo-links.php on line 506
En el artículo anterior ya tratamos sobre los principales métodos del objeto console, Aquí veremos el método log y algunos pequeños consejos para aprovechar mejor su funcionalidad.
Agrupar variables
Cuando los valores de las variables no son muy grandes puedes agruparlos para tener una mejor visualización
const a = { v: 1 };
const b = { v: 2 };
const c = { v: 3 };
console.log("--Bad idea---");
console.log("a", a);
console.log("b", b);
console.log("c", c);
console.log("--Good idea---");
console.log({ a, b, c });
También puedes usarlo para mostrar una sola variable;
const dayOfWeek = "Monday";
console.log("--Bad idea---");
console.log("dayOfWeek", dayOfWeek);
console.log("\n--Good idea---");
console.log({dayOfWeek});
Agregarle color
Podemos personalizar los colores de nuestros mensajes, no se si sea muy útil, pero es divertido.
Ejemplo 1
Tomando el código del ejemplo anterior
const dayOfWeek = "Monday";
console.log("%c%s","color: red;font-weight: bold;","Bad idea!");
console.log("dayOfWeek", dayOfWeek);
console.log("%c%s","color: green;font-weight: bold;","\nGood idea!");
console.log({dayOfWeek});
Ejemplo 2
Personalizando los mensajes de succes, error, warning e info
function customLog(message, color='black') {
let logType = 'log';
switch (color) {
case 'success':
color = 'Green';
break
case 'info':
color = 'Blue';
logType = 'info';
break;
case 'error':
color = 'Red';
logType = 'error';
break;
case 'warning':
color = 'Orange';
logType = 'warn';
break;
default:
color = color
}
console[logType](`%c${message}`, `color:${color}`);
}
customLog('Success!', 'success')
customLog('Error!', 'error')
customLog('Warning!', 'warning')
customLog('Info...', 'info')
Ejemplo 3
Escribir mensaje con múltiples colores
const customLog = (message, color = "black") => {
const colors = {
green: "green",
blue: "blue",
red: "red",
orange: "orange",
black: "black",
lime: "lime"
};
console.log(`%c${message}`, `color:${colors[color]}`);
};
customLog("Hello!!");
customLog("Hi green", "green");
customLog("Hi blue", "blue");
customLog("Hi red", "red");
customLog("Hi orange", "orange");
customLog("Hi lime", "lime");
Ejemplo 4
Si estas muy aburrido y quieres mostrar tus habilidades de hacker y mandar mensajes en el console.log puedes usar este truco, pero ten en consideración que solo funciona en google chrome.
console.log("%cJavaScript is amazing!",
`\
font-size: 3em; \
background: red url("https://i.imgur.com/Uyw52SY.gif") \
no-repeat center center;\
background-size: 110% 110%; \
font-weight: bold; \
color: white; \
text-shadow: 0 0 1em black, 0 0 1em black, 0 0 1em black, 0 0 1em black, 0 0 1em black; \
padding: 1% 2% 25%; \
`)
No usar en producción
Evite usar el objeto console en producción, a parte de que puedes exponer información no deseada puede ralentizar tu aplicación.
¿Conoces algun truco o tip sobre el console.log? colócalo en los comentarios
1 Comment