Depurar scripts en una historia mejorada

Esta demostración le mostrará el proceso de depuración de principio a fin utilizando uno de los escenarios utilizados en este curso. Después del video, verás que hemos resumido los temas clave y la teoría cubierta en el video para ti.

En caso de que desee saber qué parte de su código se procesa o qué valor contiene una variable, puede utilizar el comando console.log(argument); en tiempo de diseño. El argumento puede ser cualquier tipo de datos de una cadena simple a una matriz compleja.

En el tiempo de ejecución, abra la barra de herramientas del desarrollador del navegador y verifique la pestaña Consola. Utilice la funcionalidad de filtro para concentrarse en las entradas de Infotipo.

Cuando se ejecuta el script, escribe los argumentos en el log de la consola.

Este enfoque puede ser útil para escenarios pequeños. Sin embargo, a mayor escala, el enfoque se vuelve engorroso, especialmente porque debe eliminar los registros de consola innecesarios cuando sea productivo con su historia.

Para ver los scripts que ha escrito en su historia, ejecute la historia y abra las herramientas de desarrollo del navegador web.

1. Seleccione la pestaña Fuentes.
2. En el nivel superior del árbol de ficheros, busque la entrada que empieza por sandbox.worker.main.
3. En AnalyticApplication, busque la carpeta con el nombre de su historia.
4. Los scripts ejecutados en la historia se encuentran en esta carpeta (los scripts deben ejecutarse al menos una vez para que aparezcan en la lista).

Los nombres de script siguen un esquema específico: <WIDGET_NAME>.<FUNCTION_NAME>.js. Los scripts se agrupan en una carpeta llamada <STORY_NAME>.

Los elementos de los nombres de los scripts tienen el siguiente significado:

Por ejemplo, si define un script para el evento onInitialization de Page_1, WIDGET_NAME se fija automáticamente en Page_1.

Una URL válida de una historia en tiempo de ejecución con el modo de depuración activado tiene el siguiente aspecto: http://<HOST>:<PORT>/sap/fpa/ui/app.html?tenant=<TENANT_NAME>#;mode=present;view_id=appBuilding;appId=<APPLICATION_ID>&debug=true.

Para mostrar que el script que se muestra actualmente es el que está en modo debugging, se añade el apéndice "-dbg" al nombre del script.

En la siguiente figura, puede ver:

1. Un breakpoint manual
2. El botón Reanudar ejecución de script
3. Variables de script locales

En la depuración, puede añadir breakpoints manuales. Siga estos pasos para fijar un breakpoint en su script:

1. Abra el script que desea pausar durante su ejecución y, en la parte izquierda del script abierto en las herramientas de desarrollo, haga clic en el número de línea en el que desea que se detenga el script.

   Aparece un marcador azul que resalta el número de línea. Esto indica que el script se pausa aquí la próxima vez que se ejecute.

2. Opcional: Añada más breakpoints en el mismo script para pausar el script en diferentes puntos durante su tiempo de ejecución.

Para reinicializar un breakpoint, haga clic en el marcador que desea eliminar. La ejecución del script no se detiene en este punto la próxima vez que se ejecute el script.

En el modo de depuración, puede utilizar la declaración debugger; en sus scripts.

Esta sentencia emula la creación de un breakpoint en su script. No es necesario fijar explícitamente un breakpoint en un script que se deba depurar, pero el script detiene automáticamente su ejecución en cuanto se interpreta la sentencia debugger; en su script.

Esto le permite verificar en tiempo de diseño los puntos en los que el script debe detenerse durante el tiempo de ejecución.

Cuando el depurador se detiene en un breakpoint, encontrará todas las variables de script locales juntas en la pestaña Fuentes de la sección Local.

Las variables de script globales se pueden añadir a la pestaña Consola. Debe escribir manualmente los que desea ver. La sintaxis sigue la regla: this.$$.NAMEOFVARIABLE.