Trabajando con el depurador en Adobe Flex Builder

Muchos desarrolladores de Flash utilizan la clase Alert para la depuración o las declaraciones de seguimiento debido a las asociaciones con Flash. Flex tiene un verdadero depurador y es una gran herramienta. Voy a demostrar cómo enfrentarlo en este tutorial..

Introducción

Los errores del compilador son fáciles de detectar y corregir. Se le da un punto rojo con una X, que le indica dónde y cuál es el problema.

Los errores de tiempo de ejecución son más difíciles de rastrear. El depurador ayuda a los desarrolladores al rastrear los errores de tiempo de ejecución, dando una ventana para ver qué sucede mientras la aplicación se está ejecutando, qué valores están configurados, qué sucede dentro de un bucle o por qué la instrucción if no funciona.

Bien, empecemos, pero antes de comenzar, aquí hay algunas herramientas que necesitará:

La versión de depuración de Flash Player

Descarga esto aquí. Durante este tutorial, estoy usando "el depurador de contenido del complemento Macintosh Flash Player 10 (Macs con base Intel) (ZIP, 6.03 MB)". Para probar qué versión de Flash Player has instalado, echa un vistazo a esta útil herramienta de Peter DeHaan, quien por cierto tiene un gran blog;)

Ver tamaño completo

Adobe Flex Builder 3

Por supuesto, necesitarás esto. Si no lo tienes, siempre puedes obtener una copia gratis:

  • Gratis para todos los clientes de educación: https://freeriatools.adobe.com/Flex/
  • Gratis para desarrolladores desempleados: https://freeriatools.adobe.com/learnFlex/

Otras golosinas útiles

Muestras con código

  • http://examples.adobe.com/Flex3/componentexplorer/explorer.html
  • http://examples.adobe.com/Flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Referencia del lenguaje Adobe® Flex ™ 3.3

  • http://livedocs.adobe.com/Flex/3/langref/
  • http://livedocs.adobe.com/Flex/3/html/index.html

Notas

Las capturas de pantalla en este tut están hechas en Mac, pero deberían ser las mismas en la PC. La perspectiva de mi ventana puede ser diferente de la que ves, pero puedes encontrar todas las pestañas debajo del menú de la ventana.

Si estás listo, empecemos!

Paso 1: Configurar puntos de ruptura

He creado un nuevo proyecto Flex; Muy simple, un panel con dos botones. Cada botón llamará a su función de clic; b1_click () ejecutará un bucle, llame a la función update_Label (). b2_click () creará un error de tiempo de ejecución, ya que no existe el valor n_error.

/> Ver tamaño completo

¿Qué es un punto de quiebre?? Un punto de interrupción se establece en una línea ejecutable de un programa. Si el punto de interrupción está habilitado cuando depura, la ejecución se suspende antes de que se ejecute esa línea de código. Para suspender la aplicación mientras se está ejecutando, necesita establecer un punto de interrupción. Es facil de hacer; Haga doble clic en el espacio vacío al lado del número de línea. Haga doble clic en él de nuevo para eliminar.

Puse dos puntos de ruptura; líneas 10 y 20 (dos puntos azules aparecen en el margen). Si hago clic en el botón 1, se detendrá en la línea 10, haga clic en el botón 2 y se detendrá en la línea 20.

Puede ver todos sus puntos de ruptura en la pestaña "Puntos de ruptura" y se pueden agregar o eliminar en cualquier momento que desee. Además, puede usar las casillas de verificación para habilitarlas / deshabilitarlas temporalmente.

Si desea ver cómo cambia el número a lo largo del tiempo, resalte el valor, haga clic con el botón derecho, seleccione "Watch 'num'".

"Num" ahora se agrega a la pestaña Expresiones.

/> Ver tamaño completo

Paso 2: Iniciar el modo de depuración y verificar algunos valores

Ahora que tenemos todo configurado, comencemos la sección de depuración. Haz clic en el icono que parece un error.

/> Ver tamaño completo

o selecciónelo del menú:

/> Ver tamaño completo

Paso 3: Aplicación iniciada

A medida que la aplicación comienza a ejecutarse, puede verla en el navegador pero no pasa nada, ¿qué hacer a continuación? El punto de interrupción se establece dentro de la función, por lo que necesitamos ejecutar la función.

/> Ver tamaño completo

Paso 4: Activar el punto de interrupción

Para activar el punto de interrupción, haga clic en "Botón 1" para llamar a la función b1_click (). La aplicación se detiene en la línea 10 y el número sigue siendo 0 ya que el código "num + = 1;" no ha ejecutado todavia Mira la pestaña de depuración; Algunos iconos se iluminan y algunos valores ahora son visibles..

/> Ver tamaño completo

Paso 5: Ficha Variables

Primero echemos un vistazo a la pestaña Variables; algunas cosas a tener en cuenta:

  • Esta: incluye todos los valores en la aplicación
  • Evento: evento actual pasado en
  • yo: valor definido en esta función
/> Ver tamaño completo

Abre "esto", una larga lista se mostrará. La lista seguirá haciéndose más y más larga, entonces notará que su computadora se ralentiza;)

Paso 6: Crear expresión de reloj

