Vorherige

Nächste

Übung: Debuggen mit Visual Studio Code

Abgeschlossen

In diesem Abschnitt werden Sie Ihr neu erworbenes Wissen in Bezug auf das Debuggen anwenden. Es bietet sich Ihnen die folgende ideale Gelegenheit: Für die Tailwind Traders-App entwickeln Sie und Ihr Team ein neues Feature, mit dem Produktpreise in mehreren Währungen angezeigt werden können. Eine*r Ihrer Kolleg*innen hat Code geschrieben, tut sich jedoch schwer damit, den Fehler darin zu finden. Es ist Ihre Aufgabe, ihm zu helfen.

Erstellen einer JavaScript-Datei in einem Visual Studio-Arbeitsbereich

Für diese Übung benötigen Sie eine JavaScript-Datei, um das Debuggen zu üben. Wenn Sie die Steuerelemente zum Starten des Debuggers verwenden möchten, muss die JavaScript-Datei sich in einem Visual Studio-Arbeitsbereich befinden.

Die Aufgabe der Anwendung besteht darin, den Wechselkurs zwischen den drei Währungen USD, EUR und JPY festzulegen. Anschließend soll mit zwei Ziffern nach dem Dezimalzeichen angezeigt werden, wie viel 10 EUR in den anderen Währungen wert ist. Für jede hinzugefügte Währung soll der Wechselkurs in Bezug auf die anderen Währungen berechnet werden.

1. Erstellen Sie in Visual Studio Code eine Datei mit dem Namen mycurrency.js im Unterordner ./nodejs-debug/.

2. Fügen Sie den folgenden Code in den neuen Datei-Editor ein:

   const rates = {};
   
   function setExchangeRate(rate, sourceCurrency, targetCurrency) {
     if (rates[sourceCurrency] === undefined) {
       rates[sourceCurrency] = {};
     }
   
     if (rates[targetCurrency] === undefined) {
       rates[targetCurrency] = {};
     }
   
     rates[sourceCurrency][targetCurrency] = rate;
     rates[targetCurrency][sourceCurrency] = 1 / rate;
   }
   
   function convertToCurrency(value, sourceCurrency, targetCurrency) {
     const exchangeRate = rates[sourceCurrency][targetCurrency];
     return exchangeRate && value * exchangeRate;
   }
   
   function formatValueForDisplay(value) {
     return value.toFixed(2);
   }
   
   function printForeignValues(value, sourceCurrency) {
     console.info(`The value of ${value} ${sourceCurrency} is:`);
   
     for (const targetCurrency in rates) {
       if (targetCurrency !== sourceCurrency) {
         const convertedValue = convertToCurrency(value, sourceCurrency, targetCurrency);
         const displayValue = formatValueForDisplay(convertedValue);
         console.info(`- ${convertedValue} ${targetCurrency}`);
       }
     }
   }
   
   setExchangeRate(0.88, 'USD', 'EUR');
   setExchangeRate(107.4, 'USD', 'JPY');
   printForeignValues(10, 'EUR');
   

3. Speichern Sie die Datei, indem Sie STRG+S (Windows, Linux) oder CMD+S (Mac) drücken.

Erstellen einer Startkonfiguration

Da Sie den Debugger häufig einsetzen werden, erstellen Sie zunächst eine Startkonfiguration für Ihre App.

1. Navigieren Sie in Visual Studio Code zur Registerkarte Ausführen, und wählen Sie create a launch.json file (Datei „launch.json“ erstellen) und dann den Node.js-Debugger aus.

   Visual Studio Code erstellt die Konfigurationsdatei .vscode/launch.json im Stamm des Arbeitsbereichs und öffnet die Startdatei zur Bearbeitung.

   

   Standardmäßig wird eine Startkonfiguration erstellt, um die aktuell geöffnete Datei auszuführen. In diesem Beispiel handelt es sich bei der geöffneten Datei um mycurrency.js. Sie können die Startkonfiguration ändern, um anzupassen, wie Ihr Programm beim Debuggen gestartet werden soll.

2. Zeigen Sie in der Startkonfiguration den Wert der program-Eigenschaft an.

   {
       // Use IntelliSense to learn about possible attributes.
       // Hover to view descriptions of existing attributes.
       // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "name": "Launch Program",
               "skipFiles": [
                   "<node_internals>/**"
               ],
               "program": "${workspaceFolder}/nodejs-debug/mycurrency.js"
           }
       ]
   }
   

   • ${workspaceFolder} gibt den Stamm des Arbeitsbereichs an.

