Depure los recursos web de JavaScript mediante Local Overrides

Al desarrollar y depurar recursos web de JavaScript que se usan como controlador de eventos en una aplicación controlada por modelos, normalmente es necesario realizar varios cambios y probar cómo funcionan. La carga y publicación del recurso web después de cada cambio ralentiza este proceso.

Las herramientas modernas para desarrolladores del explorador proporcionan funcionalidades para guardar una copia local del recurso web. Cuando la aplicación basada en modelos solicita el recurso web, el explorador carga tu copia local en lugar del archivo desde el servidor. Puede editar la copia local, actualizar la página y probar los cambios sin cargar y publicar repetidamente el recurso web. No es necesario instalar software proxy, extensiones de explorador ni certificados.

Obtenga más información sobre cómo los exploradores modernos proporcionan estas funcionalidades.

Important

Una anulación local solo cambia el recurso cargado por el explorador. No actualiza el recurso web de JavaScript en Microsoft Dataverse y otros usuarios no ven los cambios. Después de finalizar la solución de problemas, copie los cambios que desea mantener en el archivo de origen y use el proceso normal para actualizar y publicar el recurso web. En este artículo no se describe ese proceso.

Prerequisites

Antes de empezar:

  • Necesita una aplicación basada en modelos que tenga un recurso web de JavaScript que se use para proporcionar controladores de eventos para un formulario.

    En este artículo se usa el recurso web de JavaScript descrito en Escritura del primer script de cliente. Ese tutorial crea un recurso web de JavaScript denominado example_form-script.js, lo agrega al formulario Account y registra funciones para los eventos On Load y On Save del formulario y el evento On Change de la columna Name.

    Note

    Puede descargar el JavaScriptWebResourceExampleSolution_1_0_managed.zip. Instale esta solución administrada y encontrará una aplicación basada en modelos que represente el resultado completo del artículo Escritura del primer script de cliente.

  • En este artículo se usan Microsoft Edge, pero las herramientas de desarrollo de Google Chrome, Firefox y Safari tienen funcionalidades similares.

  • Cree una carpeta vacía en el equipo para que Microsoft Edge DevTools almacene sobrescrituras locales. No use una carpeta que contenga archivos de origen, credenciales, certificados u otra información confidencial. DevTools crea la estructura de carpetas que necesita dentro de esta carpeta. En este artículo se usa C:\temp\overrides , pero es posible que quiera usar C:\Users\<your user name>\overrides.

En este artículo se usa este script de Escribe tu primer script de cliente:

// Define a unique namespace for the sample library.
window.Example ??= {};

(() => {
    const notificationId = "_myUniqueId";
    const currentUserName = Xrm.Utility.getGlobalContext().userSettings.userName;
    const message = `${currentUserName}: Your JavaScript code in action!`;

    // Code to run in the form OnLoad event
    window.Example.formOnLoad = (executionContext) => {
        const formContext = executionContext.getFormContext();

        // Display the form level notification as an INFO
        formContext.ui.setFormNotification(message, "INFO", notificationId);

        // Wait for 5 seconds before clearing the notification
        window.setTimeout(
            () => formContext.ui.clearFormNotification(notificationId),
            5000
        );
    };

    // Code to run in the column OnChange event
    window.Example.attributeOnChange = (executionContext) => {
        const formContext = executionContext.getFormContext();

        // Automatically set some column values if the account name contains "Contoso"
        const accountName = formContext.getAttribute("name").getValue();
        if (accountName?.toLowerCase().includes("contoso")) {
            formContext.getAttribute("websiteurl").setValue("https://www.contoso.com");
            formContext.getAttribute("telephone1").setValue("425-555-0100");
            formContext.getAttribute("description").setValue("Website URL, Phone and Description set using custom script.");
        }
    };

    // Code to run in the form OnSave event
    window.Example.formOnSave = () => {
        // Display an alert dialog
        Xrm.Navigation.openAlertDialog({ text: "Record saved." });
    };
})();

Este recurso web de JavaScript proporciona tres funciones registradas para los siguientes eventos:

Function Event
Example.formOnLoad Form OnLoad
Example.attributeOnChange campo OnChange
Example.formOnSave Formulario OnSave

Los pasos también funcionan con cualquier recurso web de JavaScript registrado como controlador de eventos de formulario. Utilice el nombre del recurso web y desencadene su evento cuando los pasos hagan referencia al ejemplo.

Confirma que el script publicado funciona

Antes de crear una anulación, confirme el comportamiento actual del recurso web publicado:

  1. Abra la aplicación basada en modelos en Microsoft Edge.

  2. Abra un registro de cuenta existente o cree uno nuevo.

  3. Confirme que aparece una notificación de formulario similar al siguiente mensaje durante cinco segundos:

    <Your Name>: Your JavaScript code in action!

