Debuggen von JavaScript-Webressourcen mit Local Overrides

Wenn Sie JavaScript-Webressourcen entwickeln und debuggen, die Sie als Ereignishandler in einer modellgesteuerten App verwenden, müssen Sie in der Regel mehrere Änderungen vornehmen und testen, wie sie funktionieren. Das Hochladen und Veröffentlichen der Webressource nach jeder Änderung verlangsamt diesen Vorgang.

Moderne Browserentwicklertools bieten Funktionen zum Speichern einer lokalen Kopie der Webressource. Wenn die modellgesteuerte App die Webressource anfordert, lädt der Browser ihre lokale Kopie anstelle der Datei vom Server. Sie können die lokale Kopie bearbeiten, die Seite aktualisieren und Ihre Änderungen testen, ohne die Webressource wiederholt hochzuladen und zu veröffentlichen. Sie müssen keine Proxysoftware, Browsererweiterungen oder Zertifikate installieren.

Erfahren Sie mehr darüber, wie moderne Browser diese Funktionen bereitstellen.

• Microsoft Edge Local Overrides
• Google Chrome lokale Überschreibungen
• Firefox Netzwerküberschreibungen
• Safari WebKit Web Inspector Lokale Überschreibungen

Prerequisites

Bevor Sie beginnen:

• Sie benötigen eine modellgesteuerte App mit einer JavaScript-Webressource, die zum Bereitstellen von Ereignishandlern für ein Formular verwendet wird.

  In diesem Artikel wird die JavaScript-Webressource verwendet, die in Schreiben Sie Ihr erstes Clientskript beschrieben wird. In dieser Anleitung wird eine JavaScript-Webressource mit dem Namen example_form-script.js erstellt, diese dem Formular Account hinzugefügt und es werden Funktionen für die Formularereignisse Beim Laden und Beim Speichern sowie für das Ereignis NameBeim Ändern registriert.

  Note

  Sie können die JavaScriptWebResourceExampleSolution_1_0_managed.zipherunterladen. Installieren Sie diese verwaltete Lösung, und Sie erhalten eine modellgesteuerte Anwendung, die das fertige Ergebnis des Anleitungsartikels Schreiben Sie Ihr erstes Client-Skript darstellt.

• In diesem Artikel wird Microsoft Edge verwendet, aber Google Chrome, Firefox und Safari-Entwicklertools verfügen über ähnliche Funktionen.

• Erstellen Sie einen leeren Ordner auf Ihrem Computer für Microsoft Edge DevTools, um lokale Überschreibungen zu speichern. Verwenden Sie keinen Ordner, der Quelldateien, Anmeldeinformationen, Zertifikate oder andere vertrauliche Informationen enthält. DevTools erstellt innerhalb dieses Ordners die benötigte Ordnerstruktur. In diesem Artikel wird C:\temp\overrides verwendet, Sie sollten aber eventuell C:\Users\<your user name>\overrides verwenden.

In diesem Artikel wird dieses Skript aus Ihr erstes Clientskript schreiben verwendet:

// 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." });
    };
})();

Diese JavaScript-Webressource stellt drei Funktionen bereit, die für die folgenden Ereignisse registriert sind:

Die Schritte funktionieren auch mit jeder JavaScript-Webressource, die als Formularereignishandler registriert ist. Verwenden Sie den Namen Ihrer Webressource, und lösen Sie deren Ereignis aus, wenn sich die Schritte auf das Beispiel beziehen.

Vergewissern Sie sich, dass das veröffentlichte Skript funktioniert

Bevor Sie eine Überschreibung erstellen, bestätigen Sie das aktuelle Verhalten der veröffentlichten Webressource:

1. Öffnen Sie die modellgesteuerte App in Microsoft Edge.

2. Öffnen Sie einen vorhandenen Kontodatensatz, oder erstellen Sie einen neuen Datensatz.

3. Vergewissern Sie sich, dass eine Formularbenachrichtigung, die der folgenden Meldung ähnelt, fünf Sekunden lang angezeigt wird:

   <Your Name>: Your JavaScript code in action!

In diesem Schritt wird bestätigt, dass das Formular die Webressource lädt und den Example.formOnLoad Ereignishandler aufruft.

Lokale Überschreibungen einrichten

Sie müssen den Ordner „Overrides“ nur bei der ersten Verwendung von „Local Overrides“ in einem Microsoft Edge-Browserprofil auswählen.

1. Wenn das Kontoformular geöffnet ist, drücken Sie F12 oder STRG+UMSCHALT+I , um DevTools zu öffnen.

2. Wählen Sie das Tool Quellen aus.

3. Wählen Sie im Bereich Navigator die Registerkarte Überschreibungen aus. Wenn die Registerkarte nicht angezeigt wird, wählen Sie Weitere Registerkarten und anschließend Überschreibungen.