3. Schließen Sie die .vscode/launch.json-Datei.

Hinweis

Sie können verschiedene Startkonfigurationen für Ihr Projekt erstellen, indem Sie rechts unten Konfiguration hinzufügen auswählen.

Analysieren der Probleme

Stellen Sie sicher, dass Ihre Visual Studio Code-Umgebung zur Überwachung des Debugprozesses bereit ist:

• Der Debuggerbereich sollte links geöffnet sein. Verwenden Sie das Registerkartensymbol Ausführen auf der linken Seite, um die Sichtbarkeit des Bereichs zu ändern.
• Die Debugging-Konsole sollte unten geöffnet sein. Sie können die Konsole öffnen, indem Sie Ansicht>Debugging-Konsole auswählen oder STRG+UMSCHALT+Y (Windows, Linux) oder BEFEHL+UMSCHALT+Y (Mac) drücken.

Nun können Sie mit dem Debuggen beginnen.

Starten Sie das Programm in der Debugger-Startsteuerung mit aktiviertem Debuggen (grüner Pfeil).

Die Programmausführung sollte schnell abgeschlossen sein, denn Sie haben noch keine Haltepunkte hinzugefügt.

In der Debugging-Konsole sollte der folgende Text gefolgt von einer Ausnahme angezeigt werden.

