Introducción
Existen diferentes niveles para solucionar problemas de su Widget o para depurarlo.
Antes de solucionar problemas en Bizagi, debe asegurarse de lo siguiente:
1. El código funciona como tal, por fuera de Bizagi
Esto implica que previamente haya visto el código funcionar en un archivo demo.html de manera previa y separada de Bizagi.
2. El Widget se simula correctamente dentro del Widget Editor
Observe que cuando crea un Widget a través del Widget Editor, usted tiene la posibilidad de simular el comportamiento tal cómo sería en Bizagi.
A través de la opción de simulación, observe que las herramientas de la misma proveen una consola integrada que imprime los mensajes de error que se presenten cuando se ejecuta el Widget.
Para más información, consulte Simulación de su Widget.
Aspectos adicionales por considerar
Si ya desea solucionar un problema puntual del Widget dentro de Bizagi, considere los siguientes aspectos para acotar donde el problema puede estar.
1. ¿El archivo BWG es consistente?
Una vez genere un Widget como un archivo .bwg, asegúrese de que no se presenten errores cuando instale su Widget en su proyecto de Bizagi.
Esta acción se realiza registrando el Widget en Bizagi Studio y asegurándose de que en este paso no se muestre ningún mensaje de error (sea ingresándolo o actualizándolo).
Si se presentan errores, es muy probable que necesite revisar la estructura de su Widget asegurándose de que todos los archivos referenciados son importados.
2. ¿Carga en el Diseñador de Formas?
Después de una instalación exitosa de su Widget, asegúrese de que se muestra apropiadamente cuando se incluye en una de sus formas (a través del Diseñador de Formas).
Al incluir el Widget (esto es, arrastrándolo y soltándolo) en la forma, usted podrá ver:
•Que la forma presenta inmediatamente el Widget que debería dibujar.
Aunque los comportamientos dinámicos (como los eventos on-clic) no estén disponibles, Bizagi mostrará en la forma. un espacio reservado por el Widget
•Que el panel de las propiedades cargue correctamente todas las propiedades definidas para la configuración del Widget durante la etapa de diseño.
Si incluyó el Widget y el Diseñador de Formas se congela, no lo muestra apropiadamente o se altera el diseño del resto de componentes del Diseñado de formas, entonces significa que el Widget tiene errores y algo dentro de su información no está funcionando como se espera.
Esto puede ser causado por: definición incompleta de sus propiedades o una implementación defectuosa (un solo error en una línea de código puede generar estas alteraciones).
En este caso, no guarde la forma.
Usted también puede borrar el Widget instalado y cargarlo nuevamente con los ajustes necesarios, iterando las veces que sea necesario en ajustes y validaciones sobre la simulación que provee el Widget Editor.
3. ¿Se muestra en tiempo de ejecución, o en la simulación del Editor, pero no hace lo que debería?
Finalmente y una vez que tenga la certeza de que el Widget por lo menos se visualiza apropiadamente, usted podrá probarlo en el Portal de Trabajo.
Esto también aplica si dentro de la simulación del Widget, no se realiza lo esperado pero tampoco contiene errores de sintaxis.
|
Tenga presente que usted podrá utilizar las mismas opciones de depuración y para desarrolladores (tal como se activan frecuentemente con la tecla F12, y como se describe a continuación) que ya incluyen las mismas trazas de console.log() que se escriben directamente en la consola de JS del navegador (soportado en Chrome y Mozilla)
|
Al probarlo directamente en el Portal de Trabajo, recomendamos que se apoye en las opciones de debug para probar y solucionar problemas de los Widgets.
Se sugiere enfáticamente el uso de Google Chrome para este propósito, debido a las facilidades que presenta.
Por ejemplo, puede incluir la clausula debugger dentro de la líneas de código, de tal manera que cuente con una forma rápida de adicionar puntos de depuración (breakpoints).
Simplemente abriendo la consola de las herramientas de desarrollador del navegador (p.ej, usando F12 en Chrome), usted podrá llegar directamente a dichos puntos de depuración:
Alternativamente y si desea depurar el Widget dentro del navegador, sea ya como parte de su proyecto de Bizagi o desde el Editor de Widgets, siga estos pasos:
1. Incluya al final del archivo de implementación del Widget, una línea con lo siguiente:
//# sourceURL=MyWidget.js
2. Asegúrese de crear el archivo del Widget, inclúyalo en su proyecto y configure su uso debidamente en una forma de actividad.
Luego, ejecute el proceso para visualizarlo sobre Chrome.
Para mayor información sobre estos pasos, consulte la Administración de Widgets.
3. Utilice las herramientas de depuración para desarrolladores presionando F12, sobre la ejecución del Widget en Chrome (específicamente en la actividad del proceso donde se tiene el Widget configurado).
4. Vaya a la pestaña de fuentes (Sources) para abrir el archivo fuente que contiene su implementación.
Podrá abrir el archivo fuente MyWidget.js presionando CTRL + P (o CTRL + O) e ingresando el nombre MyWidget.js :
Al hacer clic sobre el resultado de MyWidget.js, se cargará el código de su implementación.
5. Ubique breakpoints como usted lo considere apropiado, en la primera línea (o en cualquier línea) dentro la función que despliega su Widget.
Recuerde que la función que se llama al momento de desplegar el Widget será: getEditableControl, getReadOnlyControl, getGenericControl, o renderComplex de acuerdo a su escenario (si el Widget se configuró como editable, no-editable o si es indiferente).
Una vez que cuente por lo menos con un breakpoint, dé clic sobre el ícono de refrescar ubicado en la esquina derecha superior, de manera que solamente se refresque la forma en la que ya está ubicado.
Tan pronto se realice un refresco, verá que Chrome hace una pausa de la ejecución sobre el breakpoint para que usted pueda utilizar las opciones de step-over y step-into para depurar paso a paso.
|
Recuerde que en cualquier momento, podrá también digitar directamente en la consola JS el signo de jQuery ($) seguido de un punto, para así ver las opciones que presenta el intelliSense y verificar que la librería de jQuery se haya cargado para evitar conflictos:
|
Se recomienda que esté o vaya a estar familiarizado con la depuración del navegador y demás opciones de desarrollo, para poder diagnosticar problemas específicos de su Widget y que reconozca que la opciones de depuración deben ser únicamente temporales (necesita asegurarse de que sean retiradas posteriormente).
Un Widget final liberado a producción nunca debe incluir dichas clausulas debido a buenas prácticas de seguridad y desempeño.
Opciones adicionales y mayor información puede ser consultada directamente en enlaces externos de la ayuda de Chrome, como por ejemplo:
https://developer.chrome.com/devtools/docs/javascript-debugging.
Importante
Los cambios que realice sobre el Widget y que desee probar en Bizagi directamente, requieren que refresque el navegador.
Last Updated 1/10/2023 3:18:08 PM