Este paso confirma que el formulario carga el recurso web y llama al controlador del evento Example.formOnLoad.

Configurar anulaciones locales

Solo tiene que seleccionar una carpeta de Overrides la primera vez que use Overrides locales en un perfil del navegador Microsoft Edge.

  1. Con el formulario de cuenta abierto, presione F12 o Ctrl+Mayús+I para abrir DevTools.

  2. Seleccione la herramienta Sources.

  3. En el panel Navegador, seleccione la pestaña Sustituciones. Si la pestaña no está visible, seleccione Más pestañas y, a continuación, seleccione Sustituciones.

  4. Seleccione Seleccionar carpeta para anulaciones.

  5. Seleccione la carpeta vacía que creó para anulaciones y, a continuación, seleccione Seleccionar carpeta.

  6. Cuando DevTools solicita acceso completo a la carpeta, seleccione Permitir.

    Captura de pantalla del mensaje de DevTools que solicita acceso completo a la carpeta Invalidaciones locales.

  7. Confirme que Habilitar invalidaciones locales esté seleccionado.

    Captura de pantalla de la pestaña Anulaciones de la herramienta Orígenes después de seleccionar una carpeta de anulaciones, en la que se muestra la opción Habilitar anulaciones locales seleccionada.

Habilitar bypass de red para service workers

Important

Habilitar Bypass for network garantiza que las invalidaciones locales de DevTools se aplican evitando que los Service Workers atiendan respuestas almacenadas en caché. Si no realiza este paso, las anulaciones locales no funcionarán con aplicaciones basadas en modelos.

  1. En DevTools, seleccione la pestaña Application.

    Si la pestaña no está visible, seleccione + (Más pestañas) y, a continuación, Aplicación.

  2. En el panel de navegación izquierdo, seleccione Service Workers.

  3. Seleccione Omitir para la red para obligar a las solicitudes a omitir el Service Worker y usar la red en su lugar.

    Captura de pantalla del panel Service Workers con Bypass for network seleccionado.

  4. Actualice la página para aplicar el cambio.

Creación de una anulación para el recurso web

Use la herramienta Red para encontrar el archivo JavaScript cargado por el formulario de cuenta:

  1. Seleccione la herramienta Red .

  2. Si la actividad de red no se está grabando, seleccione Registrar el registro de red.

  3. Actualice la página para que el formulario cargue de nuevo el recurso web.

  4. En el cuadro Filtro , empiece a escribir el nombre del recurso web, como: example_form-script.js.

  5. En la lista de solicitudes de red, haga clic con el botón derecho en example_form-script.js y, a continuación, seleccione Reemplazar contenido.

    Captura de pantalla de la herramienta Network filtrada para example_form-script.js con el comando Override content seleccionado.

  6. Seleccione la herramienta Orígenes y, a continuación, seleccione la pestaña Sobrescrituras.

  7. Expanda las carpetas creadas por DevTools y, a continuación, seleccione example_form-script.js.

    Captura de pantalla de example_form-script.js en la pestaña Anulaciones con el indicador de anulación púrpura.

    DevTools copia el recurso web en la carpeta overrides. Un punto púrpura en el icono de archivo indica que DevTools ha sobrescrito el recurso.

Tip

También puede crear la anulación desde la pestaña Página de la herramienta Fuentes. Busque el recurso web, haga clic con el botón derecho en él y seleccione Sobrescribir contenido.

Compruebe que Microsoft Edge carga la copia local

Realice un cambio fácil de reconocer para que pueda confirmar que la anulación funciona:

  1. En el editor de DevTools, busque la siguiente línea:

    const message = `${currentUserName}: Your JavaScript code in action!`;

  2. Reemplácela por esta línea:

    const message = `${currentUserName}: Local override in action!`;

    Note

    Si intenta pegar código en el editor de DevTools, verá este cuadro de diálogo. Debe escribir allow pasting y seleccionar Permitir para continuar. Este cuadro de diálogo no aparece si escribe cambios directamente.

    Captura de pantalla del cuadro de diálogo de advertencia al pegar de DevTools con el botón Permitir.

  3. Cambie la duración de la notificación de 5000 a 15000.

  4. Presione Ctrl+S para guardar el archivo local.

  5. Actualizar el formulario de cuenta.

  6. Confirme que la notificación muestra ¡Anulación local en curso! y permanece visible durante 15 segundos.

    Captura de pantalla de la notificación del formulario de cuenta que muestra la anulación local en acción.

El mensaje y la duración modificados confirman que Microsoft Edge cargó la anulación local en lugar del recurso web publicado.

Depura los controladores de eventos

Después de confirmar que la anulación funciona, use el depurador DevTools para investigar el script.

