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
• Netzwerküberschreibungen in Firefox
• 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. Diese exemplarische Vorgehensweise erstellt eine JavaScript-Webressource mit dem Namen example_form-script.js, fügt sie dem Account-Formular hinzu und registriert Funktionen für die Formularereignisse On Load und On Save sowie für die Spalte Name und das Ereignis On Change.

  Note

  Sie können die JavaScriptWebResourceExampleSolution_1_0_managed.zipherunterladen. Installieren Sie diese verwaltete Lösung, und Sie finden eine modellgesteuerte Anwendung, die das vollständige Ergebnis des Artikels „Schreiben Ihres ersten Clientskripts exemplarische Vorgehensweise“ 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 die Ordnerstruktur, die von DevTools in diesem Ordner benötigt wird. 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 nur beim ersten Verwenden von Local Overrides in einem Microsoft Edge-Browserprofil einen Überschreibungsordner 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 Navigatorbereich die Registerkarte "Overrides" aus. Wenn die Registerkarte nicht angezeigt wird, wählen Sie "More tabs" und dann "Overrides" aus.

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

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.

   

Umgehung für 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 dann Application aus.

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

3. Wählen Sie Netzwerk umgehen aus, um Anforderungen zum Umgehen des Service Workers zu erzwingen und stattdessen das Netzwerk zu verwenden.

   

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

Überschreibung für die Webressource erstellen

Verwenden Sie das Network-Tool, um die JavaScript-Datei zu finden, die das Kontoformular lädt:

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 zu erkennende Änderung vor, damit Sie bestätigen können, dass 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 eingeben und allow pasting auswählen, um den Vorgang fortzusetzen. 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 Nachricht und Dauer bestätigen, dass Microsoft Edge die lokale Außerkraftsetzung 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 Bereich, 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.

Debuggen des OnChange-Ereignisses für den Kontonamen

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

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

2. Ändern Sie im Kontoformular den Kontonamen, und verschieben Sie dann den Fokus von der Spalte, um das On Change-Ereignis 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. Durchlaufen Sie dann die Funktion, um zu beobachten, wie das Skript die Werte „Website“, „Haupttelefon“ 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 jederzeit bearbeiten und speichern, wenn Sie eine mögliche Korrektur 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 Console-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“ aus, 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 dann das Formular.

Ein Breakpoint wurde nicht erreicht.

Vergewissern Sie sich, dass Sie den Haltepunkt in der Datei mit der Überschreibung festlegen 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