The value of 10 EUR is:
11.363636363636365
- 11.363636363636365 USD
/app/node-101/currency.js:23
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/app/node-101/currency.js:23:16)
    at printForeignValues (/app/node-101/currency.js:32:28)
    at Object.<anonymous> (/app/node-101/currency.js:40:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11

Die Aufgabe dieses Programms besteht darin, den Wechselkurs zwischen drei Währungen (USD, EUR und JPY) festzulegen und anzuzeigen, welchem Wert 10 EUR in den anderen Währungen entspricht (mit zwei Ziffern nach dem Dezimaltrennzeichen).

Im vorherigen Code liegen zwei Fehler vor:

• Auf das Dezimaltrennzeichen folgen mehr als zwei Ziffern.
• Das Programm stürzt mit einer Ausnahme ab, wobei der Wert für JPY nicht angezeigt wurde.

Tipp

• Legen Sei "outputCapture": "std", für Ihre Startkonfigurationsdatei fest, um die Protokollierungsausgabe zu erhöhen.
• Legen Sie einen Protokollpunkt anstelle eines Breakpoints fest, um das Beenden der Programmausführung zu vermeiden. Ein Protokollpunkt „unterbricht“ den Debugger nicht, sondern protokolliert stattdessen eine Meldung in der Konsole. Protokollpunkte sind besonders nützlich, um beim Debuggen von Produktionsservern, die nicht angehalten werden können, die Protokollierung einzufügen.

Korrigieren der Ziffernanzeige

Zunächst beheben wir den ersten Fehler. Da Sie diesen Code nicht geschrieben haben und es mehrere Funktionsaufrufe gibt, sollten Sie sich zuerst den Ausführungsflow mithilfe der Ausführung in Einzelschritten genauer ansehen.

Verwenden von Haltepunkten und Ausführung in Einzelschritten

Fügen Sie einen Haltepunkt hinzu, indem Sie in Zeile 39 im Randbereich auf der linken Seite printForeignValues(10, 'EUR'); auswählen.

Starten Sie das Debuggen erneut, und führen Sie die printForeignValues()-Funktion mit dem Debugsteuerelement Einzelschritt schrittweise aus:

Überprüfen des Variablenzustands

Nehmen Sie sich nun etwas Zeit, um im Bereich Variablen die verschiedenen Variablenwerte zu überprüfen.

• Wie lauten die Werte für die value- und sourceCurrency-Variablen?
• Werden die drei erwarteten Schlüssel USD, EUR und JPY für die rates-Variable angezeigt?

Verwenden Sie das Debugsteuerelement Prozedurschritt, um Schritt für Schritt fortzufahren, bis die Variable convertedValue festgelegt ist:

Nachdem Sie das Steuerelement Prozedurschritt fünfmal verwendet haben, sollte der Wert der Variable convertedValue wie erwartet auf 11.363636363636365 festgelegt werden.

Wenn wir ein weiteres Mal einen Prozedurschritt ausführen, wird der Wert der displayValue-Variable angezeigt. Der Wert sollte die formatierte Zeichenfolge für die Anzeige mit den zwei Ziffern 11.36 sein.

Die Funktionen convertToCurrency() und formatValueForDisplay() scheinen bis zu dieser Stelle im Programm korrekt zu sein und geben das erwartete Ergebnis zurück.

Korrigieren des Fehlers

Verwenden Sie das Steuerelement Einzelschritt, um den Aufruf der console.info()-Funktion zu veranlassen. Sehen Sie sich diese Codezeile genau an. Finden Sie den Fehler?

Wir müssen diesen Programmfehler beheben, indem wir die displayValue-Variable anstelle der convertedValue-Variable zum Ausgeben des Werts verwenden.

1. Aktualisieren Sie die currency.js-Datei, damit der richtige Variablenname verwendet wird. Ändern Sie den Aufruf der console.info()-Funktion in Zeile 32 so, dass die displayValue-Variable anstelle der convertedValue-Variable verwendet wird:

   console.info(`- ${displayValue} ${targetCurrency}`);
   

2. Speichern Sie die Änderungen an der Datei.

3. Starten Sie das Programm neu.

Überprüfen Sie, ob das Programm den USD-Wert ordnungsgemäß als 11.36 anzeigt. Der erste Fehler ist behoben.

Suchen der Ursache des Absturzes

Sehen wir uns nun an, warum das Programm abstürzt.

1. Entfernen Sie in der currency.js-Datei den Haltepunkt, den Sie in Zeile 39 gesetzt haben.

2. Aktivieren Sie das Kontrollkästchen Nicht abgefangene Ausnahmen im Bereich Haltepunkte, um zu erzwingen, dass das Programm nach dem Auslösen der Ausnahme anhält.

3. Führen Sie das Programm noch einmal im Debugger aus.

Das Programm sollte bei der Ausnahme anhalten und ein großes Fehlerprotokoll in der Mitte des Editorfensters anzeigen.

Sehen Sie sich die Zeile an, in der die Ausführung angehalten wurde, und lesen Sie die Ausnahmemeldung TypeError: Cannot read property 'toFixed' of undefined. Aus der Meldung können Sie ableiten, dass die Parameterfunktion value den Wert undefined anstelle einer Zahl aufweist. Die Ausnahme wurde durch diesen Fehler ausgelöst.

Zurückspulen der Aufrufliste

Die Stapelüberwachung, die unter der Fehlermeldung angezeigt wird, kann schwer zu verstehen sein. Daher übernimmt Visual Studio Code die Verarbeitung des Funktionsaufrufstapels für Sie. Standardmäßig werden nur die relevanten Informationen im Panel Aufrufliste angezeigt. Wir verwenden Aufruflisteninformationen, um den Code zu suchen, der diese Ausnahme ausgelöst hat.

Wir wissen, dass die Ausnahme im Aufruf der formatValueForDisplay()-Funktion ausgelöst wurde.

1. Wechseln Sie im Debuggerbereich zum Bereich Aufrufliste.

2. Wenn Sie anzeigen möchten, wo die formatValueForDisplay()-Funktion aufgerufen wurde, klicken Sie doppelt auf die Funktion darunter (die printForeignValues-Funktion).

   Visual Studio Code geht zu der Zeile in der printForeignValues-Funktion der currency.js-Datei, in der die formatValueForDisplay()-Funktion aufgerufen wurde:

   const displayValue = formatValueForDisplay(convertedValue);
   

Sehen Sie sich diese Codezeile genau an. Der Parameter, der die Ausnahme ausgelöst hat, stammt aus der convertedValue-Variable. Sie müssen herausfinden, an welcher Stelle dieser Parameterwert undefined wird.

Eine Möglichkeit besteht darin, einen Haltepunkt zu dieser Zeile hinzuzufügen und dann die Variable jedes Mal zu überprüfen, wenn der Haltepunkt in dieser Zeile anhält. Wir wissen jedoch nicht, wann der falsche Wert auftreten kann, und in komplexen Programmen kann dieser Debuggingansatz umständlich sein. Sehen wir uns eine alternative Methode an.

Festlegen eines bedingten Haltepunkts

In diesem Fall wäre es hilfreich, den Debugger an diesem Haltepunkt nur zu beenden, wenn der Wert der convertedValue-Variable undefined beträgt. Glücklicherweise kann Visual Studio Code diese Aktion über die Optionen durchführen, die nach dem Klicken mit der rechten Maustaste angezeigt werden.

1. Klicken Sie mit der rechten Maustaste, und wählen Sie in der currency.js-Datei am linken Rand der Zeile 31 Add Conditional Breakpoint (Bedingten Haltepunkt hinzufügen) aus.

   

2. Klicken Sie mit der rechten Maustaste, und geben Sie die folgende Bedingung ein, um den Haltepunkt auszulösen, und drücken Sie dann die EINGABETASTE:

   `convertedValue === undefined`
   

3. Starten Sie das Programm neu.

Das Programm sollte bei Zeile 31 anhalten, und wir können die Aufruflistenwerte untersuchen.

Beobachten des aktuellen Zustands

Analysieren wir den derzeitigen Zustand des Programms.

• Der Wert der convertedValue-Variable stammt aus dem Aufruf der convertToCurrency(value, sourceCurrency, targetCurrency)-Funktion. Wir müssen die Parameterwerte in diesem Funktionsaufruf untersuchen und überprüfen, ob diese korrekt sind.

• Insbesondere müssen wir die value-Variable untersuchen und überprüfen, ob sie den erwarteten Wert 10 enthält.

Sehen Sie sich den Code der Funktion convertToCurrency() an.

function convertToCurrency(value, sourceCurrency, targetCurrency) {
  const exchangeRate = rates[sourceCurrency][targetCurrency];
  return exchangeRate && value * exchangeRate;
}

Es ist bekannt, dass das Ergebnis dieses Codes undefined ist. Sie wissen ebenfalls, dass die value-Variable auf 10 festgelegt ist. An dieser Information können wir erkennen, dass das Problem mit dem Wert der exchangeRate-Variable zusammenhängt.

Zeigen Sie in der currency.js-Datei mit der Maustaste auf die Variable rates, um diese einzusehen:

Das Ziel ist es, den Wechselkurs von EUR in JPY zu erhalten. Wenn Sie aber den Wert EUR auffalten, sehen Sie, dass es nur einen Umrechnungskurs für USD gibt. Der Umrechnungskurs für JPY fehlt.

Korrigieren fehlender Umrechnungskurse

Da Sie nun wissen, dass einige Umrechnungskurse fehlen, sollten Sie jetzt untersuchen, warum dies so ist. Sie können alle vorhandenen Haltepunkte aus dem Bereich Haltepunkte entfernen, indem Sie das Symbol Alle Haltepunkte entfernen auswählen.

Überwachen der Variablen „rates“

Lassen Sie uns einen Haltepunkt festlegen, um die rates-Variable zu überwachen.

1. Fügen Sie in Ihrer currency.js-Datei einen Haltepunkt zur Zeile 37 in der setExchangeRate(0.88, 'USD', 'EUR');-Funktion hinzu.

2. Wählen Sie im Bereich Überwachen die Option Plus aus, und geben Sie rates ein.

   Jedes Mal, wenn der Wert der rates-Variable geändert wird, wird der aktualisierte Wert im Bereich Überwachen angezeigt.

3. Starten Sie das Programm neu.

4. Wenn der Haltepunkt beim ersten Aufruf der setExchangeRate()-Funktion anhält, verwenden Sie das Steuerelement Prozedurschritt.

5. Sehen Sie sich den Wert der rates-Variable im Bereich Überwachen an.

   An dieser Stelle weisen USD und EUR wie erwartet übereinstimmende, entgegengesetzte Umrechnungskurse auf.

6. Führen Sie beim zweiten Aufruf der setExchangeRate()-Funktion einen weiteren Prozedurschritt aus.

   Sie sehen, dass USD und JPY übereinstimmende Umrechnungskurse aufweisen, aber kein Wechselkurs für EUR und JPY zur Verfügung steht.

Sehen wir uns den Code der setExchangeRate()-Funktion an.

function setExchangeRate(rate, sourceCurrency, targetCurrency) {
  if (rates[sourceCurrency] === undefined) {
    rates[sourceCurrency] = {};
  }

  if (rates[targetCurrency] === undefined) {
    rates[targetCurrency] = {};
  }

  rates[sourceCurrency][targetCurrency] = rate;
  rates[targetCurrency][sourceCurrency] = 1 / rate;
}

Die wichtigsten Zeilen in dieser Funktion sind die letzten beiden. Scheinbar haben Sie den zweiten Fehler gefunden. Der Umrechnungskurs wurde nur zwischen den sourceCurrency- und targetCurrency-Variablen festgelegt. Das Programm muss auch den Umrechnungskurs für die anderen Währungen berechnen, die hinzugefügt wurden.

Korrigieren des Codes

Korrigieren wir den Code für den Umrechnungskurs.

1. Aktualisieren Sie die currency.js-Datei, um den Umrechnungskurs für die anderen Währungen zu berechnen.

   Ersetzen Sie den Code in den Zeilen 12 und 13

   rates[sourceCurrency][targetCurrency] = rate;
   rates[targetCurrency][sourceCurrency] = 1 / rate;
   

   durch diesen aktualisierten Code:

   for (const currency in rates) {
     if (currency !== targetCurrency) {
       // Use a pivot rate for currencies that don't have the direct conversion rate
       const pivotRate = currency === sourceCurrency ? 1 : rates[currency][sourceCurrency];
       rates[currency][targetCurrency] = rate * pivotRate;
       rates[targetCurrency][currency] = 1 / (rate * pivotRate);
     }
   }
   

2. Speichern Sie die Änderungen an der Datei.

Der aktualisierte Code legt den Umrechnungskurs für alle Währungen außer sourceCurrency und targetCurrency fest. Das Programm verwendet den Umrechnungskurs der sourceCurrency, um den Kurs zwischen der anderen Währung und targetCurrency zu ermitteln. Der Code legt dann den Umrechnungskurs für die andere Währung entsprechend fest.

Hinweis

Dies funktioniert nur, wenn die Kurse zwischen sourceCurrency und anderen Währungen bereits vorhanden sind, was in diesem Fall eine akzeptable Einschränkung darstellt.

Testen der Korrektur

Testen wir nun unsere Änderung.

1. Entfernen Sie alle Haltepunkte und Überwachungsvariablen.

2. Starten Sie das Programm neu.

Das erwartete Ergebnis sollte nun ohne Absturz in der Konsole angezeigt werden.

The value of 10 EUR is:
- 11.36 USD
- 1220.45 JPY

Das ist alles. Sie haben den Code korrigiert. Sie sind jetzt in der Lage, unbekannten Code mithilfe von Visual Studio Code effizient zu debuggen. Gut gemacht!

Bereinigung des Entwicklungscontainers

Nach Abschluss des Projekts können Sie Ihre Entwicklungsumgebung bereinigen oder wieder in den normalen Zustand versetzen.

Remoteentwicklung (Browser)

Durch das Löschen der GitHub Codespaces-Umgebung wird sichergestellt, dass Sie die Anzahl der kostenlosen Berechtigungsstunden pro Kern maximieren können, die Sie für Ihr Konto erhalten.

Wichtig

Weitere Informationen zu den Berechtigungen Ihres GitHub-Kontos finden Sie im Artikel zu monatlich enthaltener Speicherkapazität und Kernstunden in GitHub Codespaces.

1. Melden Sie sich beim GitHub Codespaces-Dashboard (https://github.com/codespaces) an.

2. Suchen Sie Ihre derzeit ausgeführten Codespaces, die aus dem GitHub-Repository MicrosoftDocs/node-essentials stammen.

   

3. Öffnen Sie das Kontextmenü für den Codespace, und wählen Sie Löschen aus.

   

Lokale Entwicklung (Docker)

Sie müssen ihre lokale Umgebung nicht unbedingt bereinigen, aber Sie können den ausgeführten Entwicklungscontainer beenden und zur Ausführung von Visual Studio Code im Kontext eines lokalen Arbeitsbereichs zurückkehren.

1. Öffnen Sie die Befehlspalette, suchen Sie nach den Dev Containers-Befehlen, und wählen Sie dann Dev Containers: Ordner erneut öffnen aus.

   

Tipp

Visual Studio Code beendet den ausgeführten Entwicklungscontainer, aber der Container befindet sich weiterhin in Docker in einem beendeten Zustand. Sie haben immer die Möglichkeit, die Containerinstanz, das Containerimage und die Volumes aus Docker zu löschen, um mehr Speicherplatz auf Ihrem lokalen Computer freizugeben.

Weiter