Apps uitvoeren en fouten opsporen die zijn ingeschakeld voor Azure Developer CLI
Apps uitvoeren en fouten opsporen op uw lokale computer met behulp van de Visual Studio Code-extensie voor Azure Developer CLI (azd
). In deze handleiding gebruikt u de React-web-app met node.js-API en MongoDB in azure-sjablonen . U kunt de principes die u in dit artikel leert, toepassen op een van de Azure Developer CLI-sjablonen.
Vereisten
De Visual Studio Code-extensie voor Azure Developer CLI installeren
Via Visual Studio Code
Open Visual Studio Code.
Selecteer Extensies in het menu Beeld.
Voer in het zoekveld in
Azure Developer CLI
.Selecteer Installeren.
Via Marketplace
Ga in uw browser naar de pagina Azure Developer CLI - VS Code-extensie .
Selecteer Installeren.
Een nieuwe app initialiseren
Maak en open een nieuwe map in Visual Studio Code.
Selecteer in het menu Beeld opdrachtpalet....
Typ en kies
Azure Developer: init
.Selecteer de sjabloon
Azure-Samples/todo-nodejs-mongo
.
Verken de volgende bestanden die zijn opgenomen in de .vscode
map:
Bestand | Beschrijving |
---|---|
launch.json |
Hiermee definieert u de foutopsporingsconfiguraties, zoals de foutopsporingsweb - en foutopsporings-API. als u de configuratieopties voor foutopsporing wilt zien, selecteert u Uitvoeren in het menu Beeld. De beschikbare configuraties voor foutopsporing worden boven aan het deelvenster weergegeven. Zie Foutopsporing voor meer informatie over foutopsporing in Visual Studio Code. |
tasks.json |
Hiermee definieert u de configuraties voor het starten van de web- of API-server. Als u deze configuratieopties wilt zien, opent u het opdrachtpalet en voert u Taak uit : taak uitvoeren. Zie Integreren met externe hulpprogramma's via Taken voor meer informatie over Visual Studio Code Tasks. |
Notitie
Als u de C#SWA-func MS SQL-sjabloon gebruikt, moet u de API-taak starten en vervolgens de foutopsporings-API (F5) handmatig starten. Wanneer u wordt gevraagd een keuze te maken uit een lijst met actieve .NET-processen, zoekt u de naam van uw toepassing en selecteert u deze.
De Azure-resources inrichten
Voordat u begint met foutopsporing, moet u de benodigde Azure-resources inrichten.
Open het opdrachtpalet.
Voer Azure Developer in: Azure-resources inrichten.
Fouten opsporen in een API
De foutopsporingsconfiguratie-API voert automatisch de API-server uit en koppelt het foutopsporingsprogramma. Als u dit patroon wilt testen, voert u de volgende stappen uit:
Open de map
lists.ts
vansrc/api/src/routes
uw project.Stel een onderbrekingspunt in op regel 16.
Selecteer op de activiteitsbalk de foutopsporingspijl uitvoeren en foutopsporings-API-foutopsporing >>starten.
Selecteer console voor foutopsporing in het menu Beeld.
Wacht tot het bericht aangeeft dat het foutopsporingsprogramma luistert op poort 3100.
Voer in de terminalshell van uw voorkeur de volgende opdracht in:
curl http://localhost:3100/lists
Wanneer het onderbrekingspunt dat u eerder hebt ingesteld, wordt de uitvoering van de app onderbroken. Op dit moment kunt u standaard foutopsporingstaken uitvoeren, zoals:
- Variabelen inspecteren
- Bekijk de aanroepstack
- Stel andere onderbrekingspunten in.
Druk om
<F5>
door te gaan met het uitvoeren van de app. De voorbeeld-app retourneert een lege lijst.
Fouten opsporen in een React Frontend-app
Als u de foutopsporingswebconfiguratie wilt gebruiken, moet u beide starten:
- De API-server
- De ontwikkelwebserver
Als u dit patroon wilt testen, voert u de volgende stappen uit:
Open het opdrachtenpalet en voer de taak uit : Taak uitvoeren.
Voer de START-API en het web in en selecteer deze
U kunt controleren of de lokale webserver wordt uitgevoerd door te navigeren naar de volgende URL in een webbrowser:
http://localhost:3000
Open
todoItemListPane.tsx
de map vansrc/web/src/components
uw project.Stel een onderbrekingspunt in op regel 150 (de eerste regel van de
deleteItems
functie).Selecteer in de activiteitenbalk de optie Uitvoeren en fouten opsporen in de webdebugconfiguratie>> met de pijl Foutopsporing starten.
Als u de web-app uitvoert, wordt de volgende URL geopend in uw standaardbrowser:
http://localhost:3000
. U kunt nu fouten in de app opsporen door een item toe te voegen, dit te selecteren in de lijst en Verwijderen te selecteren.Wanneer het onderbrekingspunt dat u eerder hebt ingesteld, wordt de uitvoering van de app onderbroken. Op dit moment kunt u standaard foutopsporingstaken uitvoeren, zoals:
- Variabelen inspecteren
- Bekijk de aanroepstack
- Andere onderbrekingspunten instellen
Druk
<F5>
om door te gaan met het uitvoeren van de app en het geselecteerde item wordt verwijderd.
Apps uitvoeren en fouten opsporen die zijn gebouwd op uw lokale computer met behulp van Visual Studio en Azure Developer CLI (azd
). In deze handleiding gebruikt u de React Web App met C#-API en MongoDB in Azure-sjabloon . U kunt de principes die u in dit artikel leert, toepassen op een van de Azure Developer CLI-sjablonen.
Vereisten
De preview-functie installeren en inschakelen
Visual Studio Preview installeren
Notitie
Dit verschilt van Visual Studio. Als u de niet-preview-versie van Visual Studio hebt, moet u deze nog steeds installeren.
Open Visual Studio Preview.
Selecteer in het menu Extra opties Preview-functies>.
Zorg ervoor dat integratie met azd, de Azure Developer CLI is ingeschakeld.
De API-oplossing openen
Open de
Todo.Api.sln
oplossing in de/src/api
map.Als u de
azd
integratiefunctie hebt ingeschakeld, wordt hetazure.yaml
bestand gedetecteerd. Visual Studio initialiseert automatisch het app-model en voert het uitazd env refresh
.Vouw Verbinding maken ed Services uit om alle afhankelijkheden weer te geven.
Hoewel de webfront-end die wordt uitgevoerd op Azure-app Service geen deel uitmaakt van de API-oplossing, wordt deze gedetecteerd en opgenomen onder Serviceafhankelijkheden
Uitvoeren en fouten opsporen
Open de map
ListController.cs
vansrc/api
uw project.Stel een onderbrekingspunt in op regel 20.
Klik op
<F5>
.Wacht tot het bericht aangeeft dat de webserver luistert op poort 3101.
Voer in de browser van uw voorkeur het volgende adres in:
https://localhost:3101/lists
Wanneer het onderbrekingspunt dat u eerder hebt ingesteld, wordt de uitvoering van de app onderbroken. Op dit moment kunt u standaard foutopsporingstaken uitvoeren, zoals:
- Variabelen inspecteren
- Bekijk de aanroepstack
- Andere onderbrekingspunten instellen
Druk om
<F5>
door te gaan met het uitvoeren van de app.De voorbeeld-app retourneert een lijst (of een lege lijst [] als u de webfront-end nog niet hebt gestart):
[{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
Andere azd
integraties
Omgeving beheren azd
De omgeving beheren azd
:
Selecteer ... in de rechterbovenhoek van het deelvenster Serviceafhankelijkheden .
Selecteer een van de volgende opties in de vervolgkeuzelijst:
- Een nieuwe omgeving maken
- Een specifieke omgeving selecteren en instellen als de huidige actieve omgeving
- De inrichting van een omgeving ongedaan maken
Omgevingsbronnen inrichten
U kunt Azure-resources inrichten in uw omgeving.
Klik in Verbinding maken ed Services op het pictogram rechtsboven om omgevingsbronnen te herstellen/inrichten.
Bevestig de omgevingsnaam, het abonnement en de locatie.
Uw app publiceren
Als u updates aanbrengt, kunt u uw app publiceren door de volgende stappen uit te voeren:
Vouw in Solution Explorer Verbinding maken ed Services uit.
Selecteer Publiceren.
Selecteer Een publicatieprofiel toevoegen.
Selecteer een doel van Azure en selecteer Volgende.
Selecteer De Azure Developer CLI-omgeving en selecteer Volgende.
Selecteer de -omgeving.
Selecteer Voltooien.
Meer informatie
Hulp vragen
Ga naar de pagina voor probleemoplossing en ondersteuning voor informatie over het indienen van een bug, hulp vragen of een nieuwe functie voorstellen voor de Azure Developer CLI.