Depurar el evento OnLoad del formulario

  1. En la herramienta Sources, abra el archivo sobrescrito example_form-script.js.

  2. Seleccione el número de línea de esta instrucción para establecer un punto de interrupción:

    Captura de pantalla del editor DevTools con un punto de interrupción en el controlador de eventos Example.formOnLoad.

  3. Actualizar el formulario de cuenta.

  4. Cuando la ejecución del script se pausa, use el panel Scope para inspeccionar executionContext y formContext.

    Captura de pantalla del panel Ámbito de DevTools que muestra los valores executionContext y formContext.

  5. Recorra la función y observe la llamada a setFormNotification.

  6. Seleccione Reanudar ejecución de script para continuar.

Depurar el evento OnChange de Nombre de cuenta

  1. Establezca un punto de interrupción en esta instrucción Example.attributeOnChange:

    const accountName = formContext.getAttribute("name").getValue();

  2. En el formulario de cuenta, cambie Nombre de cuenta y, a continuación, mueva el foco fuera de la columna para desencadenar el evento On Change.

  3. Cuando la ejecución se detiene, inspeccione el valor de accountName.

    Captura de pantalla de DevTools en pausa en el controlador de eventos Example.attributeOnChange al inspeccionar accountName.

  4. Use un nombre de cuenta que contenga Contoso y recorra la función para observar cómo establece el script los valores de sitio web, teléfono principal y descripción.

Depurar el evento OnSave del formulario

  1. Establezca un punto de interrupción en la instrucción Xrm.Navigation.openAlertDialog en Example.formOnSave.

  2. Guardar el registro.

  3. Cuando la ejecución se detiene, inspeccione la pila de llamadas para confirmar que el evento On Save del formulario llamó a la función esperada.

    Captura de pantalla de la pila de llamadas del depurador DevTools en pausa en el controlador de eventos Example.formOnSave.

  4. Reanude la ejecución del script y confirme que se abre el cuadro de diálogo de alerta.

Puede editar y guardar la anulación siempre que quiera probar una posible corrección. Actualice el formulario para probar los cambios en el código que se ejecuta cuando se carga el formulario. Active el evento del formulario o de la columna pertinente para probar otros controladores de eventos. Use la herramienta Console para revisar los errores y la salida del registro.

Compare la sobrescritura con el recurso web publicado

Para confirmar si un problema se debe a los cambios locales:

  1. En la herramienta Sources, seleccione la pestaña Overrides.
  2. Desmarque las invalidaciones locales.
  3. Actualice el formulario de cuenta y vuelva a probar el evento.

Microsoft Edge ahora carga el recurso web publicado desde el servidor. Seleccione Activar anulaciones locales y actualice el formulario para reanudar con la copia local.

Finalizar la resolución de problemas

Los archivos de anulación local no están conectados al recurso web en Dataverse ni a los archivos de origen de la solución.

  1. Copie los cambios que desea mantener del archivo de reemplazo en el archivo de origen que use para mantener el recurso web.
  2. Use el proceso de desarrollo e implementación normales para actualizar y publicar el recurso web de JavaScript.
  3. Pruebe el recurso web publicado con Habilitar reemplazos locales desactivado.
  4. Cuando ya no necesite la configuración de anulación, seleccione Borrar configuración en la pestaña Anulaciones.

Caution

No trate el archivo en la carpeta overrides como el archivo de origen del recurso web. Conserve los cambios que desee conservar antes de borrar la configuración o eliminar los archivos de sobrescritura local.

Solucionar problemas de anulaciones locales

A continuación se muestran los problemas que pueden surgir al usar invalidaciones locales.

El recurso web no aparece en la herramienta Red

Confirme que la herramienta de red está grabando, borre los filtros y actualice el formulario. El formulario debe cargar el recurso web antes de que aparezca. Confirme también que la biblioteca de JavaScript se agrega al formulario y que se publican las personalizaciones del formulario.

El comando Sobrescribir contenido no está disponible

Vuelva a la herramienta Sources y confirme que seleccionó una carpeta de overrides, permitió que DevTools acceda a ella y seleccionó Enable Local Overrides. A continuación, actualice el formulario e inténtelo de nuevo.

El formulario sigue usando el script publicado.

Mantenga abierto DevTools, confirme que Enable Local Overrides está seleccionado y compruebe que el recurso web tiene un punto púrpura en la herramienta Red o Orígenes. Guarde la anulación y actualice el formulario.

No se alcanza un punto de interrupción

Confirme que ha establecido el punto de interrupción en el archivo sobrescrito y que aparece habilitado. Desencadene el evento asociado a esa función: actualice el formulario para Al cargar, cambie la columna configurada para Al cambiar o guarde el registro en Al guardar. Compruebe también la herramienta Consola en busca de un error de sintaxis que impida que el script se cargue.

  • Se actualizó por última vez el