Felsöka med Visual Studio Code

  • 8 minuter

I föregående övning lärde du dig vikten av att kunna köra koden steg för steg med felsökningsprogrammet i Node.js. För ditt arbete med Tailwind Traders-programmet behöver du en mer omfattande felsökningsmiljö i din IDE (Integrerad utvecklingsmiljö).

Nu ska vi se hur man konfigurerar felsökningsprogrammet i Visual Studio Code för användning med Node.js.

Så här använder du Visual Studio Code för Node.js-felsökning

I Visual Studio Code används felsökningsprogrammet från fliken Kör .

Screenshot of Visual Studio Code debug tab.

  • Om du har en .js fil öppen i redigeringsfönstret kan du välja Kör och felsöka och sedan välja Node.js för att direkt felsöka den öppna JavaScript-filen.

    Screenshot of Node.js environment selection drop-down list in Visual Studio Code.

Det finns flera andra sätt att börja felsöka i Visual Studio Code. I nästa övning använder vi en launch.json-fil. Utvecklingsteam använder ofta en launch.json-fil för att anpassa körningskonfigurationen. Med konfigurationen som anges i en .json-fil kan du kontrollera den i källkontrollen. Från källkontrollen kan du dela konfigurationen i hela teamet.

Kontrollera flödet genom att lägga till brytpunkter

Till skillnad från det inbyggda kommandoradsfelsökaren Node.js börjar Felsökningsprogrammet för Visual Studio Code omedelbart köra koden. Om programmet slutar snabbt kanske du inte har möjlighet att interagera med felsökningsprogrammet. Därför kanske du vill lägga till brytpunkter innan du kör koden. Vi lägger till och tar bort några brytpunkter i nästa övning.

Om du vill lägga till en brytpunkt i koden letar du upp kodraden i JavaScript-filen (.js) där du vill lägga till en brytpunkt. Bredvid radnumret för kodsatsen väljer du i vänstermarginalen. När brytpunkten läggs till visas en röd cirkel bredvid radnumret. Om du vill ta bort brytpunkten väljer du den röda cirkeln.

Screenshot of a breakpoint added in the Visual Studio Code editor window.

Du kan också använda snabbmenyn högerklicka för att lägga till en brytpunkt. Innehållsmenyn innehåller alternativet Lägg till villkorsstyrd brytpunkt , där du anger ett villkor för att bryta kodkörningen. En villkorlig brytpunkt är endast aktiv när det angivna villkoret uppfylls.

Screenshot of setting a conditional breakpoint in Visual Studio Code.

Den här brytpunkten stoppar endast körningen när värdet convertedValue för är odefinierat.

Översikt över felsökningsprogrammet i Visual Studio Code

När du har konfigurerat brytpunkterna och startat appen visas nya informationspaneler och kontroller på skärmen.

Screenshot of Visual Studio Code debugger overview.

Antal Name beskrivning
1. Startkontroller för felsökningsprogram Längst upp i sidopanelen hittar du startkontrollerna.
2. Tillstånd för variabler Panelen Variabler visar det aktuella tillståndet för dina variabler.
3. Tillstånd för bevakade variabler Panelen Watch visar aktuellt tillstånd för dina övervakade variabler.
4. Aktuell anropsstack Panelen Samtalsstack visar den aktuella anropsstacken.
5. Inlästa skriptfiler Panelen Inlästa skriptfiler visar de JavaScript-filer som har lästs in hittills.
6. Brytpunkter Panelen Brytpunkter visar alla brytpunkter som du har placerat i koden.
7. Körningskontroller Du kan kontrollera körningsflödet för ditt program med hjälp av dessa kontroller.
8. Aktuellt körningssteg Det aktuella körningssteget är markerat i redigeringsfönstret.
9. Felsökningskonsol Felsökningskonsolen kan användas för att visualisera programkonsolloggarna och för att utvärdera uttryck eller köra kod i den aktuella körningskontexten.

Startkontroller för felsökningsprogram

Längst upp i sidofältet finns startkontrollerna:

Screenshot of Visual Studio Code debug sidebar controls.

Antal Name beskrivning
1. Börja felsöka Börja felsöka programmet.
2. Välj aktiv startkonfiguration Välj den aktiva startkonfigurationen.
3. launch.json Redigera filen Redigera filen launch.json. Skapa json-filen om du behöver.
4. Öppna felsökningskonsolen Öppna felsökningskonsolen och växla synlighet för panelerna Variables, Watch, Call Stack och Breakpoints..

Visa och redigera variablernas tillstånd

När du analyserar orsaken till ett programfel kan du titta på variablernas tillstånd för att söka efter oväntade ändringar. Du kan göra det med panelen Variabler.

Dina variabler visas sorterade efter omfång:

Scope beskrivning
Lokal Lokala variabler är tillgängliga i det aktuella omfånget, vanligtvis i den aktuella funktionen.
Global Globala variabler är tillgängliga överallt i ditt program. Systemobjekt från JavaScript-körningen ingår också, så bli inte förvånad om det finns mycket att gå igenom där.
Stängning Omslutningsvariabler är tillgängliga från den aktuella omslutningen, om sådan finns. En omslutning kombinerar det lokala omfånget för en funktion med omfånget från den yttre funktion som den tillhör.

