Visual Studio für die Webentwicklung

Microsoft Visual Studio ist eine integrierte Entwicklungsumgebung (IDE). Verwenden Sie sie, um Ihre Web-Apps zu bearbeiten, zu debuggen, zu erstellen und zu veröffentlichen. Es handelt sich um ein funktionsreiches Programm, das für viele Aspekte Ihrer Webentwicklung verwendet werden kann. Neben dem Standard-Editor und Debugger, den die meisten IDEs bereitstellen, enthält Visual Studio die folgenden Features, um Ihren Entwicklungsprozess zu vereinfachen.

  • Compiler
  • Codeerledigungstools
  • Grafische Designer
  • Viele weitere

Wenn Sie Visual Studio noch nicht verwenden, navigieren Sie zu Download Visual Studio, um es herunterzuladen.

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 Microsoft Edge

Visual Studio können Ihre ASP.NET- und ASP.NET Core-App erstellen, einen Webserver starten, Microsoft Edge starten und den Visual Studio-Debugger mit einer einzigen Schaltfläche verbinden.

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

Erstellen einer neuen 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 weiteraus.

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

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

Starten Microsoft Edge über Visual Studio

Nachdem das Projekt erstellt wurde, verwenden Sie Visual Studio, um JavaScript zu debuggen.

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

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

    Die Dropdownliste neben der grünen Wiedergabeschaltfläche und IIS Express

  3. Wählen Sie Skriptdebugging > aktiviertaus.

    Aktivieren des Skriptdebuggings in Visual Studio

  4. Wählen Sie in derselben Dropdownliste webbrowser > den Vorschaukanal der Microsoft Edge aus, die Visual Studio starten möchten, z. B. Microsoft Edge Canary, Dev oder Beta. Wenn Sie noch keinen der Microsoft Edge Vorschaukanäle verwenden, navigieren Sie zu Download Microsoft Edge Insider Channels, um einen herunterzuladen.

    Wählen Sie den Vorschaukanal der Microsoft Edge aus, die Visual Studio starten möchten

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

    Microsoft Edge wird über Visual Studio gestartet

Debuggen von JavaScript in Microsoft Edge

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

  1. Counter.jsLegen Sie in Zeile 13 einen Haltepunkt fest, indem Sie die Leitungen neben der Linie auswählen.

    Wählen Sie die Leitungen neben Zeile 13 in Counter.js aus, um einen Haltepunkt in Visual Studio

  2. Wechseln Sie zurück zur Instanz von Microsoft Edge, die gestartet Visual Studio.

  3. Wählen Sie im Navigationsmenü oben auf der Webseite die Option "Zähler" aus, und wählen Sie dann "Erhöhen" aus.

    Die Seite "Zähler" in unserer ASP.NET Core-Web-App

  4. Der JavaScript-Debugger in Visual Studio erreicht den Haltepunkt, den Sie in festgelegt Counter.js haben. Visual Studio hält nun die Laufzeit von JavaScript an, das in Microsoft Edge ausgeführt wird, und Sie können das Skript zeilenweise durchlaufen.

    Visual Studio hält die Ausführung von JavaScript in Microsoft Edge an

Das Beispiel war nur eine kleine Demonstration der in Visual Studio verfügbaren Funktionalität. For more information about the functionality in Visual Studio 2019, navigate to Visual Studio documentation.

Anfügen an Microsoft Edge

Zuvor haben Sie Microsoft Edge von Visual Studio gestartet. Alternativ können Sie den Visual Studio Debugger wie folgt an eine Instanz von Microsoft Edge anfügen, die bereits ausgeführt wird.

  1. Stellen Sie zunächst sicher, dass keine ausgeführten Instanzen von Microsoft Edge vorhanden sind.

  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 anhängen" oder Ctrl + Alt + P aus.

    Select Attach to Process in Visual Studio

  4. Legen Sie im Dialogfeld "An Prozess anhängen" den Verbindungstyp auf chrome devtools protocol websocket (keine Authentifizierung) fest.

  5. Geben Sie im Textfeld "Ziel verbinden" http://localhost:9222/ ein, und wählen Sie Enter es aus.

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

    Konfigurieren des Dialogfelds "An Prozess anhängen" in Visual Studio

  7. Wählen Sie die Registerkarte aus, die Sie debuggen möchten, und wählen Sie dann Anhängenaus.

  8. Wählen Sie im Dialogfeld Codetyp auswählen JavaScript (Microsoft Edge - Chromium) aus, und wählen Sie OKaus.

Der debugger Visual Studio ist jetzt an Microsoft Edge angefügt. Sie können die Ausführung von JavaScript anhalten, Haltepunkte festlegen und console.log() Anweisungen direkt im Debugausgabefenster in Visual Studio anzeigen.

Kontakt mit dem Microsoft Visual Studio-Team aufnehmen

Die teams Microsoft Visual Studio und Microsoft Edge 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 und @EdgeDevTools.

Das Symbol "Feedback senden" in Visual Studio