console.log en tablets

Una función para modificar la salida por consola en tablets

Van Gogh

archivado en: JavaScript / 15 febrero, 2014

Depurar código js para tablets es una lata. Hay una manera cómoda de hacerlo con el simulador Genymotion para artefactos que no son de apple y también es cierto que funciona muy bien la consola del chrome en modo simulación, pero además puede resultar útil un script que me ha pasado Kike, que comparto a su vez con vosotros.

function consolaTablet() {

/* Con esta variable activamos la ventana de "consola" dentro de la aplicación */

var debug = true;

var objLog = window.console;

// Si hay debug, sobreescribimos el console.log para que nos saque los mensajes por pantalla.

if (debug) {

window.console = {

log: function(msg) {

printDebug(msg);

}

};

}

/* Método con el que pintamos en la capa la salida de la consola. Si no existiera la capa, la crea. */

function printDebug(msj) {

if (!$("#debug").is('*'))  {

$("body").append("<div id='debug'></div>");

var alto = $(window).height() - $("#debug").height() - 20 - $("footer").height();

var ancho = $(window).width() - $("#debug").width() - 25;

$("#debug").css("top", alto + "px");

$("#debug").css("left", ancho + "px");

}

/* Comprobamos si es un objeto. Si lo fuera se va a la consola del navegador. */
if (typeof(msj) != 'object') {

$("#debug").append('> ' + msj + '<br>');

} else {

objLog.log(msj);

}

}

Y un poquito de css...

#debug {

position: fixed;
width: 400px;
opacity: 0.6;
height: 200px;
overflow-y: auto;
border: solid 1px #CCCCCC;
background: white;
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
font-size: 10px;
padding: 5px;
z-index: 20000;
color: black;

}

|| Tags:

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.