Vorige

Volgende

Oefening: Fouten opsporen met Visual Studio Code

Voltooid

Het is tijd om uw zojuist geleerde kennis over foutopsporing in de praktijk te brengen. Het blijkt dat we de perfecte kans hebben. In onze app voor Tailwind Traders ontwikkelen we een nieuwe functie waarmee we de prijs van een product in meerdere valuta's kunnen weergeven. Een collega heeft er code voor geschreven, maar ze hebben moeite om erachter te komen wat er misgaat. We gaan hem helpen.

Een JavaScript-bestand maken in een Visual Studio-werkruimte

Voor deze oefening hebt u een JavaScript-bestand nodig om foutopsporing te oefenen. Als u de besturingselementen voor het starten van het foutopsporingsprogramma wilt gebruiken, moet het JavaScript-bestand zich in een Visual Studio-werkruimte bevinden.

Het doel van de toepassing is het instellen van de wisselkoers tussen drie valuta's, USD, EUR en JPY. Vervolgens willen we weergeven hoeveel waarde 10 EUR zich in de andere valuta's bevindt met behulp van twee cijfers achter het decimaalteken. Voor elke valuta die wordt toegevoegd, moet de conversieverhouding worden berekend ten opzichte van alle andere valuta's.

1. Maak in Visual Studio Code een bestand met de naam mycurrency.js in de ./nodejs-debug/ submap.

2. Plak de volgende code in de nieuwe bestandseditor:

   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. Als u het bestand wilt opslaan, drukt u op Ctrl+S (Windows, Linux) of Cmd+S (Mac).

Een startconfiguratie maken

We gaan het foutopsporingsprogramma veel gebruiken, dus laten we een startconfiguratie voor uw app maken.

1. Selecteer op het tabblad Uitvoeren in Visual Studio Code een launch.json-bestand maken en selecteer het foutopsporingsprogramma Node.js.

   Visual Studio Code maakt het .vscode/launch.json configuratiebestand in de hoofdmap van de werkruimte en opent het startbestand voor bewerking.

   

   Standaard wordt een startconfiguratie gemaakt om het momenteel geopende bestand uit te voeren. In dit voorbeeld is mycurrency.jshet geopende bestand . U kunt de startconfiguratie wijzigen om aan te passen hoe uw programma moet worden gestart wanneer u foutopsporing uitvoert.

