Köra och felsöka appar som är aktiverade för Azure Developer CLI
Kör och felsöka appar på din lokala dator med hjälp av Visual Studio Code-tillägget för Azure Developer CLI (azd
). I den här guiden använder du React Web App med Node.js API och MongoDB i Azure-mallen . Du kan tillämpa de principer som du lär dig i den här artikeln på någon av Azure Developer CLI-mallarna.
Öppna Visual Studio Code.
På menyn Visa väljer du Tillägg.
I sökfältet anger du
Azure Developer CLI
.Välj Installera.
Gå till sidan Azure Developer CLI – VS Code Extension i webbläsaren.
Välj Installera.
Skapa och öppna en ny katalog i Visual Studio Code.
På menyn Visa väljer du Kommandopalett....
Skriv och välj
Azure Developer: init
.Välj mallen
Azure-Samples/todo-nodejs-mongo
.
Utforska följande filer som ingår i .vscode
katalogen:
Fil | beskrivning |
---|---|
launch.json |
Definierar felsökningskonfigurationer som Felsökningswebb och Felsöknings-API. om du vill se konfigurationsalternativen för felsökning väljer du Kör på menyn Visa . De tillgängliga felsökningskonfigurationerna visas överst i fönstret. Mer information om felsökning i Visual Studio Code finns i Felsökning. |
tasks.json |
Definierar konfigurationerna för att starta webben eller API-servern. Om du vill se de här konfigurationsalternativen öppnar du kommandopaletten och kör Aktivitet: kör uppgift. Mer information om Visual Studio Code-uppgifter finns i Integrera med externa verktyg via uppgifter. |
Anteckning
Om du använder mallen C# SWA-func MS SQL måste du starta aktiviteten Starta API manuellt och sedan felsöka API (F5). När du uppmanas att välja från en lista över att köra .NET-processer söker du efter namnet på ditt program och väljer det.
Innan du börjar felsöka etablerar du nödvändiga Azure-resurser.
Öppna kommandopaletten.
Ange Azure Developer: etablera Azure-resurser.
Felsökningskonfigurations-API:et felsöker automatiskt API-servern och kopplar felsökningsprogrammet. Gör följande för att testa det här mönstret:
Öppna från projektets
src/api/src/routes
kataloglists.ts
.Ange en brytpunkt på rad 16.
I aktivitetsfältet väljer du Run and Debug Debug>Debug API debug configuration >Start Debugging arrow (Starta felsökningspil).
På menyn Visa väljer du Felsökningskonsol.
Vänta tills meddelandet som anger att felsökaren lyssnar på port 3100.
I önskat terminalgränssnitt anger du följande kommando:
curl http://localhost:3100/lists
När brytpunkten som du angav tidigare har nåtts pausas appkörningen. Nu kan du utföra vanliga felsökningsuppgifter, till exempel:
- Granska variabler
- Titta på anropsstacken
- Ange andra brytpunkter.
Tryck
<F5>
på för att fortsätta köra appen. Exempelappen returnerar en tom lista.
Om du vill använda webbkonfigurationen för felsökning måste du starta båda:
- API-servern
- Webbservern för utveckling
Gör följande för att testa det här mönstret:
Öppna kommandopaletten och kör Aktivitet: Kör uppgift.
Ange och välj Starta API och webb
Du kan kontrollera om den lokala webbservern körs genom att gå till följande URL i en webbläsare:
http://localhost:3000
.Öppna i projektets
src/web/src/components
katalogtodoItemListPane.tsx
.Ange en brytpunkt på rad 150 (funktionens
deleteItems
första rad).I aktivitetsfältet väljer du Run and Debug Debug>Web debug configuration > the Start Debugging arrow (Starta felsökningspilen).
Om du kör webbappen öppnas följande URL i standardwebbläsaren:
http://localhost:3000
. Du kan nu felsöka appen genom att lägga till ett objekt, välja det i listan och välja Ta bort.När brytpunkten som du angav tidigare har nåtts pausas appkörningen. Nu kan du utföra vanliga felsökningsuppgifter, till exempel:
- Granska variabler
- Titta på anropsstacken
- Ange andra brytpunkter
Tryck
<F5>
på för att fortsätta köra appen så tas det markerade objektet bort.
Kör och felsöka appar som bygger på din lokala dator med hjälp av Visual Studio och Azure Developer CLI (azd
). I den här guiden använder du React Web App med C#API och MongoDB i Azure-mallen . Du kan tillämpa de principer som du lär dig i den här artikeln på någon av Azure Developer CLI-mallarna.
Installera Visual Studio Preview
Anteckning
Detta skiljer sig från Visual Studio. Om du har en version av Visual Studio som inte är förhandsversion måste du fortfarande installera den.
Öppna Visual Studio Preview.
På menyn Verktyg väljer du Alternativ>Förhandsgranskningsfunktioner.
Se till att Integrering med azd, Azure Developer CLI är aktiverat.
Todo.Api.sln
Öppna lösningen i/src/api
katalogen.Om du har aktiverat integreringsfunktionen
azd
azure.yaml
identifieras filen. Visual Studio initierar automatiskt appmodellen och körazd env refresh
.Expandera Anslut ed Services för att se alla beroenden.
Webbklientdelen som körs på Azure App Service är inte en del av API-lösningen, men den identifieras och ingår under Tjänstberoenden
Öppna från projektets
src/api
katalogListController.cs
.Ange en brytpunkt på rad 20.
Tryck på
<F5>
.Vänta på meddelandet som anger att webbservern lyssnar på port 3101.
I önskad webbläsare anger du följande adress:
https://localhost:3101/lists
När brytpunkten som du angav tidigare har nåtts pausas appkörningen. Nu kan du utföra vanliga felsökningsuppgifter, till exempel:
- Granska variabler
- Titta på anropsstacken
- Ange andra brytpunkter
Tryck
<F5>
på för att fortsätta köra appen.Exempelappen returnerar en lista (eller en tom lista [] om du inte har startat webbklientdelen tidigare):
[{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
Så här hanterar du azd
miljön:
Välj ... i det övre högra hörnet i fönstret Tjänstberoenden .
Välj något av följande alternativ i den nedrullningsbara menyn:
- Skapa en ny miljö
- Välj och ange en specifik miljö som den aktuella aktiva miljön
- Avetablera en miljö
Du kan etablera Azure-resurser i din miljö.
I Anslut ed Services klickar du på ikonen längst upp till höger för att återställa/etablera miljöresurser.
Bekräfta miljönamnet, prenumerationen och platsen.
Om du gör några uppdateringar kan du publicera din app genom att göra följande:
I Solution Explorer expanderar du Anslut ed Services.
Välj Publicera.
Välj Lägg till en publiceringsprofil.
Välj ett Mål för Azure och välj Nästa.
Välj Azure Developer CLI Environment och välj Nästa.
Välj miljö.
Välj Slutför.
Information om hur du skickar in en bugg, begär hjälp eller föreslår en ny funktion för Azure Developer CLI finns på felsöknings - och supportsidan .