Föregående

Nästa

Övning – Felsöka med Visual Studio Code

Slutförd

Det är dags att få användning av dina nyligen förvärvade felsökningskunskaper i praktiken. Det visar sig att vi har den perfekta möjligheten. I vår Tailwind Traders-app utvecklar vi en ny funktion där produktens pris kan visas i olika valutor. En medarbetare skrev kod för det, men de har svårt att ta reda på vad som går fel. Vi tar och hjälper till.

Skapa en JavaScript-fil på en Visual Studio-arbetsyta

I den här övningen behöver du en JavaScript-fil för att öva på felsökning. Om du vill använda startkontrollerna för felsökningsprogrammet måste JavaScript-filen finnas på en Visual Studio-arbetsyta.

Målet med programmet är att ange växelkursen mellan tre valutor, USD, EUR och JPY. Sedan vill vi visa hur mycket värde 10 EUR som finns i de andra valutorna med hjälp av två siffror efter decimaltecknet. När en valuta läggs till ska växelkursen för alla andra valutor beräknas.

1. Skapa en fil med namnet mycurrency.js i undermappen ./nodejs-debug/ i Visual Studio Code.

2. Klistra in följande kod i den nya filredigeraren:

   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. Spara filen genom att trycka på Ctrl+S (Windows, Linux) eller Cmd+S (Mac).

Skapa en startkonfiguration

Vi kommer att använda felsökningsprogrammet ganska mycket, så vi börjar med att skapa en startkonfiguration för appen.

1. På fliken Kör i Visual Studio Code väljer du Skapa en launch.json-fil och väljer felsökningsprogrammet Node.js.

   Visual Studio Code skapar konfigurationsfilen .vscode/launch.json i roten på arbetsytan och öppnar startfilen för redigering.

   

   Som standard skapas en startkonfiguration för att köra den fil som är öppen för tillfället. I det här exemplet är mycurrency.jsden öppna filen . Du kan ändra startkonfigurationen för att anpassa hur programmet ska starta när du felsöker.