Como sé que quiero centrarme en "button2.label", vamos a encontrarlo y hacer clic derecho para seleccionar "Crear expresión de observación".

Paso 7: Pestaña Expresión

Ahora eche un vistazo a la pestaña Expresiones, simple y limpia, tal como me gusta. Dos variables que estamos viendo ahora, "num" que creamos anteriormente, y "this.button2.label".

Paso 8: Usando los controles de paso

Ahora echemos un vistazo a la pestaña de depuración. En esta pestaña, verá que algunos iconos ahora están habilitados, una lista de nombres de funciones y nombres de componentes. La captura de pantalla a continuación muestra que actualmente estamos en la función myLoop y que el componente "button2" realizó una acción "clic" para llamar a esta función.

/> Ver tamaño completo

Paso 9: Aprender el controlador de pasos

Esos íconos que notamos (puedes encontrarlos en el menú> ejecutar también), ¿para qué sirven??

/> Ver tamaño completo

Cuando se suspende un hilo, los controles de pasos se pueden usar para avanzar en la ejecución del programa línea por línea.

A menudo, también puedes usar atajos - memorízalos!

  • Reanudar - la tecla F8 (no para el usuario de Mac) continúa ejecutando la aplicación.
  • Terminar: detiene el modo de depuración, la aplicación continuará ejecutándose, pero ya no podrás rastrear.
  • Paso a paso: tecla F6, vaya a la siguiente línea de código.
  • Paso a la tecla F5, si la línea de código actual está llamando a otra función, mire esa función.
  • Paso de retorno - tecla F7, sal de esa función.

F6 y F8 serán tus mejores amigos, recuérdalos.!

Paso 10: Usando la tecla F6

Presionemos F6 unas cuantas veces. Mantenga su ojo en la pestaña Expresión, vea a qué está cambiando el valor.

/> Ver tamaño completo

Paso 11: Cambio de valor

¡Sigue presionando F6! El valor de num está cambiando en la pestaña Expresiones.

/> Ver tamaño completo

Paso 12: Usando la tecla F5

Si su ciclo nunca termina, termina temprano o nunca comienza, puede observar la acción de cerca para ver qué está sucediendo. Una vez que hemos terminado el bucle, se llama a la segunda función update_Label (). Presionando F6 lo pisará, pero queremos ver que pasa dentro la update_Label (). Presione F5 "entrar".

/> Ver tamaño completo

Ahora estamos en la función update_Label ().

/> Ver tamaño completo

Paso 13: Usando la tecla F7

Puede presionar F7 para volver a myLoop (). El valor de "this.button2.label" ha sido cambiado.

/> Ver tamaño completo

Paso 14 Usando la tecla F8

Vamos a presionar F8 para reanudar la aplicación. Ahora la etiqueta de button2 ha sido actualizada.

/> Ver tamaño completo

Paso 15: Lee los mensajes de error en la sesión de depuración

OK, ahora vamos a probar el error en la aplicación. Sabemos que hay un error en la función b2_click (), así que vamos a verlo en acción. Haga clic en "Botón 2", esto llamará a la función b2_click (), y la aplicación se detendrá en el error.

/> Ver tamaño completo

Paso 16: Debug Tab

Eche un vistazo de cerca a la pestaña Depuración. Aquí te dice cuál es el error y quién llama..

/> Ver tamaño completo

Paso 17: pestaña de la consola

Esto es lo que se muestra en la pestaña Consola. Le proporciona más información sobre el error y el número de línea donde ocurrió el error..

/> Ver tamaño completo

Paso 18: Cambiar los valores de las variables

Siempre puede cambiar el valor de las variables mientras la aplicación está suspendida. Por ejemplo, si quiero cambiar button2.label de "num = 10" a "nueva etiqueta", hago lo siguiente: primero encuentro la variable "etiqueta", haga clic con el botón derecho y seleccione Cambiar valor.

Paso 19: Establecer ventana emergente de valor

Aparece la ventana Establecer valor y muestra el valor actual..

Paso 20: Ingrese un nuevo valor

Voy a cambiar esa cadena a "nueva etiqueta", luego presione OK.

Paso 21: Actualizar Nuevo Valor

Ahora en la pestaña Variables, se establece el nuevo valor..

Paso 22: Reanudar la aplicación

Reanudar la aplicación, verás que la etiqueta ha sido actualizada..

/> Ver tamaño completo

Conclusión

Bien, ahora sabes cómo usar el depurador! Aquí hay un breve resumen:

  • Haga doble clic en Crear un punto de interrupción..
  • Haga clic en el icono de error para iniciar el modo de depuración.
  • Activar la acción para suspender la aplicación..
  • La pestaña Variables te dice cuál es el valor.
  • La pestaña de la consola le indica qué y dónde está el error (si corresponde).
  • La pestaña de depuración le dice quién llamó a quién y quién hizo qué.
  • Luego espera que le digas qué acción tomar.

Si cree que está listo para probar sus habilidades de depuración ahora, inténtelo en su propia aplicación!

Un último consejo para aquellos que son nuevos en Flex: recuerde siempre exportar una versión de lanzamiento, no la versión de depuración que es mucho más grande. Espero que hayas disfrutado leyendo!