4. Wählen Sie Ordner für Überschreibungen auswählen.

5. Wählen Sie den leeren Ordner aus, den Sie für Überschreibungen erstellt haben, und wählen Sie dann Ordner auswählen aus.

6. Wenn DevTools vollzugriff auf den Ordner anfordert, wählen Sie "Zulassen" aus.

   

7. Vergewissern Sie sich, dass Lokale Überschreibungen aktivieren ausgewählt ist.

   

Bypass für das Netzwerk für Service Worker aktivieren

1. Wählen Sie in DevTools die Registerkarte Anwendung aus.

   Wenn die Registerkarte nicht angezeigt wird, wählen Sie + (Weitere Registerkarten) und anschließend Anwendung.

2. Wählen Sie im linken Navigationsbereich "Service Worker" aus.

3. Wählen Sie Netzwerk umgehen, um zu erzwingen, dass Anfragen den Service Worker umgehen und stattdessen das Netzwerk nutzen.

   

4. Aktualisieren Sie die Seite, um die Änderung anzuwenden.

Erstellen Sie eine Überschreibung für die Webressource

Verwenden Sie das Tool Netzwerk, um die vom Anmeldeformular geladene JavaScript-Datei zu finden:

1. Wählen Sie das Netzwerktool aus.

2. Wenn keine Netzwerkaktivität aufgezeichnet wird, wählen Sie Netzwerkprotokoll aufzeichnen.

3. Aktualisieren Sie die Seite so, dass das Formular die Webressource erneut lädt.

4. Beginnen Sie im Filter-Feld mit der Eingabe des Namens der Webressource, z. B.: example_form-script.js.

5. Klicken Sie in der Liste der Netzwerkanforderungen auf example_form-script.js mit der rechten Maustaste, und wählen Sie dann Inhalt überschreiben.

   

6. Wählen Sie das Tool Quellen und dann die Registerkarte Überschreibungen aus.

7. Erweitern Sie die von DevTools erstellten Ordner, und wählen Sie dann example_form-script.js aus.

   

   DevTools kopiert die Webressource in den Überschreibungsordner. Ein violetter Punkt auf dem Dateisymbol gibt an, dass DevTools die Ressource überschrieben hat.

Überprüfen, ob Microsoft Edge die lokale Kopie lädt

Nehmen Sie eine leicht erkennbare Änderung vor, damit Sie überprüfen können, ob die Überschreibung funktioniert:

1. Suchen Sie im DevTools-Editor die folgende Zeile:

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

2. Ersetzen Sie es durch diese Zeile:

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

   Note

   Wenn Sie versuchen, Code in den DevTools-Editor einzufügen, wird dieses Dialogfeld angezeigt. Sie müssen allow pasting eingeben und Zulassen auswählen, um fortzufahren. Dieses Dialogfeld wird nicht angezeigt, wenn Sie Änderungen direkt eingeben.

   

3. Ändern Sie die Benachrichtigungsdauer von 5000 zu 15000.

4. Drücken Sie STRG+S , um die lokale Datei zu speichern.

5. Aktualisieren Sie das Kontoformular.

6. Vergewissern Sie sich, dass in der Benachrichtigung Local override in action! angezeigt wird. Sie bleibt 15 Sekunden lang sichtbar.

   

Die geänderte Meldung und die Dauer bestätigen, dass Microsoft Edge die lokale Überschreibung anstelle der veröffentlichten Webressource geladen hat.

Debuggen der Ereignishandler

Nachdem Sie bestätigt haben, dass das Override funktioniert, verwenden Sie den DevTools-Debugger, um das Skript zu untersuchen.

Das OnLoad-Ereignis des Formulars debuggen

1. Öffnen Sie im Tool "Quellen " die überschriebene example_form-script.js Datei.

2. Wählen Sie die Zeilennummer für diese Anweisung aus, um einen Haltepunkt festzulegen:

   

3. Aktualisieren Sie das Kontoformular.

4. Wenn die Skriptausführung angehalten wird, verwenden Sie den Umfang, um executionContext und formContext zu prüfen.

   

5. Durchlaufen Sie die Funktion, und beobachten Sie den Aufruf von setFormNotification.

6. Wählen Sie „Skriptausführung fortsetzen“ aus, um fortzufahren.

Das „OnChange“-Ereignis für den Kontonamen debuggen

1. Legen Sie für diese Anweisung in Example.attributeOnChange einen Haltepunkt fest:

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

2. Ändern Sie im Kontoformular Kontoname und verlagern Sie anschließend den Fokus aus der Spalte, um das Ereignis On Change auszulösen.

3. Wenn die Ausführung angehalten wird, prüfen Sie den Wert von accountName.

   

4. Verwenden Sie einen Kontonamen, der Contoso enthält, und führen Sie die Funktion Schritt für Schritt aus, um zu sehen, wie das Skript die Werte für „Website“, „Haupttelefonnummer“ und „Beschreibung“ festlegt.

