Visual Studio für die Webentwicklung

  • Artikel

Microsoft Visual Studio ist eine integrierte Entwicklungsumgebung (IDE). Verwenden Sie es, um Ihre Web-Apps zu bearbeiten, zu debuggen, zu erstellen und zu veröffentlichen. Visual Studio ist ein funktionsreiches Programm, das für viele Aspekte Ihrer Webentwicklung verwendet werden kann.

Zusätzlich zum Standard-Editor und Debugger, die die meisten IDEs bereitstellen, enthält Visual Studio Features, die Ihren Entwicklungsprozess vereinfachen, einschließlich:

  • Compiler.
  • Code-Vervollständigungstools.
  • Grafische Designer.
  • Und viele weitere Features.

Wenn Sie Visual Studio noch nicht verwenden, wechseln Sie zum Herunterladen von Visual Studio .

Derzeit unterstützt Visual Studio 2019 das Debuggen von JavaScript in Microsoft Edge für Ihre ASP.NET Framework- und ASP.NET Core-Apps. Führen Sie die folgenden Schritte aus, um Visual Studio zum Debuggen von Microsoft Edge zu verwenden.

Starten von Microsoft Edge

Führen Sie die Schritte in diesem Abschnitt aus, um Visual Studio für die folgenden Schritte zu verwenden:

  • Erstellen Sie Ihre ASP.NET- und ASP.NET Core-App.
  • Starten Sie einen Webserver.
  • Starten Sie Microsoft Edge.
  • Verbinden Sie den Visual Studio-Debugger mit einer einzigen Schaltfläche.

Mit dem vereinfachten Workflow können Sie JavaScript debuggen, das in Microsoft Edge direkt über Ihre IDE ausgeführt wird.

Erstellen einer neuen ASP.NET Core Web-App

Erstellen Sie zunächst wie folgt eine neue ASP.NET Core-Web-App:

  1. Öffnen Sie Visual Studio 2019, und wählen Sie Neues Projekt erstellen aus.

  2. Geben Sie react in das Suchfeld auf dem nächsten Bildschirm ein.

  3. Wählen Sie in der Liste der Vorlagen ASP.NET Core mit React.js und dann Weiter aus.

Erstellen einer neuen ASP.NET Core-Web-App mit React.js

Diese React.js-Vorlage gibt an, wie React.js in eine ASP.NET Core-App integriert werden kann.

Sie haben nun ein Projekt für eine ASP.NET Core Web-App erstellt.

Starten von Microsoft Edge aus Visual Studio

Führen Sie als Nächstes das ASP.NET Core-Web-App-Projekt in Visual Studio aus, und debuggen Sie es wie folgt:

  1. Öffnen Sie ClientApp/src/components/Counter.js.

  2. Wählen Sie die Dropdownliste neben der grünen Schaltfläche Wiedergeben aus, und IIS Express.

    Die Dropdownliste neben der grünen Schaltfläche

  3. Wählen Sie Skriptdebuggen>aktiviert aus.

    Aktivieren des Skriptdebuggens in Visual Studio

  4. Wählen Sie in derselben Dropdownliste Webbrowser> den Vorschaukanal von Microsoft Edge aus, den Visual Studio starten soll, z. B. Microsoft Edge Canary, Dev oder Beta. Wenn Sie noch keinen der Microsoft Edge-Vorschaukanäle verwenden, wechseln Sie zu Microsoft Edge Insider Channels herunterladen , um einen herunterzuladen.

    Wählen Sie den Vorschaukanal von Microsoft Edge aus, den Visual Studio starten soll.

  5. Wählen Sie die grüne Schaltfläche Wiedergabe aus. Visual Studio erstellt Ihre App, startet den Webserver, startet Microsoft Edge und navigiert zu oder zu https://localhost:44362/ einem beliebigen Port, der in launchSettings.jsonangegeben ist.

    Microsoft Edge wird von Visual Studio gestartet

Fahren Sie mit den folgenden Schritten fort.

Debuggen von JavaScript-Code, der in Microsoft Edge ausgeführt wird

  1. Wechseln Sie zurück zu Visual Studio, um einen Haltepunkt festzulegen.

  2. Legen Sie in Counter.jsin Zeile 13 einen Haltepunkt fest, indem Sie den Bundsteg neben der Zeile auswählen.

    Wählen Sie den Bundsteg neben Zeile 13 in Counter.js aus, um einen Haltepunkt in Visual Studio festzulegen.

  3. Wechseln Sie zurück zum instance von Microsoft Edge, das Visual Studio gestartet hat.

  4. Wählen Sie im Navigationsmenü oben auf der Webseite Counter und dann Increment aus.

    Die Counter-Seite in unserer ASP.NET Core Web-App

  5. Der JavaScript-Debugger in Visual Studio erreicht den Haltepunkt, den Sie in Counter.jsfestgelegt haben. Visual Studio hält jetzt die Laufzeit von JavaScript an, die in Microsoft Edge ausgeführt wird, und Sie können das Skript Zeile für Zeile durchlaufen.