2. Bekijk in de startconfiguratie de waarde van de program eigenschap.

   {
       // 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} geeft de hoofdmap van de werkruimte aan.

3. Sluit het .vscode/launch.json bestand.

Notitie

U kunt verschillende startconfiguraties voor uw project maken door rechtsonder Configuratie toevoegen te selecteren.

De problemen analyseren

Zorg ervoor dat uw Visual Studio Code-omgeving gereed is om het foutopsporingsproces te bewaken:

• Het deelvenster foutopsporingsprogramma moet aan de linkerkant zijn geopend. Gebruik het pictogram Tabblad Uitvoeren aan de linkerkant om de zichtbaarheid van het deelvenster in te schakelen.
• De console voor foutopsporing moet onderaan zijn geopend. U kunt de console openen door Debug Console weergeven>te selecteren of door op Ctrl+Shift+Y (Windows, Linux) of Cmd+Shift+Y (Mac) te drukken.

U kunt nu beginnen met foutopsporing.

Start in de besturingselementen voor het starten van het foutopsporingsprogramma het programma met foutopsporing ingeschakeld (de groene pijl).

Het programma zou snel voltooid moeten zijn. Dat is normaal omdat u nog geen onderbrekingspunten hebt toegevoegd.

U ziet deze tekst in de foutopsporingsconsole, gevolgd door een uitzondering.

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

Dit programma is erop gericht de wisselkoers in te stellen voor drie valuta's (USD, EUR en JPY) en de waarde voor 10 EUR weer te geven in alle andere valuta's, met twee cijfers achter de komma.

We zien hier twee fouten:

• Er staan meer dan twee cijfers achter de komma.
• Het programma is vastgelopen met een uitzondering en de waarde JPY kan niet worden weergegeven.

Tip

• Stel "outputCapture": "std", deze in op het opstartconfiguratiebestand om de uitvoer van logboekregistratie te verhogen.
• Stel een logboekpunt in plaats van een onderbrekingspunt in om te voorkomen dat de uitvoering van het programma wordt gestopt. Een logboekpunt breekt niet in het foutopsporingsprogramma, maar registreert in plaats daarvan een bericht naar de console. Logboekpunten zijn vooral handig voor het injecteren van logboekregistratie tijdens het opsporen van fouten in productieservers die niet kunnen worden onderbroken of gestopt.

De weergave van het aantal cijfers oplossen

We beginnen met het oplossen van de eerste fout. Omdat u deze code niet zelf hebt geschreven en omdat er verschillende functies zijn aangeroepen, moeten we eerst de uitvoeringsstroom bekijken door middel van een stap-voor-stap-uitvoerbewerking.

Onderbrekingspunten en stapsgewijze uitvoering gebruiken

Als u een onderbrekingspunt wilt toevoegen, selecteert u in de linkermarge op regel 39, aan printForeignValues(10, 'EUR');.

Start de foutopsporing opnieuw en stap in de printForeignValues() functie met het besturingselement Stap voor foutopsporing:

Controleer de status van de variabelen

Neem nu even de tijd om de verschillende variabelewaarden in het deelvenster Variabelen te controleren.

• Wat zijn de waarden voor de value en sourceCurrency variabelen?
• Voor de rates variabele ziet u de drie verwachte sleutels, USDen EURJPY?

Als u stap voor stap wilt doorgaan totdat de convertedValue variabele is ingesteld, gebruikt u het besturingselement Stap over foutopsporing:

Nadat u de stap over controle vijf keer hebt gebruikt, ziet u de waarde van de convertedValue variabele zoals verwacht11.363636363636365.

Als we nog een keer stappen uitvoeren, zien we de waarde van de displayValue variabele. De waarde moet de opgemaakte tekenreeks zijn voor weergave met twee cijfers 11.36.

Vervolgens kunnen we concluderen dat tot dit punt in het programma, de functies convertToCurrency() en formatValueForDisplay() correct lijken en dat ze het verwachte resultaat retourneren.

De fout oplossen

Gebruik de stap in het besturingselement eenmaal om de aanroep naar de console.info() functie te bereiken. Bekijk deze coderegel zorgvuldig. Ziet u de fout hier?

We moeten dit programmafout oplossen met behulp van de displayValue variabele in plaats van de convertedValue variabele om de waarde af te drukken.

1. Werk uw currency.js bestand bij om de juiste naam van de variabele te gebruiken. Wijzig de aanroep naar de console.info() functie op regel 32 om de displayValue variabele te gebruiken in plaats van de convertedValue variabele:

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

2. Sla de wijzigingen in het bestand op.

3. Start het programma opnieuw op.

Controleer of het programma de USD waarde correct weergeeft als 11.36. Eerste bug - opgelost.

De oorzaak van het vastlopen zoeken

We gaan nu onderzoeken waarom het programma vastloopt.

1. Verwijder in het currency.js bestand het onderbrekingspunt dat u hebt ingesteld op regel 39.

2. Als u wilt afdwingen dat het programma wordt onderbroken nadat de uitzondering is gegenereerd, schakelt u in het deelvenster Onderbrekingspunten het vakje Niet-onderbroken uitzonderingen in.

3. Voer het programma opnieuw uit in het foutopsporingsprogramma.

Het programma moet onderbreken op de uitzondering en een groot foutenrapport in het midden van het editorvenster weergeven.

Bekijk de regel waarin de uitvoering is gestopt en let op het uitzonderingsbericht TypeError: Cannot read property 'toFixed' of undefined. Uit dat bericht kunt u afleiden dat de value parameterfunctie de waarde undefined heeft in plaats van een getal. Deze fout heeft de uitzondering veroorzaakt.

De aanroepstack terugspoelen

De stack-trace die u onder het foutbericht ziet, is wellicht wat moeilijk om te ontcijferen. Het goede nieuws is dat Visual Studio Code de functieaanroepstack voor u verwerkt. Standaard worden alleen de zinvolle informatie weergegeven in het deelvenster Oproepstack . We gebruiken aanroepstackgegevens om de code te vinden die tot deze uitzondering heeft geleid.

We weten dat de uitzondering is opgetreden in de aanroep naar de formatValueForDisplay() functie.

1. Ga in het deelvenster foutopsporingsprogramma naar het deelvenster Oproepstack .

2. Dubbelklik op de functie eronder printForeignValues om te zien waar de formatValueForDisplay() functie is aangeroepen.

   Visual Studio Code gaat naar de regel in de printForeignValues functie in uw currency.js bestand, waar de formatValueForDisplay() functie is aangeroepen:

   const displayValue = formatValueForDisplay(convertedValue);
   

Kijk goed naar deze coderegel. De parameter die de uitzondering veroorzaakt, is afkomstig van de convertedValue variabele. U moet weten op welk punt deze parameterwaarde wordt undefined.

Een optie is om een onderbrekingspunt toe te voegen aan deze regel en de variabele te inspecteren telkens wanneer het onderbrekingspunt op deze regel stopt. Maar we weten niet wanneer de verkeerde waarde kan optreden, en in complexe programma's kan deze foutopsporingsbenadering lastig zijn. Laten we eens kijken naar een alternatieve methode.

Een voorwaardelijk onderbrekingspunt toevoegen

Wat nuttig zou zijn in ons geval is om het foutopsporingsprogramma alleen op dit onderbrekingspunt te stoppen als de waarde van de convertedValue variabele is undefined. Gelukkig kan Visual Studio Code deze actie uitvoeren met de rechtermuisknop op opties.

1. Klik in het currency.js bestand in de linkermarge op regel 31 met de rechtermuisknop en selecteer Voorwaardelijk onderbrekingspunt toevoegen.

   

2. Nadat u met de rechtermuisknop hebt geklikt, voert u de volgende voorwaarde in om het onderbrekingspunt te activeren en drukt u op Enter:

   `convertedValue === undefined`
   

3. Start het programma opnieuw op.

Het programma moet nu stoppen op regel 31 en we kunnen de aanroepstackwaarden onderzoeken.

De huidige status observeren

Laten we even de tijd nemen om de huidige programmastatus te analyseren.

• De waarde van de convertedValue variabele komt van de aanroep naar de convertToCurrency(value, sourceCurrency, targetCurrency) functie. We moeten de parameterwaarden in deze functie-aanroep controleren en bevestigen dat ze juist zijn.

• In het bijzonder moeten we de value variabele onderzoeken en bevestigen dat deze de verwachte waarde 10heeft.

Kijk ook naar de code van de functie convertToCurrency().

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

U weet dat het resultaat van deze code undefined is. U weet ook dat de value variabele is ingesteld op 10. Deze informatie helpt ons te zien dat het probleem moet zijn met de waarde van de exchangeRate variabele.

Beweeg in het currency.js bestand de muisaanwijzer over de rates variabele om een kijkje te nemen:

U probeert de wisselkoers te wijzigen van EUR in JPY, maar wanneer u de EUR-waarde uitvouwt, ziet u dat er alleen een conversieverhouding wordt weergegeven voor USD. De conversieverhouding voor JPY ontbreekt.

Ontbrekende conversieverhoudingen oplossen

Nu u weet dat er een aantal conversieverhoudingen ontbreken. gaat u kijken waardoor dat komt. Als u alle bestaande onderbrekingspunten wilt verwijderen, selecteert u in het deelvenster Onderbrekingspunten het pictogram Alle onderbrekingspunten verwijderen.

Bekijk de variabele tarieven

Laten we een onderbrekingspunt instellen om de rates variabele te bekijken.

1. Voeg in het currency.js bestand een onderbrekingspunt toe aan de regel 37 in de setExchangeRate(0.88, 'USD', 'EUR'); functie.

2. Selecteer Plus in het deelvenster Controle en voer deze inrates.

   Telkens wanneer de waarde van de rates variabele wordt gewijzigd, wordt de bijgewerkte waarde weergegeven in het deelvenster Controle .

3. Start het programma opnieuw op.

4. Wanneer het onderbrekingspunt stopt bij de eerste aanroep om te setExchangeRate() werken, gebruikt u de stap over het besturingselement.

5. Bekijk in het deelvenster Controle de waarde van de rates variabele.

   Op dit moment USD en EUR hebben overeenkomende tegenovergestelde conversiepercentages, zoals we verwacht.

6. Stap opnieuw over bij de tweede aanroep naar de setExchangeRate() functie.

   U ziet dat USD en JPY dezelfde tegenovergestelde conversieverhoudingen hebben, maar dat er niets tussen EUR en JPY staat.

Het is tijd om de code voor de setExchangeRate() functie te bekijken.

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;
}

