Contenido

prettyPrint, visualiza tus variables javascript

6 jun

+ 6

James Padolsey nos deleita con una nueva aplicación Javascript que nos ayudará a depurar nuestros scripts. Se trata de un sistema visual para mostrarnos el contenido de nuestras variables.

// HTML
<div id="debug"></debug>

// Javascript
var Objeto = {
	uno: function(){
		return "Esto es una función"
	},
	dos: [1,2,3,4,5],
	tres:{
		uno: "UNO",
		dos: [{
			uno: "uno"
		},{
			dos: "dos"
		}]
	},
	cuatro: "CUATRO"
};

var prettyObject = prettyPrint(Objeto,{/* Opciones */});

document.getElementById("debug").appendChild(prettyObject);

Como podemos ver en el código, tenemos a Objeto que está compuesto de funciones, cadenas y arrays. Al pasarlo por prettyPrint() obtenemos un objeto DOM en forma de tabla con la información del objeto que hemos pasado condicionado por las opciones que usemos como segundo parámetro. Este objeto, será introducido dentro del elemento #debug.
Puedes ver un ejemplo que James ha montado aqui.

prettyprint
(Ver Imagen)

Ejemplo con jQuery

Si estás usando jQuery y te gustaría implementarlo fácilmente en tu sitio web puedes usar esto:

var Objeto = {
	uno: function(){
		return "Esto es una función"
	},
	dos: [1,2,3,4,5],
	tres:{
		uno: "UNO",
		dos: [{
			uno: "uno"
		},{
			dos: "dos"
		}]
	},
	cuatro: "CUATRO"
};

jQuery.getScript("http://github.com/jamespadolsey/prettyPrint.js/raw/ed94a997925c6bf269b780712c17fd27cf284886/prettyprint.js", function(){
    if (jQuery("#debug").length == 0)  jQuery("body").append('<div id="debug"></div>');
    jQuery("#debug").html(prettyPrint(Objeto));
});

// No sé si la URL funcionará para todo el mundo.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.