JS Debugger sés nos cuenta:
Hartito de utilizar cosas del tipo alert(1) o alert("peta"), me hice un
objeto Javascript para poder evaluar expresiones y ejecutar cualquier
comando Javascript sin tener que recurrir a la barra del explorador
(javascript:blablabla...), lo que da más problemas que otra cosa, como que
te aparezca el resultado en la página y te desaparezca todo 
.
La forma de utilizarlo es lo más sencillo del mundo. Solo hay que poner
esta línea en la página HTML que se quiera poder depurar:
<script language="JavaScript" src="Debug.js"></script>
Para depurar la página solo hay que ejecutar el siquiente comando
Javascript: Debug.open()
Normalmente pongo un botón en la página que ejecute ese comando, pero
basta con poner en la url: javascript:Debug.open()
Aparecerá una ventana con dos cajas de texto. En la superior se escriben
expresiones Javascript y en la inferior (al pulsar ENTER) aparece el resultado.
Si el resultado es un objeto, se nos permitirá navegar por sus
propiedades cómodamente.
El HTML de prueba es:
<html>
<head>
<title>Prueba</title>
<script language="JavaScript" src="Debug.js"></script>
<script language="JavaScript">
var unobjeto = new function() {
this.num = 123;
this.str = "abc";
this.obj = new function() {
this.a = 1;
this.b = 2;
}
this.fun = function( a, b )
{
return a + b;
}
}
</script>
</head>
<body>
Hola<br>
</body>
</html>
Para testearlo hay que seguir los siguietes pasos:
- Abrir con un navegador.
- Escribir en la URL: javascript:Debug.open()
- Pruebar a evaluar la expresión: unobjeto, document o cualquier comando Javascript
El código de debug.js es:
/**
* Clase de depuración de Javascript.
*/
var Debug = new function() {
this.win = null;
/**
* Abre la ventana de depuración.
*
* @param width Ancho de la ventana (420 por def.).
* @param height Alto de la ventana (600 por def.).
*/
this.open = function( width, height )
{
// Comprobar que no esté abierta
if( (this.win != null) && !this.win.closed ) {
this.win.focus();
return;
}
// Tamaño por defecto
if( width == undefined ) width = 420;
if( height == undefined ) height = 600;
// Abrir la ventana
this.win = window.open( "", "debugWindow", "resizable,width="+width+",height="+height );
// Para escribir menos... y que el js ocupe menos
var d = this.win.document;
// Escribir el código de la ventana
// Se utilizan dos eventos:
// - window.onresize: Para redimensionar las cajas de texto
// - onsubmit: Para evaluar la expresión escrita
d.open();
d.writeln( "<html>" );
d.writeln( "<head>" );
d.writeln( "<title>JSDebug: " + document.title + "</title>" );
d.writeln( "<script>" );
d.writeln( "window.onresize=function() { document.getElementById('ifrmOut').height = document.body.clientHeight - 60; }" );
d.writeln( "</script>" );
d.writeln( "</head>" );
d.writeln( "<body>" );
d.writeln( "<form name=frmDebug onsubmit='document.dbgObject.evaluate(this.cmd.value);return false;'>" );
d.writeln( "<table id='tbl' width='100%'>" );
d.writeln( "<tr>" );
d.writeln( "<td height='1' width='1'>" );
d.write( "Evaluate:" );
d.writeln( "</td>" );
d.writeln( "<td height='1' width='100%'>" );
d.writeln( "<input type=text style='width:100%' name=cmd>" );
d.writeln( "</td>" );
d.writeln( "</tr>" );
d.writeln( "<tr>" );
d.writeln( "<td colspan='2'>" );
d.writeln( "<iframe id='ifrmOut' name='ifrmOut' width='100%' height='"+(height-60)+"' frameborder='1' scrolling='yes'></iframe>" );
d.writeln( "</td>" );
d.writeln( "</tr>" );
d.writeln( "</table>" );
d.writeln( "</form>" );
d.writeln( "</body>" );
d.writeln( "</html>" );
d.close();
// Se guarda este objeto en la ventana creada
this.win.document.dbgObject = this;
// Se le da el foco
this.win.document.frmDebug.cmd.focus();
}
/**
* Cierra la ventana.
*/
this.close = function()
{
if( this.win != null ) {
this.win.close();
this.win = null;
}
}
/**
* @private
*
* Como no he encontrado ninguna forma de obtener el padre de un objeto, lo intento obtener de la expresión escrita.
* Parece algo cutre, pero funciona.
*/
this.getParentObject = function( s )
{
var i = s.lastIndexOf( "." );
return i != -1 ? s.substr( 0, i ) : undefined;
}
/**
* Obtiene una cadena con el valor de una expresión.
*
* @param expr Expresión a evaluar.
* @param expand Indica si se quieren obtener todas las propiedades o solo el valor de la expresión (true por def.).
*
* @return Cadena con el valor de la expresión.
*/
this.objectValue = function( expr, expand )
{
// true por defecto
expand = expand != false;
// Aquí se irá creando el resultado
var val = "";
try {
// Se obtiene la cadena del padre (para crear los posibles enlaces)
var sParent = this.getParentObject( expr );
// Función a llamar en los enlaces para ahorrar al escribir y espacio
var sEv = "window.top.document.dbgObject.evaluate";
// Se evalúa la expresión
var obj = eval( expr );
if( obj == undefined ) return undefined;
if( obj == null ) return null;
// Si se va a expandir y tiene padre, se crea el enlace
if( expand && (sParent != undefined) ) {
val += "<a href='javascript:"+sEv+"(\""+sParent+"\")'>[..]</a>";
}
// Obtener el valor según el tipo de objeto
switch( typeof( obj ) ) {
case "number":
case "boolean":
// Valor tal cual
val += "<code>" + obj + "</code>";
break;
case "string":
// Encerrarlo entre comillas
val += "<code>\"" + obj + "\"</code>";
break;
case "function":
if( expand ) {
// Cuerpo de la función
val += "[Function]<br>";
val += "<pre>"+obj+"</pre>";
} else {
// Enlace a la función
val += "<a href='javascript:"+sEv+"(\""+expr+"\")'>[Function]</a>";
}
break;
case "object":
{
val += "[Object]<br>";
if( expand ) {
// Valor del objeto
for( var v in obj ) {
val += "<br>"+v+"=" + this.objectValue( expr+"."+v, false );
}
} else {
// Enlace al objeto
val = "<a href='javascript:"+sEv+"(\""+expr+"\")'>[Object]</a>";
}
}
break;
}
} catch( e ) {
val = "*** ERROR<br><br>" + e;
}
return val;
}
/**
* @private
*
* Función que recoge el evento onsubmit.<br>
* Evalúa la expresión y muestra el resultado en la caja de texto.
*
* @param expr Expresión a evaluar.
*/
this.evaluate = function( expr )
{
this.win.document.frmDebug.cmd.value = expr;
var d = this.win.frames["ifrmOut"].document;
d.open();
d.writeln( this.objectValue( expr ) );
d.close();
}
}
Código enviado por
sésNotas del editor:
- no he puesto ela sintaxis coloreada porque uso HTML para ello y al tener fragmentos de HTML de por medio hay problemas
- intentaré poner el ZIP con el code y el HTML para descargar
[/list]
