Clientskript debuggen

  • 3 Minuten

Fast jeder moderne Browser verfügt über eine Debugging-Erweiterung, die das Erfassen des Netzwerkverkehrs, das Analysieren von Seiteninhalten und das Debuggen von Clientskripten unterstützt. Die folgenden Toolsets sind für die Durchführung von Debugging-Vorgängen hilfreich:

  • Microsoft Edge (über F12 Developer Tools). Weitere Informationen finden Sie in derF12 Developer Tools-Anleitung.

  • Google Chrome (über F12 Developer Tools)

  • Mozilla Firefox (mit Firebug)

  • Apple Safari (mit Web Inspector)

Skriptressourcen anzeigen

Wenn Ihre modellgesteuerte App-Formularseite geladen wird, werden alle Client-Skriptbibliotheken neben der Webseite als einzelne Skriptressourcen geladen. Angesichts der Menge an Skriptressourcen, die zum Ausführen einer modellgesteuerten App erforderlich sind, kann es schwierig sein, eine bestimmte Datei zu finden, anhand derer Sie möglicherweise debuggen möchten. Bei der Verwendung von Debugging-Tools wie Microsoft Edge empfehlen wir, dass Sie Ihren Dateinamen notieren und die Suchfunktionen des Tools verwenden, um Ihre Skriptdateien zu finden.

Nachrichten an die Konsole schreiben

Die window.alert-Methode beim Debuggen von JavaScript-Problemen oder Debugger-Anweisung zum Unterbrechen der Ausführung werden immer noch häufig verwendet, um Code in der Anwendung zu beheben. Aber jetzt, da alle modernen Browser einfachen Zugriff auf Debugging-Tools bieten, ist dies keine bewährte Methode, wenn andere Benutzer möglicherweise die Anwendung verwenden, die Sie aktuell debuggen. Diese Debugging-Aufrufe werden ebenfalls oft versehentlich im Code belassen, was zu Problemen für die App-Benutzer in der Produktion führt.

Schreiben Sie Ihre Nachrichten stattdessen in die Konsole. Hier ist eine kleine Funktion, die Sie Ihren Bibliotheken hinzufügen können, um Nachrichten, die Sie anzeigen möchten, an die Konsole zu senden, wenn diese geöffnet ist.

function writeToConsole(message)
{
 if (typeof console != 'undefined') {
  console.log(message);
 }
}

Wenn Sie im Gegensatz zur Benachrichtigungsmethode vergessen, Code zu entfernen, der diese Funktion verwendet, werden Ihre Nachrichten für Benutzer der Anwendung nicht angezeigt. Es ist auch hilfreich bei der Problembehandlung des Anwendungsverhaltens in der Produktion, ohne die App-Benutzer zu stören.

Fiddler Auto-Responder verwenden, um Webressourceninhalte zu ersetzen

Das ständige Bearbeiten von Webressourcen während der Entwicklung kann schwierig und zeitintensiv sein. Sie müssen die Dateien in einer Lösung bei jeder Bearbeitung erneut veröffentlichen und sicherstellen, dass Sie den Browser-Cache der vorherigen Version der Ressourcen leeren. Wenn die Umgebung außerdem von mehreren Entwicklern geteilt wird, kann dies für andere stören.

Um die Effizienz zu verbessern, sollten Sie ein Tool wie Auto-Responder in Telerik Fiddler verwenden, um den Inhalt einer Webressource durch den Inhalt einer lokalen Datei zu ersetzen, anstatt ihn jedes Mal hochzuladen und erneut zu veröffentlichen. Verschiedene andere Tools von Drittanbietern, die auch die Livebearbeitung unterstützen, bieten Ihnen auch Möglichkeiten. Weitere Informationen zum Installieren und Konfigurieren von Fiddler Auto-Responder finden Sie unter Skript-Webressourcenentwicklung unter Verwendung von Fiddler Auto-Responder.