Freigeben über


Browserverknüpfung in ASP.NET Core

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der Supportrichtlinie für .NET und .NET Core. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Von Nicolò Carandini und Tom Dykstra

Browserverknüpfung ist ein Visual Studio-Feature. Sie stellen einen Kommunikationskanal zwischen der Entwicklungsumgebung und einem oder mehreren Webbrowsern dar. Verwenden Sie eine Browserverknüpfung zu folgenden Zwecken:

  • Gleichzeitiges Aktualisieren Ihrer Web-App in mehreren Browsern.
  • Mehrere Browser übergreifendes Testen mit bestimmten Einstellungen wie Bildschirmgrößen.
  • Auswahl von Benutzeroberflächenelementen in Browsern in Echtzeit und Beobachten, mit welchem Markup und welcher Quelle in Visual Studio eine Korrelation besteht.
  • Durchführen von Browsertestautomatisierung in Echtzeit.

Laufzeitkompilierung im Vergleich zu Hot Reload

Verwenden Sie die Browserverknüpfung mit Laufzeitkompilierung oder Hot Reload, um die Auswirkung von Laufzeitänderungen in Razor (.cshtml) Dateien anzuzeigen. Wir empfehlen die Verwendung von Hot Reload.

Wenn Sie ein ASP.NET Core-Projekt geöffnet haben, zeigt Visual Studio das Symbolleisten-Steuerelement für Browserverknüpfungen neben dem Symbolleisten-Steuerelement Debugart an:

Dropdownmenü für Browserverknüpfungen

Über das Symbolleisten-Steuerelement für Browserverknüpfungen können Sie folgende Aktionen ausführen:

  • Aktualisieren einer Web-App in mehreren Browsern gleichzeitig
  • Öffnen des Dashboards für Browserverknüpfungen
  • Aktivieren/Deaktivieren von Browserverknüpfungen.
  • Aktivieren oder Deaktivieren von CSS Hot Reload.

Aktualisieren einer Web-App in mehreren Browsern gleichzeitig

Wenn Sie einen einzelnen Webbrowser auswählen möchten, der beim Starten des Projekts gestartet werden soll, verwenden Sie das Dropdownmenü im Symbolleisten-Steuerelement Debugziel:

F5-Dropdownmenü

Zum gleichzeitigen Öffnen mehrerer Browser klicken Sie in der Dropdownliste auf Browserauswahl... . Halten Sie die Taste STRG gedrückt, um die gewünschten Browser auszuwählen, und klicken Sie dann auf Durchsuchen:

Gleichzeitiges Öffnen mehrerer Browser

Der folgende Screenshot zeigt Visual Studio mit geöffneter Indexansicht und zwei geöffneten Browsern:

Beispiel für die Synchronisierung mit zwei Browsern

Zeigen Sie auf das Symbolleisten-Steuerelement für Browserverknüpfungen, um sich die Browser anzeigen zu lassen, die mit dem Projekt verbunden sind:

Hovertipp

Wenn Sie etwas in der Indexansicht ändern und anschließend im Symbolleisten-Steuerelement für Browserverknüpfungen auf die Schaltfläche zum Aktualisieren klicken, werden alle verbundenen Browser aktualisiert:

Browser werden mit Änderungen synchronisiert

Browserverknüpfungen funktionieren auch, wenn Sie Browser außerhalb von Visual Studio starten und zur App-URL navigieren.

Öffnen Sie im Featuredropdownmenü das Fenster Dashboard für Browserverknüpfungen, um die Verbindung mit geöffneten Browsern zu verwalten:

how-to-open-browserlink-dashboard

Die verbundenen Browser werden mit dem Pfad zu der Seite angezeigt, die von den einzelnen Browsern angezeigt wird:

Dashboard für Browserverknüpfungen: zwei Verbindungen

Sie können auch auf einen einzelnen Browsernamen klicken, um nur diesen einen Browser zu aktualisieren.

Wenn Sie die Browserverknüpfungen nach einer Deaktivierung wieder aktivieren, müssen Sie die Browser aktualisieren, um sie neu zu verbinden.

Aktivieren oder Deaktivieren von CSS Hot Reload

Wenn CSS Hot Reload aktiviert ist, werden verbundene Browser automatisch aktualisiert, wenn Sie Änderungen an CSS-Dateien vornehmen.