Debuggen des OnSave-Ereignisses des Formulars

1. Legen Sie einen Haltepunkt auf der Xrm.Navigation.openAlertDialog-Anweisung in Example.formOnSave fest.

2. Speichern Sie den Datensatz.

3. Wenn die Ausführung angehalten wird, überprüfen Sie den Aufrufstapel, um zu bestätigen, dass das Formular On Save-Ereignis die erwartete Funktion aufgerufen hat.

   

4. Setzen Sie die Skriptausführung fort und bestätigen Sie, dass sich der Warndialog öffnet.

Sie können die Überschreibung bearbeiten und speichern, wann immer Sie eine mögliche Lösung testen möchten. Aktualisieren Sie das Formular, um Änderungen an Code zu testen, der beim Laden des Formulars ausgeführt wird. Lösen Sie das relevante Formular- oder Spaltenereignis aus, um andere Ereignishandler zu testen. Verwenden Sie das Konsole-Tool, um Fehler zu überprüfen und die Ausgabe zu protokollieren.

Vergleichen Sie den Override mit der veröffentlichten Webressource

So überprüfen Sie, ob ein Problem durch Ihre lokalen Änderungen verursacht wird:

1. Wählen Sie im Tool Quellen die Registerkarte Überschreibungen aus.
2. Deaktivieren Sie Lokale Überschreibungen aktivieren.
3. Aktualisieren Sie das Kontoformular, und testen Sie das Event erneut.

Microsoft Edge lädt jetzt die veröffentlichte Webressource vom Server. Wählen Sie Lokale Überschreibungen aktivieren und aktualisieren Sie das Formular, um die Verwendung der lokalen Kopie fortzusetzen.

Problembehandlung abschließen

Lokale Override-Dateien sind nicht mit der Webressource in Dataverse oder mit den Quelldateien für Ihre Lösung verbunden.

1. Kopieren Sie die Änderungen, die Sie beibehalten möchten, aus der Überschreibungsdatei in die Quelldatei, die Sie zum Verwalten der Webressource verwenden.
2. Verwenden Sie Ihren normalen Entwicklungs- und Bereitstellungsprozess, um die JavaScript-Webressource zu aktualisieren und zu veröffentlichen.
3. Testen Sie die veröffentlichte Webressource mit deaktiviertem "Enable Local Overrides".
4. Wenn Sie die Außerkraftsetzungskonfiguration nicht mehr benötigen, wählen Sie auf der Registerkarte "Außerkraftsetzungen" die Option "Konfiguration löschen" aus.

Lokale Überschreibungen beheben

Im Folgenden finden Sie Probleme, die bei der Verwendung von lokalen Overrides auftreten können.

Die Webressource wird im Netzwerktool nicht angezeigt.

Vergewissern Sie sich, dass das Netzwerktool aufzeichnet, löschen Sie alle Filter und aktualisieren Sie das Formular. Das Formular muss die Webressource laden, bevor sie angezeigt wird. Vergewissern Sie sich außerdem, dass die JavaScript-Bibliothek dem Formular hinzugefügt wurde und dass die Formularanpassungen veröffentlicht wurden.

Der Befehl "Inhalt außer Kraft setzen" ist nicht verfügbar.

Kehren Sie zum Tool Sources zurück, und vergewissern Sie sich, dass Sie einen Overrides-Ordner ausgewählt, DevTools den Zugriff darauf erlaubt und Lokale Overrides aktivieren ausgewählt haben. Aktualisieren Sie dann das Formular, und versuchen Sie es erneut.

Das Formular verwendet weiterhin das veröffentlichte Skript.

Lassen Sie DevTools geöffnet, vergewissern Sie sich, dass Enable Local Overrides ausgewählt ist, und überprüfen Sie, ob die Webressource im Tool Network oder Sources einen violetten Punkt aufweist. Speichern Sie die Überschreibung und aktualisieren Sie anschließend das Formular.

Ein Breakpoint wurde nicht erreicht.

Vergewissern Sie sich, dass Sie den Haltepunkt in der überschriebenen Datei gesetzt haben und dass er als aktiviert angezeigt wird. Lösen Sie das Ereignis aus, das dieser Funktion zugeordnet ist: Aktualisieren Sie das Formular für On Load, ändern Sie die konfigurierte Spalte für On Change oder speichern Sie den Datensatz für On Save. Überprüfen Sie außerdem das Console-Tool auf einen Syntaxfehler, der verhindert, dass das Skript geladen wird.

Zugeordnete Informationen

• Webseitenressourcen durch lokale Kopien ersetzen (Tab "Overrides")
• Übersicht zum Tool „Sources“
• Debuggen von JavaScript
• Clientskripting mit JavaScript
• JavaScript-Webressourcen