Visual Studio für die Webentwicklung

Microsoft Visual Studio ist eine integrierte Entwicklungsumgebung (INTEGRATED Development Environment, IDE). Verwenden Sie sie, 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, den die meisten IDEs bereitstellen, enthält Visual Studio Features, die Ihren Entwicklungsprozess vereinfachen, einschließlich:

  • Compiler.
  • Codevollstä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 folgende Aufgaben 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 im Suchfeld auf dem nächsten Bildschirm react ein.

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

Erstellen Sie eine neue ASP.NET Core-Web-App mit React.js.

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

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

Starten von Microsoft Edge in 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 "Wiedergeben" und IIS Express.

  3. Wählen Sie "Skriptdebugging > aktiviert" aus.

    Aktivieren Sie das Skriptdebugging 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 Preview-Kanäle verwenden, wechseln Sie zum Herunterladen von Microsoft Edge Insider Channels , 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 " Wiedergeben" aus . Visual Studio erstellt Ihre App, startet den Webserver, startet Microsoft Edge und navigiert zu https://localhost:44362/ oder zu dem 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 Counter.jsSie in einen Haltepunkt in Zeile 13 fest, indem Sie den Bundsteg neben der Linie 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 zur Instanz von Microsoft Edge, die Visual Studio gestartet hat.

  4. Wählen Sie im Navigationsmenü oben auf der Webseite " Zähler " und dann " Erhöhen" 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 zeilenweise durchlaufen.

Visual Studio hält JavaScript an, das in Microsoft Edge ausgeführt wird.

Im obigen Ansatz haben Sie Microsoft Edge aus Visual Studio heraus gestartet. Alternativ können Sie den Visual Studio-Debugger an eine Instanz von Microsoft Edge anfügen, die bereits ausgeführt wird, wie unten beschrieben.

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

Anfügen eines Visual Studio-Debuggers an eine ausgeführte Instanz von Microsoft Edge

So fügen Sie den Visual Studio-Debugger an eine Instanz 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 "An****Prozess anfügen debuggen > " oderP``Ctrl+Alt+ " aus.

    Wählen Sie in Visual Studio "Debuggen > An Den Prozess anhängen" aus.

  4. Legen Sie im Dialogfeld "An Prozess anhängen " den Verbindungstyp auf das Chrome DevTools-Protokollwebsocket (keine Authentifizierung) fest.

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

  6. Überprüfen Sie die Liste der geöffneten Registerkarten in Microsoft Edge, die im Abschnitt "Verfügbare Prozesse" aufgeführt sind.

    Konfigurieren des Dialogfelds "An Prozess anfügen" in Visual Studio.

  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ählen" JavaScript (Microsoft Edge – Chromium) aus, und wählen Sie "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 Developer Tools 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 Entwurfsfenster .

  5. Klicken Sie oben links im Entwurfsfenster auf die Schaltfläche "Edge DevTools öffnen" (Symbol "Edge devTools öffnen").

Ein ASP.NET Projekt, das Edge DevTools öffnet.

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

Microsoft Edge Developer Tools for Visual Studio: Elements tool of DevTools.

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

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

Das Tool "Überprüfen" (Symbol "Tool prüfen")" und "Umschalten " (Umschalten-Screencastsymbol) sind verfügbar, und das Menü " Weitere Tools " (Symbol "Weitere Tools") enthält die Tools "Probleme", "Netzwerkbedingungen" und " Netzwerkanforderungsblockierung ":

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 das Symbol " Feedback senden " in Visual Studio aus, oder twittern Sie @VisualStudio and @EdgeDevTools.

Das Symbol "Feedback senden" in Visual Studio.