Möjliga åtgärder är:

  • Utveckla omfång: Du kan utveckla omfång och variabler genom att välja pilen. När du visar mer information om objekt kan du se alla egenskaper som definierats i det här objektet.

  • Ändra variabelvärde: Det går att ändra värdet för en variabel i farten genom att dubbelklicka på variabeln.

  • Titta på en variabel: Genom att hovra över en funktionsparameter eller en variabel direkt i redigeringsfönstret kan du också titta på dess värde.

    Screenshot of variable hover during debugging.

Bevaka variabler

Om du vill spåra ett variabeltillstånd över tid eller olika funktioner kan det bli omständligt att söka efter det varje gång. Då är panelen Bevaka praktisk.

Screenshot of watched variables.

Du kan välja plus-knappen och ange ett variabelnamn eller ett uttryck som du vill bevaka. Alternativt kan du högerklicka på en variabel i fönstret Variabler och välja Lägg till för att titta.

Alla uttryck i bevakningsfönstret uppdateras automatiskt när koden körs.

Anropsstack

Varje gång ditt program kommer till en funktion läggs en post till i anropsstacken. När programmet blir komplext och du har funktioner som anropas i funktioner många gånger, representerar anropsstacken anropsspåret för funktioner.

Det är användbart för att hitta orsaken till ett undantag. Om det uppstår en oväntad krasch i programmet visas ofta något som liknar det här i konsolen:

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Gruppen med at [...]-rader nedanför felmeddelandet kallas stackspårning. Stackspårningen anger namnet och ursprunget för varje funktion som anropades innan undantaget uppstod. Den kan vara svårt att tolka eftersom den även innehåller interna funktioner från Node.js-körningen.

Det är här som panelen Anropsstack Visual Studio Code kommer till pass. Som standard filtrerar den bort oönskad information och visar bara de relevanta funktionerna från din egen kod. Du kan sedan nysta upp anropsstacken för att ta reda på var undantaget kom från.

Du kan få ytterligare hjälp genom att välja knappen Starta om ram som visas när du hovrar över ett funktionsnamn i stacken. Körningen spolas tillbaka till början av funktionen genom att programmet startas om fram till den tidpunkten.

Screenshot of the Restart frame button in the Visual Studio Code call stack panel.

Visa inlästa skriptfiler

Den här panelen visar alla JavaScript-filer som har lästs in hittills. I stora projekt kan det ibland vara bra att kontrollera vilken fil den aktuella koden körs från.

Brytpunkter

På panelen Brytpunkter kan du se och hantera alla brytpunkter som du lagt till i koden. Du kan även växla alternativ för att bryta vid fångade eller ej fångade undantag. Du kan använda fönstret Brytpunkter för att undersöka programtillståndet och spåra källan till ett undantag med hjälp av anropsstacken när ett inträffar.

Styra körningen

Du kan kontrollera körningsflödet för ditt program med hjälp av dessa kontroller.

Screenshot of Visual Studio Code debugger execution controls.

Kontrollerna från vänster till höger är:

  • Continue or pause execution (Fortsätta eller pausa körningen). Om körningen pausas fortsätter den fram till nästa brytpunkt. Om programmet körs växlar knappen till en pausknapp som du kan pausa körningen med.
  • Step over (Gå förbi). Kör nästa instruktion i den aktuella kontexten (samma som kommandot next i det inbyggda felsökningsprogrammet).
  • Step into (Gå vidare till). Som Step over (Gå förbi), men om nästa instruktion är ett funktionsanrop går du vidare till den första instruktionen i funktionen (samma som kommandot step).
  • Gå ut. Om du är inne i en funktion kör du den återstående koden för den här funktionen och går tillbaka till -instruktionen efter det första funktionsanropet out (samma som kommandot).
  • Restart (Starta om). Startar om programmet från början.
  • Stop (Stoppa). Avsluta körningen och stäng felsökningen.

Använda felsökningskonsolen

Felsökningskonsolen kan visas eller döljas genom att trycka på Ctrl+Skift+Y (Windows, Linux) eller Cmd+Skift+Y (Mac). Den kan användas för att visualisera programkonsolloggarna och för att utvärdera uttryck eller köra kod i det aktuella körningsinnehållet exec , som kommandot i det inbyggda Node.js-felsökningsprogrammet.

Du kan ange ett JavaScript-uttryck i inmatningsfältet längst ned i felsökningskonsolen. Tryck sedan på Retur för att utvärdera det. Resultatet visas direkt i konsolen.

Screenshot of Debug console.

På så sätt kan du snabbt kontrollera ett variabelvärde, testa en funktion med olika värden eller ändra det aktuella tillståndet.

Lägg till logpoints i stället för console.log

Linters flaggar console.log instruktioner som fel. För att få samma effekt som console.log -instruktioner använder du Visual Studio Code-loggpunkter i stället, som skrivs ut till felsökningskonsolen.

Lägg till en loggpunkt genom att högerklicka i samma område som du använde för att lägga till en brytpunkt och välj sedan Lägg till loggpunkt. Ange ett meddelande som visas vid den punkten i koden.

Screenshot of adding a logpoint in Visual Studio Code.

Precis som brytpunkter ändrar loggpunkter inte koden på något sätt och används endast under felsökning. Du har inte längre någon ursäkt om du råkar glömma kvar console.log('here') när koden skickas vidare till produktion.