2. I startkonfigurationen visar du värdet för program egenskapen.

   {
       // 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} anger arbetsytans rot.

3. .vscode/launch.json Stäng filen.

Kommentar

Du kan skapa olika startkonfigurationer för projektet genom att välja Lägg till konfiguration längst ned till höger.

Analysera problemen

Kontrollera att Visual Studio Code-miljön är redo att övervaka felsökningsprocessen:

• Felsökningspanelen ska vara öppen till vänster. Använd ikonen Kör flik till vänster för att växla synlighet för panelen.
• Felsökningskonsolen ska vara öppen längst ned. Du kan öppna konsolen genom att välja Visa>felsökningskonsol eller genom att trycka på Ctrl+Skift+Y (Windows, Linux) eller Cmd+Shift+Y (Mac).

Nu är du redo att börja felsöka.

I startkontrollerna för felsökningsprogrammet startar du programmet med felsökning aktiverat (den gröna pilen).

Du bör se att programmet slutförs snabbt. Det är normalt eftersom du inte har lagt till några brytpunkter ännu.

Du bör se den här texten i felsökningskonsolen, följt av ett undantag.

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

Målet med programmet är att ange växelkursen mellan tre valutor (USD, EUR och JPY), samt visa värdet för 10 EUR i alla de andra valutorna med två decimaler.

Vi kan se två buggar här:

• Det finns fler än två decimaler efter decimaltecknet.
• Programmet kraschade med ett undantag och kunde inte visa JPY-värdet.

Dricks

• Ange "outputCapture": "std", till startkonfigurationsfilen för att öka loggningsutdata.
• Ange en loggpunkt i stället för en brytpunkt för att undvika att stoppa programkörningen. En loggpunkt "bryter" inte in i felsökningsprogrammet utan loggar i stället ett meddelande till konsolen. Loggpunkter är särskilt användbara för att mata in loggning vid felsökning av produktionsservrar som inte kan pausas eller stoppas.

Åtgärda siffervisningen

Vi börjar med att åtgärda den första buggen. Eftersom det inte var du som skrev koden och det finns flera funktioner som anropas börjar vi med att ta reda på hur körningsflödet ser ut med hjälp av steg för steg-körning.

Använda brytpunkter och steg för steg-körning

Om du vill lägga till en brytpunkt väljer du i vänstermarginalen på rad 39, på printForeignValues(10, 'EUR');.

Börja felsöka igen och gå in i printForeignValues() funktionen med steget i felsökningskontrollen:

Kontrollera tillståndet för variabler

Ta nu lite tid att inspektera de olika variabelvärdena i fönstret Variabler .

• Vilka är värdena för variablerna value och sourceCurrency ?
• För variabeln rates ser du de tre förväntade nycklarna , USD, EURoch JPY?

Om du vill gå vidare steg för steg tills variabeln convertedValue har angetts använder du kontrollen Steg över felsökning:

När du har använt kontrollen Step over fem gånger bör du se värdet för variabeln convertedValue anges som förväntat 11.363636363636365.

Om vi går över en gång till ser vi värdet för variabeln displayValue . Värdet ska vara den formaterade strängen för visning med två siffror 11.36.

Vi kan sedan dra slutsatsen att fram till denna punkt i programmet fungerar funktionerna convertToCurrency() och formatValueForDisplay() verkar korrekta, och de returnerar det förväntade resultatet.

Korrigera misstaget

Använd Steget till kontroll en gång för att nå anropet console.info() till funktionen. Granska den här kodraden noggrant. Ser du misstaget här?

Vi måste åtgärda programfelet med hjälp av variabeln displayValue i stället för variabeln convertedValue för att skriva ut värdet.

1. currency.js Uppdatera filen så att den använder rätt variabelnamn. Ändra anropet till console.info() funktionen på rad 32 så att variabeln displayValue används i stället för variabeln convertedValue :

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

2. Spara ändringarna i filen.

3. Starta om programmet.

Kontrollera att programmet korrekt visar USD värdet som 11.36. Första buggen – löst.

Hitta orsaken till kraschen

Nu ska vi ta reda på varför programmet kraschar.

1. currency.js Ta bort brytpunkten som du anger på rad 39 i filen.

2. Om du vill tvinga programmet att pausa efter att undantaget har tagits upp markerar du rutan Ej undantag i fönstret Brytpunkter.

3. Kör programmet i felsökningsprogrammet igen.

Programmet bör pausa undantaget och visa en stor felrapport mitt i redigeringsfönstret.

Titta på raden där körningen stoppades och lägg märke till undantagsmeddelandet TypeError: Cannot read property 'toFixed' of undefined. Från det meddelandet kan du dra slutsatsen att value parameterfunktionen har värdet undefined i stället för att vara ett tal. Det här felet orsakade undantaget.

Spola tillbaka anropsstacken

Den stackspårning som visas under felmeddelandet kan vara något svårtolkad. Som tur är bearbetar Visual Studio Code funktionsanropsstacken åt dig. Som standard visas endast meningsfull information i fönstret Samtalsstack . Nu ska vi använda information om anropsstacken för att hitta koden som ledde till det här undantaget.

Vi vet att undantaget utlöstes i anropet till formatValueForDisplay() funktionen.

1. I felsökningspanelen går du till fönstret Samtalsstack .

2. Om du vill se var formatValueForDisplay() funktionen anropades dubbelklickar du på funktionen under den printForeignValues – funktionen.

   Visual Studio Code går till raden i printForeignValues funktionen i filen currency.js , där formatValueForDisplay() funktionen anropades:

   const displayValue = formatValueForDisplay(convertedValue);
   

Titta närmare på den här kodraden. Parametern som orsakar undantaget kommer från variabeln convertedValue . Du måste ta reda på vid vilken tidpunkt det här parametervärdet blir undefined.

Ett alternativ är att lägga till en brytpunkt på den här raden och sedan inspektera variabeln varje gång brytpunkten stoppas på den här raden. Men vi vet inte när fel värde kan inträffa, och i komplexa program kan den här felsökningsmetoden vara besvärlig. Nu ska vi titta på en alternativ metod.

Lägga till en villkorsstyrd brytpunkt

Vad som skulle vara användbart i vårt fall är att kunna få felsökningsprogrammet att sluta vid den här brytpunkten endast när värdet för variabeln convertedValue är undefined. Som tur är kan Visual Studio Code utföra den här åtgärden med alternativ för högerklicka.

1. currency.js I filen i vänstermarginalen på rad 31 högerklickar du och väljer Lägg till villkorsstyrd brytpunkt.

   

2. När du har högerklickat anger du följande villkor för att utlösa brytpunkten och trycker sedan på Retur:

   `convertedValue === undefined`
   

3. Starta om programmet.

Programmet bör nu stoppas på rad 31 och vi kan undersöka anropsstackens värden.

Observera det aktuella tillståndet

Låt oss ta lite tid att analysera det aktuella programtillståndet.

• Värdet för variabeln convertedValue kommer från anropet till convertToCurrency(value, sourceCurrency, targetCurrency) funktionen. Vi måste kontrollera parametervärdena i det här funktionsanropet och bekräfta att de är korrekta.

• I synnerhet måste vi undersöka variabeln value och bekräfta att den har det förväntade värdet 10.

Ta en titt på koden i funktionen convertToCurrency().

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

Du vet att resultatet av koden är undefined. Du vet också att variabeln är inställd på value10. Den här informationen hjälper oss att se att problemet måste vara med variabelns exchangeRate värde.

currency.js Hovra över variabeln i rates filen för att ta en titt:

Om du försöker hämta växelkursen från EUR till JPY och visar värdet för EUR, kan du se att det bara finns en omräkningskurs för USD. Omräkningskursen för JPY saknas.

Åtgärda saknade omräkningskurser

Nu vet du att vissa omräkningskurser saknas och vi ska ta reda på varför. Om du vill ta bort alla befintliga brytpunkter går du till fönstret Brytpunkter och väljer ikonen Ta bort alla brytpunkter .

Bevaka kursvariabeln

Nu ska vi ange en brytpunkt för att titta på variabeln rates .

1. currency.js Lägg till en brytpunkt på rad 37 i funktionen i setExchangeRate(0.88, 'USD', 'EUR'); filen.

2. I fönstret Klocka väljer du Plus och anger rates.

   Varje gång värdet för variabeln rates ändras visas det uppdaterade värdet i bevakningsfönstret.

3. Starta om programmet.

4. När brytpunkten stoppas vid det första anropet till setExchangeRate() funktionen använder du kontrollen Steg över.

5. I fönstret Klocka tittar du på värdet för variabeln rates .

   I det här läget USD och EUR har matchande motsatta konverteringskurser, som vi förväntade oss.

6. Gå över igen vid det andra anropet setExchangeRate() till funktionen.

   Du ser att USD och JPY har matchande motsatta omräkningskurser, men det finns ingenting mellan EUR och JPY.

Det är dags att titta på koden för setExchangeRate() funktionen.

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 viktigaste raderna i den här funktionen är de två sista. Det verkar som om du har hittat den andra buggen! Omräkningskurserna anges endast mellan variablerna sourceCurrency och targetCurrency . Programmet måste också beräkna konverteringskursen för de andra valutor som har lagts till.

Åtgärda koden

Nu ska vi åtgärda koden för konverteringsfrekvensproblemet.

1. currency.js Uppdatera filen för att beräkna konverteringsfrekvensen för de andra valutorna.

   Ersätt koden på raderna 12 och 13:

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

   med den här uppdaterade koden:

   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. Spara ändringarna i filen.

Den uppdaterade koden anger konverteringsfrekvensen för andra valutor och sourceCurrencytargetCurrency. Programmet använder konverteringskursen sourceCurrency för för att härleda kursen mellan den andra valutan och targetCurrency. Koden anger sedan konverteringskursen för den andra valutan i enlighet med detta.

Kommentar

Den här korrigeringen fungerar bara om kurserna mellan sourceCurrency och andra valutor redan finns, vilket är en acceptabel begränsning i det här fallet.

Testa korrigeringen

Vi testar ändringen.

1. Ta bort alla brytpunkter och titta på variabler.

2. Starta om programmet.

Du bör nu se det förväntade resultatet i konsolen utan någon krasch.

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

Klart! Nu har du korrigerat koden. Du kan nu effektivt felsöka kod som du inte ens känner till i förväg genom att använda Visual Studio Code. Bra gjort!

Rensningsutvecklingscontainer

När du har slutfört projektet kanske du vill rensa utvecklingsmiljön eller återställa den till dess typiska tillstånd.

Fjärrutveckling (webbläsare)

Om du tar bort GitHub Codespaces-miljön kan du maximera mängden kostnadsfria timmar per kärna som du får för ditt konto.

Viktigt!

Mer information om ditt GitHub-kontos rättigheter finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

1. Logga in på GitHub Codespaces-instrumentpanelen (https://github.com/codespaces).

2. Leta upp de codespaces som körs från MicrosoftDocs/node-essentials GitHub-lagringsplatsen.

   

3. Öppna snabbmenyn för kodområdet och välj Ta bort.

   

Lokal utveckling (Docker)

Du behöver inte nödvändigtvis rensa din lokala miljö, men du kan stoppa utvecklingscontainern som körs och återgå till att köra Visual Studio Code i kontexten för en lokal arbetsyta.

1. Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Öppna mappen lokalt igen.

   

Dricks

Visual Studio Code stoppar utvecklingscontainern som körs, men containern finns fortfarande i Docker i ett stoppat tillstånd. Du har alltid möjlighet att ta bort containerinstansen, containeravbildningen och volymerna från Docker för att frigöra mer utrymme på den lokala datorn.

Fortsätt