De belangrijkste regels in deze functie zijn de laatste twee. Het lijkt erop dat je de tweede bug hebt gevonden! De conversiepercentages worden alleen tussen de sourceCurrency en targetCurrency variabelen ingesteld. Het programma moet ook de conversieverhouding berekenen voor de andere valuta's die zijn toegevoegd.

De code herstellen

Laten we de code voor het conversiepercentage oplossen.

1. Werk uw currency.js bestand bij om de conversieverhouding voor de andere valuta's te berekenen.

   Vervang de code op regel 12 en 13:

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

   met deze bijgewerkte 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. Sla de wijzigingen in het bestand op.

Met de bijgewerkte code wordt de conversieverhouding ingesteld voor valuta's van andere valuta's en sourceCurrencytargetCurrency. Het programma gebruikt de conversieverhouding van de omrekening van de sourceCurrency koers tussen de andere valuta en targetCurrency. De code stelt vervolgens de conversieverhouding voor de andere valuta dienovereenkomstig in.

Notitie

Deze oplossing werkt alleen als de koersen tussen sourceCurrency en andere valuta's al bestaan, wat in dit geval een acceptabele beperking is.

De correctie testen

We gaan onze wijziging testen.

1. Verwijder alle onderbrekingspunten en bekijk variabelen.

