Js Debugger

ethernet · 29 de Septiembre de 2004, 02:19:43 PM

JS Debugger


<script language="JavaScript" src="Debug.js"></script>

Para depurar la página solo hay que ejecutar el siquiente comando

Código [Seleccionar]


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:

Código [Seleccionar]


<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:

Código [Seleccionar]


/**
 * 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és

Notas 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]

Zaelsius · 29 de Septiembre de 2004, 03:06:04 PM

COTW muy interesante! Por fin otro código de la semana, ya se echaba en falta. Como puede verse, no hace falta que esté relacionado directamente con juegos, ya que esto es algo que nos puede venir bien a la mayoria. A ver si la gente se anima más.

Gracias Sés! ;)

Ahora mi alternativa habitual, algo diferente:

Si usais Mozilla, podeis abrir el depurador de JavaScript desde el menú "Tools/Web Development/JavaScript Console". Aunque no tiene la navegación de propiedades del código de Sés(buena idea), sirve fundamentalmente para probar expresiones y poder localizar los errores JavaScript que ocurren al mostrar las páginas en el navegador(Mozilla).

PD: Pues sí que estaria bien colgar el zip con el código para que la gente lo pueda probar con 3 clicks, y tener que ir copiando y pegando código :rolleyes: .

sés · 29 de Septiembre de 2004, 03:11:36 PM

Gracias :)

Bueno... he trasteado poco con la consola Javascript de Mozilla pero... ¿cómo puedes ver el valor de algún elemento de una página? Que yo haya visto solo ejecuta código Javasript, pero no de ninguna página que tengas abierta.

Si abro mi página de ejemplo con Firefox y abro la consola, ¿se puede ver el valor de "miobjeto" o llamar a alguna función de la página?

Zaelsius · 29 de Septiembre de 2004, 03:34:15 PM

Como he dicho en el primer post, yo la uso sólo para probar expresiones y ver errores.. pero bueno, aquí va la artilleria pesada:

El JavaScript Debugger de Mozilla:

Disponible en el menú "Tools/Web Development/JavaScript Debugger". Si no lo encontráis es probable que no lo seleccionarais en el modo de instalación personalizada.

Permite realizar todas las tareas de un depurador convencional, como consulta de variables, trazado de pila, breakpoints, etc.

Edit: Aun así, me apunto tu código Sés, ya que en Internet Explorer no hay tantas facilidades, y el código JavaScript se suele mostrar escurridizo en dicho navegador <_< .

sés · 29 de Septiembre de 2004, 03:47:46 PM

Eh... :D

Sigo sin ver dónde puedo evaluar expresiones más complejas que "1 + 1". ¿Cómo puedo ver con eso "miobjeto" o el valor de alguna de sus propiedades? ¿Cómo llamo a una función de mi página?

Dicho de otra forma, ¿cómo ejecuto cualquier comando sobre mi página?

Por lo que veo, está bien para seguir paso a paso la ejecución, pero una vez cargada la página no veo que se pueda hacer más. Pero vamos... que es la primera vez que trasteo con eso ^_^

Zaelsius · 29 de Septiembre de 2004, 04:29:59 PM

He actualizado la imagen, he abierto la ventana para introducir comandos. Se pueden consultar o modificar variables, y ejecutar cualquier comando. En la captura he hecho un document.writeln("hola"), mostrándose el mensaje "hola" en la ventana del navegador. Tambien se puede abrir una ventana de navegación dentro del propio entorno, pero a mí no me cabe :( .

Grugnorr · 29 de Septiembre de 2004, 07:28:28 PM

JavaScript sux (nooo)

No hay debugger en el IE, verdad? :(

CodeWarrior · 26 de Marzo de 2010, 09:11:00 AM

Si que existe pulsa la tecla f12 y es muy parecido al firebug del mozilla. Solo funciona a partir de la versión +IE7

[EX3] · 26 de Marzo de 2010, 09:51:53 AM

Cita de: CodeWarrior en 26 de Marzo de 2010, 09:11:00 AM
Si que existe pulsa la tecla f12 y es muy parecido al firebug del mozilla. Solo funciona a partir de la versión +IE7

Hace 6 años creo que no existia IE7 :P Revisa la fecha de la ultima respuesta antes de contestar ;)

Salu2...

benekid · 14 de Julio de 2010, 04:55:36 AM

Muy interesante... para muchas personas, (me incluyo) les será muy util este .js

Soy programador web en mis ratos libres y acostumbro a poner mucha "mierda" de JavaScript, me gusta ofrecer un buen "diseño" y esto se optiene o por flash o javascript... y me decanto mas por lo segundo, por mero favoritismo.. jajajaja

Desde luego lo descagaré y probaré, en Chrome tambien hay varias extensiones de Debugger de JS, pero bueno, prefiero tener yo el control ;)

de nuevo, gracias

tamat · 14 de Julio de 2010, 11:51:44 AM

si bueno, el post es de hace 6 años y ahora hay ya extensiones increibles como Firebug que hacen de todo.

Hechelion · 15 de Julio de 2010, 07:48:35 AM

Este post hay que leerlo mientras se escucha Thriller de Mickeal Jacson de fondo. >:D

Harko · 15 de Julio de 2010, 10:01:21 AM

Viva el Necroposting :D

Foros

Js Debugger