Stratos: Punto de Encuentro de Desarrolladores

¡Bienvenido a Stratos!

Acceder

Foros





Js Debugger

Iniciado por ethernet, 29 de Septiembre de 2004, 02:19:43 PM

« anterior - próximo »

ethernet

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

 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

 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?
Soy indeciso... ¿o no?

Zaelsius

 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

 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 ^_^
Soy indeciso... ¿o no?

Zaelsius

 
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

 JavaScript sux  (nooo)

No hay debugger en el IE, verdad?  :(  
hat the hells!

CodeWarrior

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]

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...
José Miguel Sánchez Fernández
.NET Developer | Game Programmer | Unity Developer

Blog | Game Portfolio | LinkedIn | Twitter | Itch.io | Gamejolt

benekid

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
FlameStudios - Diseño y Programación de Videjuegos
www.flame-studio.com
CEO & Founder
__________ _ _ _ _    _

CreaGamers - Tutoriales desarrollo videojuegos
www.creagamers.es
CEO & Founder

tamat

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

Hechelion

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

Harko

-=Harko´s Blog=-
Fui el primer civil en probar el "Lord of Creatures" y ademas usaban mis cascos. :D

-=Portfolio=-

Alguno de mis juegos:
-=Feed The Frog=-

Neroncity






Stratos es un servicio gratuito, cuyos costes se cubren en parte con la publicidad.
Por favor, desactiva el bloqueador de anuncios en esta web para ayudar a que siga adelante.
Muchísimas gracias.