2. Start het programma opnieuw op.

U ziet nu het verwachte resultaat in de console, zonder enige vastloper.

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

Dat is alles. U hebt nu de code hersteld. U kunt nu efficiënt fouten opsporen in code die u van te voren niet eens kende met behulp van Visual Studio Code. Klaar!

Ontwikkelcontainer opschonen

Nadat u het project hebt voltooid, kunt u uw ontwikkelomgeving opschonen of teruggaan naar de typische status.

Externe ontwikkeling (browser)

Als u de GitHub Codespaces-omgeving verwijdert, zorgt u ervoor dat u de hoeveelheid gratis rechten per kernuren kunt maximaliseren die u voor uw account krijgt.

Belangrijk

Zie GitHub Codespaces maandelijks inbegrepen opslag- en kernuren voor meer informatie over de rechten van uw GitHub-account.

1. Meld u aan bij het GitHub Codespaces-dashboard (https://github.com/codespaces).

2. Zoek uw momenteel uitgevoerde Codespaces die afkomstig zijn uit de MicrosoftDocs/node-essentials GitHub-opslagplaats.

   

3. Open het contextmenu voor de coderuimte en selecteer Verwijderen.

   

Lokale ontwikkeling (Docker)

U hoeft niet per se uw lokale omgeving op te schonen, maar u kunt de actieve ontwikkelcontainer stoppen en terugkeren naar het uitvoeren van Visual Studio Code in de context van een lokale werkruimte.

1. Open het opdrachtenpalet, zoek naar de Dev Containers-opdrachten en selecteer vervolgens Dev Containers: Map lokaal opnieuw openen.

   

Tip

Visual Studio Code stopt de actieve ontwikkelingscontainer, maar de container bestaat nog steeds in Docker in een gestopte status. U hebt altijd de mogelijkheid om de containerinstantie, containerinstallatiekopieën en volumes van Docker te verwijderen om meer ruimte vrij te maken op uw lokale computer.

Doorgaan