prettyPrint, visualiza tus variables javascript
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.
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.
VÃa: Anieto2k
Hey, great post, very well written. You should blog more about this.
Thanks for the comment, I will continue writing about it.