Depuración
Herramientas de depuración
Los desarrolladores con AWE cuentan con algunas herramientas interesantes que facilitan su trabajo
Depuración del servidor
Para depurar el lado servidor de un proyecto de aplicación web, normalmente trabajamos con el depurador integrado del IDE (Netbeans, Eclipse, IntelliJ, Visual Studio Code). Esta guía le mostrará cómo depurar en Eclipse
Para iniciar el servidor en modo depuración podemos hacer clic derecho sobre el servidor y elegir la opción de depurar.
Podemos añadir un punto de interrupción en cualquier lugar del código haciendo clic derecho en el margen y eligiendo alternar/añadir punto de interrupción.
Para más información sobre depuración consulte la documentación de eclipse:
- IntelliJ
- Eclipse
- Netbeans
- Visual Studio Code
Depuración del navegador
Podemos ver el flujo de información entre el servidor y el cliente pulsando la tecla F12 y entrando en la pestaña de red. Hay algunas opciones útiles allí, pero nos centraremos en WS (WebSocket)
En el siguiente ejemplo se muestran las interacciones entre el servidor y el cliente, y podemos buscar dentro de la estructura JSON para ver toda la información y las variables.
Podemos ver la acción que el servidor envió al cliente, en este caso una acción de tipo fill con los parámetros adjuntos
Angular JS Batarang
Angular JS Batarang es una extensión para navegadores que añade herramientas para depurar y analizar el rendimiento de aplicaciones AngularJS.
Extensión de Chrome Angular JS Batarang
Esta extensión nos permite ver la información del scope de angular. El scope es la parte de enlace entre el HTML (vista) y el JavaScript (controlador). Una vez instalada la extensión, al pulsar F12 y acceder a la pestaña de elementos podemos ver la nueva opción $scope.
La información que se muestra allí contiene todos los métodos y parámetros de JavaScript, en formato JSON.
Podemos seleccionar un elemento de la ventana haciendo clic en la opción de inspeccionar para ver toda la información del scope relativa únicamente a ese elemento. En chrome la opción es la siguiente:
En este ejemplo seleccionamos un grid que contiene información de usuarios. Entre todas las opciones podemos ver la información del controller, como los atributos del grid, los tipos de variables...
También es interesante ver la opción model, ya que contiene los propios datos.
Logs
Logs del servidor
Para buscar en los logs del servidor podemos usar las herramientas que proporciona Eclipse. Una vez que el servidor está en ejecución, los logs aparecerán en la pestaña Console. Cada acción que ejecuta el servidor se mostrará aquí, como las consultas SQL.
En el siguiente ejemplo tenemos un grid que muestra información de la tabla de usuarios, y un criterio que filtra ese grid ejecutando una consulta SQL asociada a él:
Una vez que pulsamos el botón de búsqueda, el servidor ejecutará la consulta SQL y el log de la consola la mostrará:
En este caso podemos ver la fecha y la hora en que se ejecutó la acción, así como el usuario, la pantalla, el identificador de la consulta y la consulta SQL completa.
Los valores sensibles se enmascaran como '********': los valores de las variables con hash o cifradas (STRING_HASH_*, STRING_ENCRYPT) y los valores escritos o comparados con las columnas de awe.database.log-masked-fields (por defecto l1_pas). La sentencia que se ejecuta conserva los valores reales.
Consola del navegador
Para buscar en la consola del navegador, pulse la tecla F12 y haga clic en la pestaña Console.
Acciones
En esta pestaña podemos ver las acciones que tienen lugar en el lado cliente, junto con los tiempos que tardan y los parámetros enviados al servidor. En este ejemplo hay una acción fill, utilizada para rellenar un grid con datos de una consulta.
Dependencias
En el siguiente ejemplo tenemos un grid y un botón de ver con una dependencia asociada. La dependencia comprueba si el número de filas seleccionadas no es igual a 1. Si la condición es verdadera, el botón de ver se oculta. En caso contrario, el botón se activa.
Como solo hay una fila seleccionada, el resultado de la condición es falso, por lo tanto, el botón no se oculta.
