Para quienes estamos iniciándonos en el desarrollo de PCFs (PowerApps Component Frameworks), el primer paso suele ser usar el entorno de pruebas que se abre ejecutando el comando npm start watch en la terminal de Visual Studio Code. Este entorno nos permite construir y probar nuestro componente, observando los cambios de forma casi instantánea.
No obstante, a medida que nuestros PCFs se vuelven más complejos, el entorno de pruebas empieza a mostrar ciertas limitaciones. Por ejemplo, no es posible realizar solicitudes a la Web API, la estilización CSS no siempre se corresponde con la de los entornos reales y desarrollar PCFs de tipo Dataset puede resultar difícil. En este punto, lo natural es trasladar el componente a nuestro entorno de desarrollo en CRM. Sin embargo, este enfoque tiene una desventaja importante: perdemos la capacidad de hacer cambios inmediatos, ya que para ver cada cambio es necesario volver a cargar el componente.
En este artículo, veremos cómo la herramienta Fiddler AutoResponder permite depurar en tiempo real directamente desde el entorno CRM, lo que facilita y acelera el proceso de desarrollo de PCFs.
Instalación de Fiddler
Para empezar, necesitamos instalar Fiddler Clasic. Después de descargar e instalar el archivo ejecutable, deberíamos ver el programa abierto y listo para configurarse, con una interfaz similar a esta:
Configuración de Fiddler
Una vez instalado Fiddler, configuraremos dos secciones: Certificados y AutoResponder.
Configuración de Certificados
Para que Fiddler pueda interceptar el tráfico HTTPS, sigue estos pasos:
-
En el menú superior, selecciona Tools y luego Options.
-
Dirígete a la pestaña HTTPS.
-
Activa la opción Decrypt HTTPS traffic y marca la casilla Ignore server certificate errors.
-
Haz clic en OK para guardar estos cambios.
Configuración de AutoResponder
Para configurar el AutoResponder, debemos tener nuestro componente ya cargado en el entorno CRM y con sus correspondientes parámetros de entrada correctamente configurados.
-
Abre Fiddler y navega a la aplicación donde se está utilizando el PCF.
-
Con Fiddler en ejecución, abre el inspector de tu navegador presionando F12 y fuerza una actualización del navegador vaciando la caché.
-
En Fiddler, busca el nombre del PCF. Deberían aparecer dos URLs relacionadas: una que contiene el archivo bundle.js y otra con el archivo .css, si tienes uno.
-
La URL de bundle.js corresponde al archivo compilado de nuestro PCF desde TypeScript.
-
La URL de .css hace referencia a los estilos definidos en nuestro archivo ControlManifest.xml.
-
Copia la URL de la siguiente manera para poder reutilizarla en cualquier entorno donde esté configurado el componente: /webresources/cc_<PCF Name>/bundle.js
-
Luego, dirígete a la sección AutoResponder en Fiddler:
-
Añade una nueva regla, pega la URL copiada en el campo correspondiente.
-
En el campo de archivo local (local file), selecciona el archivo bundle.js o .css desde la carpeta out.
¡Con estos pasos, Fiddler estará configurado para interceptar y sustituir el archivo en tiempo real!
Hacer Cambios en Tiempo Real
Para poder ver los cambios que realizamos:
-
En tu editor de código, ejecuta el comando npm start watch. Esto permitirá que, cada vez que realices un cambio, el componente se compile automáticamente, generando un nuevo bundle.js.
-
Para confirmar que los cambios se están cargando correctamente, añade algo fácilmente identificable en el código, como un alert o un debugger que se ejecute en la carga del PCF.
-
Después de realizar los cambios, vuelve a actualizar la página en el navegador.
Si el alert aparece o el debugger se activa, ¡significa que la configuración es correcta y el navegador está cargando los cambios que haces en tiempo real! Ahora podrás cambiar cualquier línea de código que necesites. Recuerda que estos cambios solo serán visibles mientras Fiddler esté abierto. Una vez que hayas finalizado, sube una nueva versión del PCF para que los cambios queden permanentes en el entorno.
Nota: Si necesitas modificar los parámetros de entrada del PCF, o realizar una modificación en el ControlManifest.xml, tendrás que cargar nuevamente el componente en el entorno CRM.
Espero que este artículo te haya sido de ayuda para agilizar el desarrollo de tus PCFs. ¡Gracias por leer y hasta la próxima!