Visual Studio hält javaScript-Ausführung in Microsoft Edge an

Im obigen Ansatz haben Sie Microsoft Edge aus Visual Studio gestartet. Alternativ können Sie den Visual Studio-Debugger wie unten beschrieben an eine bereits ausgeführte instance von Microsoft Edge anfügen.

Das Beispiel war nur eine kleinere Demonstration der in Visual Studio verfügbaren Funktionalität. Weitere Informationen zu den Funktionen in Visual Studio 2019 finden Sie in der Visual Studio-Dokumentation.

Anfügen des Visual Studio-Debuggers an eine ausgeführte instance von Microsoft Edge

So fügen Sie den Visual Studio-Debugger an eine instance von Microsoft Edge an, die bereits ausgeführt wird:

  1. Stellen Sie sicher, dass keine Instanzen von Microsoft Edge ausgeführt werden.

  2. Führen Sie über die Befehlszeile den folgenden Befehl aus:

    start msedge --remote-debugging-port=9222

  3. Wählen Sie in Visual Studio Debuggen>An Prozess anfügen oder STRG+ALT+P aus.

    Auswählen von

  4. Legen Sie im Dialogfeld An den Prozess anhängendie Option Verbindungstyp auf Websocket des Chrome devtools-Protokolls (keine Authentifizierung) fest.

  5. Geben Sie im Textfeld Ziel verbinden den Text ein http://localhost:9222/ , und drücken Sie dann die EINGABETASTE.

  6. Sehen Sie sich die Liste der geöffneten Registerkarten in Microsoft Edge an, die im Abschnitt Verfügbare Prozesse aufgeführt sind.

    Konfigurieren des Dialogfelds

  7. Wählen Sie in der Liste die Registerkarte aus, die Sie debuggen möchten, und wählen Sie dann Anfügen aus.

  8. Wählen Sie im Dialogfeld Codetyp auswählendie Option JavaScript (Microsoft Edge – Chromium) und dann OK aus.

Der Visual Studio-Debugger ist jetzt an Microsoft Edge angefügt. Sie können die Ausführung von JavaScript anhalten, Haltepunkte festlegen und Anweisungen direkt im Fenster Debugausgabe in Visual Studio anzeigenconsole.log().

Edge DevTools-Erweiterung für Visual Studio

Debuggen Sie Ihre ASP.NET Projekte in Visual Studio mit den Edge-Entwicklertools. Sie können die Microsoft Edge-Entwicklertools in Microsoft Visual Studio einbetten, um Ihre ASP.NET Projekte live zu debuggen. Laden Sie die Microsoft Edge-Entwicklertools für Visual Studio herunter.

So verwenden Sie die Erweiterung

  1. Stellen Sie sicher, dass Visual Studio 2022 und die ASP.NET Workload installiert sind.

  2. Richten Sie Web Live Preview als Standard-Web Forms Designer ein, wie auf der obigen Seite beschrieben.

  3. Öffnen Sie ein ASP.NET-Projekt.

  4. Öffnen Sie eine Webseite des Projekts im Fenster Entwurf .

  5. Klicken Sie oben links im Fenster Entwurf auf die Schaltfläche Open Edge DevTools (Open Edge DevTools icon):

Ein ASP.NET Projekt beim Öffnen von Edge DevTools

Edge DevTools für Visual Studio wird geöffnet, wobei das Tool Elemente ausgewählt ist:

Microsoft Edge Developer Tools für Visual Studio: Elements-Tool von DevTools

Das Netzwerktool ist ebenfalls standardmäßig geöffnet:

Microsoft Edge Developer Tools für Visual Studio: Netzwerktool von DevTools

Das Tool "Überprüfen " (Toolsymbol) und " Screencast umschalten " (Screencast-Symbol ") sind verfügbar, und das Menü Weitere Tools (Symbol ") bietet die Tools "Probleme", "Netzwerkbedingungen" und " Netzwerkanforderungen blockieren" :

Das Edge DevTools-Fenster von Visual Studio, abgedockt

Siehe auch:

Kontakt mit dem Microsoft Visual Studio-Team aufnehmen

Die Microsoft Visual Studio- und Microsoft Edge-Teams möchten mehr darüber erfahren, wie Sie mit JavaScript in Visual Studio arbeiten. Um Ihr Feedback zu senden, wählen Sie in Visual Studio das Symbol Feedback senden aus, oder twittern @VisualStudio and @EdgeDevToolsSie .

Symbol