Funktionsweise

Die Browserverknüpfung erstellt mit SignalR einen Kommunikationskanal zwischen Visual Studio und dem Browser. Wenn die Browserverknüpfung aktiviert ist, fungiert Visual Studio als SignalR-Server, mit dem mehrere Clients (Browser) eine Verbindung herstellen können. Die Browserverknüpfung registriert auch eine Middleware-Komponente in der ASP.NET Core-Anforderungspipeline. Diese Komponente fügt jeder Seitenanforderung des Servers besondere <script>-Verweise hinzu. Sie können sich die Skriptverweise anzeigen lassen, indem Sie im Browser auf Quelltext anzeigen klicken und zum Ende des <body>-Taginhalts scrollen:

    <!-- Visual Studio browser link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End browser link -->
</body>

Ihre Quelldateien werden nicht geändert. Die Middlewarekomponente fügt die Skriptverweise dynamisch ein.

Da der browserseitige Code komplett in JavaScript geschrieben ist, funktioniert er in allen Browsern, die SignalR ohne ein zusätzliches Browser-Plug-In unterstützt.

Von Nicolò Carandini und Tom Dykstra

Browserverknüpfungen sind ein Visual Studio-Feature. Sie stellen einen Kommunikationskanal zwischen der Entwicklungsumgebung und einem oder mehreren Webbrowsern dar. Verwenden Sie eine Browserverknüpfung zu folgenden Zwecken:

  • Gleichzeitiges Aktualisieren Ihrer Web-App in mehreren Browsern.
  • Mehrere Browser übergreifendes Testen mit bestimmten Einstellungen wie Bildschirmgrößen.
  • Auswahl von Benutzeroberflächenelementen in Browsern in Echtzeit und Beobachten, mit welchem Markup und welcher Quelle in Visual Studio eine Korrelation besteht.
  • Durchführen von Browsertestautomatisierung in Echtzeit. Die Browserverknüpfung ist auch erweiterbar.

Fügen Sie Ihrem Projekt das Paket Microsoft.VisualStudio.Web.BrowserLink hinzu. Aktivieren Sie für Razor-Seiten für ASP.NET Core oder für MVC-Projekte außerdem die Laufzeitkompilierung von Razor-Dateien (.cshtml), wie unter Kompilierung von Razor-Dateien in ASP.NET Core beschrieben. Razor-Syntaxänderungen werden nur bei aktivierter Laufzeitkompilierung angewendet.

Wenn Sie ein ASP.NET Core 2.0-Projekt in ein ASP.NET Core 2.1-Projekt konvertieren und auf das Metapaket „Microsoft.AspNetCore.App“ umstellen, installieren Sie das Paket Microsoft.VisualStudio.Web.BrowserLink für das Feature „Browserverknüpfung“. In ASP.NET Core 2.1-Projektvorlagen wird standardmäßig das Metapaket Microsoft.AspNetCore.App verwendet.

In den ASP.NET Core 2.0-Projektvorlagen Webanwendung, Leer und Web-API wird das Metapaket „Microsoft.AspNetCore.All“ verwendet, das einen Paketverweis auf Microsoft.VisualStudio.Web.BrowserLink enthält. Daher ist für das Metapaket Microsoft.AspNetCore.All keine weitere Aktion erforderlich, um Browserverknüpfungen verwendbar zu machen.

Die ASP.NET Core 1.x-Projektvorlage Webanwendung verfügt über einen Paketverweis auf das Paket Microsoft.VisualStudio.Web.BrowserLink. Bei anderen Projekttypen müssen Sie Microsoft.VisualStudio.Web.BrowserLink den Paketverweis manuell hinzufügen.

Konfiguration

Rufen Sie UseBrowserLink in der Startup.Configure-Methode auf:

app.UseBrowserLink();

Der Befehl UseBrowserLink wird in der Regel in einem if-Block platziert, mit dem Browserverknüpfungen nur in der Entwicklungsumgebung aktiviert werden. Zum Beispiel:

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Weitere Informationen finden Sie unter Verwenden mehrerer Umgebungen in ASP.NET Core.

Wenn Sie ein ASP.NET Core-Projekt geöffnet haben, zeigt Visual Studio das Symbolleisten-Steuerelement für Browserverknüpfungen neben dem Symbolleisten-Steuerelement Debugziel an:

Dropdownmenü für Browserverknüpfungen

Über das Symbolleisten-Steuerelement für Browserverknüpfungen können Sie folgende Aktionen ausführen:

  • Aktualisieren einer Web-App in mehreren Browsern gleichzeitig
  • Öffnen des Dashboards für Browserverknüpfungen
  • Aktivieren/Deaktivieren von Browserverknüpfungen. Hinweis: Browserverknüpfungen sind in Visual Studio standardmäßig deaktiviert.
  • Aktivieren oder Deaktivieren der automatischen CSS-Synchronisierung

Aktualisieren einer Web-App in mehreren Browsern gleichzeitig

Wenn Sie einen einzelnen Webbrowser auswählen möchten, der beim Starten des Projekts gestartet werden soll, verwenden Sie das Dropdownmenü im Symbolleisten-Steuerelement Debugziel:

F5-Dropdownmenü

Zum gleichzeitigen Öffnen mehrerer Browser klicken Sie in der Dropdownliste auf Browserauswahl... . Halten Sie die Taste STRG gedrückt, um die gewünschten Browser auszuwählen, und klicken Sie dann auf Durchsuchen:

Gleichzeitiges Öffnen mehrerer Browser

Der folgende Screenshot zeigt Visual Studio mit geöffneter Indexansicht und zwei geöffneten Browsern:

Beispiel für die Synchronisierung mit zwei Browsern

Zeigen Sie auf das Symbolleisten-Steuerelement für Browserverknüpfungen, um sich die Browser anzeigen zu lassen, die mit dem Projekt verbunden sind:

Hovertipp

Wenn Sie etwas in der Indexansicht ändern und anschließend im Symbolleisten-Steuerelement für Browserverknüpfungen auf die Schaltfläche zum Aktualisieren klicken, werden alle verbundenen Browser aktualisiert:

Browser werden mit Änderungen synchronisiert

Browserverknüpfungen funktionieren auch, wenn Sie Browser außerhalb von Visual Studio starten und zur App-URL navigieren.

Öffnen Sie im Featuredropdownmenü das Fenster Browserlink-Dashboard, um die Verbindung mit geöffneten Browsern zu verwalten:

Dashboard für Browserverknüpfungen öffnen

Wenn kein Browser verbunden ist, können Sie eine Nichtdebuggingsitzung starten, indem Sie auf den Link In Browser anzeigen klicken:

Dashboard für Browserverknüpfungen: keine Verbindungen

Andernfalls werden die verbundenen Browser mit dem Pfad zu der Seite angezeigt, die von den einzelnen Browsern angezeigt wird:

Dashboard für Browserverknüpfungen: zwei Verbindungen

Sie können auch auf einen einzelnen Browsernamen klicken, um nur diesen einen Browser zu aktualisieren.

Wenn Sie die Browserverknüpfungen nach einer Deaktivierung wieder aktivieren, müssen Sie die Browser aktualisieren, um sie neu zu verbinden.

Aktivieren oder Deaktivieren der automatischen CSS-Synchronisierung

Wenn die automatische CSS-Synchronisierung aktiviert ist, werden verbundene Browser automatisch aktualisiert, wenn Sie Änderungen an CSS-Dateien vornehmen.

Funktionsweise

Die Browserverknüpfung erstellt mit SignalR einen Kommunikationskanal zwischen Visual Studio und dem Browser. Wenn die Browserverknüpfung aktiviert ist, fungiert Visual Studio als SignalR-Server, mit dem mehrere Clients (Browser) eine Verbindung herstellen können. Die Browserverknüpfung registriert auch eine Middlewarekomponente in der Anforderungspipeline von ASP.NET Core. Diese Komponente fügt jeder Seitenanforderung des Servers besondere <script>-Verweise hinzu. Sie können sich die Skriptverweise anzeigen lassen, indem Sie im Browser auf Quelltext anzeigen klicken und zum Ende des <body>-Taginhalts scrollen:

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End Browser Link -->
</body>

Ihre Quelldateien werden nicht geändert. Die Middlewarekomponente fügt die Skriptverweise dynamisch ein.

Da der browserseitige Code komplett in JavaScript geschrieben ist, funktioniert er in allen Browsern, die SignalR ohne ein zusätzliches Browser-Plug-In unterstützt.