0

Me gustaría crear un "console.test()", un método que solo haga console.log() si la variable test == true. Pero creo que no es posible utilizar protoype para crear dicho método. Estoy un poco verde en esto, ¿alguien puede aportar algo de luz?

Otra duda que me surge es: ¿Porque en un console.log podemos introducir información separada por comas? ¿Podría simular algo así?

Muchas gracias por adelantado!

3 respuestas 3

2

Si te he entendido bien, quieres usar un objeto que herede de console y crear un método llamado test que haga lo mismo que console.log pero sólo si la variable de control que comentas es true.

Es bastante sencillo de la siguiente manera:

var debugMode = true;

(function() {
    var exLog = console.log;
    console.test = function(msg) {
        if (debugMode)
            exLog.apply(this, arguments);
    }
})()

De esta manera tienes el método console.log nativo de JS que se seguirá comportando como siempre y además tu nuevo método console.test que dejará de lanzar mensajes en la consola en el momento en el que la variable de control debugMode sea false.

https://jsfiddle.net/wLpgxs24/20/

La idea es bastante útil ya que por ejemplo a la hora de pasar de desarrollo a producción, sería tan sencillo como poner la variable global de control debugMode a false, evitando de esta manera tener que ir buscando cada console.log para comentarlo o borrarlo.

En cuanto a la otra pregunta, sí, console.log admite varios parámetros:

  • console.log(msg). El que se suele usar de manera más habitual.
    Muestra un mensaje.
  • console.log(obj1, obj2, .... , objN).En este caso se mostrarán las representaciones en cadena de cada uno de los objetos pasados como parámetro.
1

He mirado por internet porque tu pregunta me ha generado interes, mira a ver si esto te sirve:

       console.test = function(/**/) {
            var args = arguments;
            for(var i=0; i<args.length; i++){
                alert(args[i]);
            }
        };
        console.test("hola que tal", "pepe");

Lo de los parámetros infinitos lo he sacado de este hilo, lo paso por si quieres mirartelo:

https://stackoverflow.com/questions/9338291/javascript-infinite-parameters-for-function

Por cierto no he puesto lo que dices de test === true, porque nose bien como tienes montado eso, pasa código y si puedo te ayudo en algo.

0

Básicamente, tienes que condicionar la definición de console.test al valor de window.test

window.test = true // o false

if(window.test === true) {
  console.test = function() { /* hace algo */ };
} else {
  console.test=function() { /* no hace nada */ };
}

Lo más simple, sería hacer:

window.test = true // o false

if(window.test === true) {
  console.test = console.log;
} else {
  console.test=function() { /* no hace nada */ };
}

Pero para definir console.test hay muchas maneras y vamos a explorarlas para que la respuesta sea lo más completa posible:

Llamando la función "a lo bruto"

console.test = function() {  
  var args = [].slice.call(arguments);  
  console.log(args); 
};

Pero esto imprimirá los argumentos dentro de un array:

console.test('hola','amigo')

// imprime ["hola", "amigo"]

Usando spread operator

En navegadores modernos, el spread operator se encarga de pasar el array de argumentos como parámetros

console.test = function() {  console.log(...arguments); };

console.test('hola',{a:1}, 'amigo')

// imprime hola, ▸{a:1}, amigo

Usando console.log.apply

Puedes hacer algo como:

window.test = true // o false

if (window.test === true) {
   console.test = function() {  console.log.apply(console,arguments)         };
} else {
   console.test = function() { /* no hace nada */   };
}

Al usar Function.prototype.apply puedes llamar a una función con su respectivo contexto (en este caso console) y pasarle N argumentos en forma de array:

 console.log.apply(console,['a','b','c']);

Que a su vez invocarán a la función con ese array en forma de una lista de argumentos, lo cual equivale a hacer:

 console.log('a','b','c');

PEEEERO todos estos enfoques harán que en el inspector de tu consola todos los console.test aparezcan siendo llamados desde el script donde definiste la función, cuando sería más útil que aparecieran llamados desde el script (y la línea) donde lo hayas invocado.


Usando Function.prototype.bind

Para que los llamados a console.test aparezcan invocados desde el script y la línea correcta, lo que se hace es:

window.test = true // o false

if (window.test === true) {
   console.test = console.log.bind(console);
} else {
   console.test = function() { /* no hace nada */   };
}

Al usar Function.prototype.bind estás en el fondo haciendo un duplicado de la función, que sería equivalente a hacer console.test = console.log y aparecerá siendo llamado desde el script que lo invoca. Pero además, la gracia del bind, es que puedes pasarle parámetros adicionales que se anteponen a los argumentos:

console.test = console.log.bind(console,'TEST:');

En cuyo caso console.test('hola',{x:1},'amigo'); imprimirá

TEST: hola ▸{a: 1} amigo

Puedes ir más allá y hacer que TEST se imprima con un color:

console.test = console.log.bind(console, '%cTEST:', 'color:#090;font-weight:bold;');

En cuyo caso TEST: tendrá un color distinto. Abre el panel devtools usando F12 y corre este script:

console.test = console.log.bind(console, '%cTEST:', 'color:#090;font-weight:bold;');

console.test('hola',{a:1},'chao');

(va a alegar que el snippet está "sandboxed" pero igual aparecerá TEST en verde)


Usando getters (este es mi preferido)

Podrías definir un método en el objeto console con parámetros dinámicos. Por ejemplo, que imprimiera el tiempo que ha pasado desde que declaraste console.test hasta que lo invocas. De nuevo, abre tu panel con F12 y ejecuta:

window.test = true;
window.timeStart = Date.now();

Object.defineProperty(console, "test", {
  get: function() {
    if (window.test !== true) {
      return function() { /* no hace nada */ };
    }
    return Function.prototype.bind.call(
      console.log,
      console,
      '%c' + parseInt((Date.now() - window.timeStart) / 100, 10) / 10 + 's TEST:',
      "color:#03C;font-weight:bold;"
    );
  }
});

window.setTimeout(function() {
  console.test('Me imprimo a los 2 segundos');
}, 2000);

window.setTimeout(function() {
  console.test('Me imprimo a los 3.5 segundos');
}, 3500);

La consola dirá:

2s TEST: Me imprimo a los 2 segundos
3.5s TEST: Me imprimo a los 3.5 segundos

Y eso es algo que no podrías hacer con console.log.bind directamente.

Ve un ejemplo corriendo en Plunkr (primero abre la consola con F12 para ver los mensajes)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.