Delen via

Browserkoppeling in ASP.NET Core

Opmerking

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikel voor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie het .NET- en .NET Core-ondersteuningsbeleid voor meer informatie. Zie de .NET 9-versie van dit artikel voor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikel voor de huidige release.

Door Nicolò Carandini en Tom Dykstra

Browserkoppeling is een Visual Studio-functie. Er wordt een communicatiekanaal gemaakt tussen de ontwikkelomgeving en een of meer webbrowsers. Gebruik de browserkoppeling voor het volgende:

  • Vernieuw uw web-app in verschillende browsers tegelijk.
  • Test in meerdere browsers met specifieke instellingen, zoals schermgrootten.
  • Selecteer UI-elementen in browsers in realtime en bekijk met welke opmaak en broncode ze in Visual Studio zijn gecorreleerd.
  • Voer realtime browsertestautomatisering uit.

Runtime-compilatie versus hot-reload

Gebruik browserkoppeling met runtimecompilatie of hot-reload om het effect van runtimewijzigingen in Razor (.cshtml) bestanden te bekijken. We raden u aan hot reload te gebruiken.

Wanneer u een ASP.NET Core-project hebt geopend, toont Visual Studio de werkbalkknop voor browserlink naast de knop Foutopsporingstype op de werkbalk.

dropdownmenu voor browserlink

Via het browserkoppeling werkbalkbesturing kunt u het volgende doen:

  • Vernieuw de web-app in verschillende browsers tegelijk.
  • Open het browserkoppelingsdashboard.
  • Browserkoppeling in- of uitschakelen.
  • CSS Hot Reload in- of uitschakelen.

De web-app in meerdere browsers tegelijk vernieuwen

Als u een enkele webbrowser wilt kiezen om te starten bij het opstarten van het project, gebruikt u de keuzelijst in het interface-element Debug-doel.

Vervolgkeuzelijst F5

Als u meerdere browsers tegelijk wilt openen, kiest u Bladeren met... in dezelfde vervolgkeuzelijst. Houd Ctrl ingedrukt om de gewenste browsers te selecteren en klik vervolgens op Bladeren:

Veel browsers tegelijk openen

In de volgende schermopname ziet u Visual Studio met de indexweergave geopend en twee geopende browsers:

Voorbeeld van synchroniseren met twee browsers

Beweeg de muisaanwijzer over de werkbalkcontrole van de browserlink om de browsers te zien die zijn verbonden met het project.

Aanwijstip

Wijzig de indexweergave en alle verbonden browsers worden bijgewerkt wanneer u op de knop Vernieuwen van browserkoppeling klikt:

Browsers synchroniseren met wijzigingen

De browserkoppeling werkt ook met browsers die u buiten Visual Studio start om vervolgens naar de URL van de app te navigeren.

Open het venster browserkoppelingsdashboard vanuit het dropdownmenu van de browserkoppeling om de verbinding met geopende browsers te beheren.

how-to-open-browserlink-dashboard

De verbonden browsers worden weergegeven met het pad naar de pagina die elke browser weergeeft:

Browserkoppelingsdashboard twee verbindingen

U kunt ook op een afzonderlijke browsernaam klikken om alleen die browser te vernieuwen.

Wanneer u de browserkoppeling opnieuw inschakelt nadat u deze hebt uitgeschakeld, moet u de browsers vernieuwen om ze opnieuw te verbinden.

CSS-hot-reload in- of uitschakelen

Wanneer css dynamisch opnieuw laden is ingeschakeld, worden verbonden browsers automatisch vernieuwd wanneer u wijzigingen aanbrengt in CSS-bestanden.

Hoe het werkt

browserkoppeling gebruikt SignalR om een communicatiekanaal te creëren tussen Visual Studio en de browser. Wanneer de browserkoppeling is ingeschakeld, fungeert Visual Studio als een SignalR server waarmee meerdere clients (browsers) verbinding kunnen maken. De browserkoppeling registreert ook een middlewareonderdeel in de ASP.NET Core-aanvraagpijplijn. Dit onderdeel injecteert speciale <script> verwijzingen naar elke paginaaanvraag van de server. U kunt de scriptverwijzingen zien door de bron weergeven in de browser te selecteren en naar het einde van de <body> taginhoud te schuiven:

    <!-- 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>

Uw bronbestanden worden niet gewijzigd. Het middlewareonderdeel injecteert de scriptverwijzingen dynamisch.

Omdat de code aan de browserzijde alle JavaScript is, werkt deze voor alle browsers die SignalR ondersteuning bieden zonder dat hiervoor een browserinvoegtoepassing nodig is.

Door Nicolò Carandini en Tom Dykstra

Browser Link is een Visual Studio-functie. Er wordt een communicatiekanaal gemaakt tussen de ontwikkelomgeving en een of meer webbrowsers. "Gebruik Browser Link om:"

  • Vernieuw uw web-app in verschillende browsers tegelijk.
  • Test in meerdere browsers met specifieke instellingen, zoals schermgrootten.
  • Selecteer UI-elementen in browsers in realtime en bekijk met welke opmaak en broncode ze in Visual Studio zijn gecorreleerd.
  • Voer realtime browsertestautomatisering uit. Browserkoppeling is ook uitbreidbaar.

Voeg het pakket Microsoft.VisualStudio.Web.BrowserLink toe aan uw project. Voor ASP.NET Core Razor Pages- of MVC-projecten kunt u ook runtimecompilatie van Razor (.cshtml) bestanden inschakelen, zoals beschreven in Razor bestandscompilatie in ASP.NET Core. Razor syntaxiswijzigingen worden alleen toegepast wanneer runtimecompilatie is ingeschakeld.

Wanneer u een ASP.NET Core 2.0-project converteert naar ASP.NET Core 2.1 en overstapt naar het Microsoft.AspNetCore.App metapackage, installeert u het pakket Microsoft.VisualStudio.Web.BrowserLink voor browserkoppelingsfunctionaliteit. De ASP.NET Core 2.1-projectsjablonen gebruiken standaard de Microsoft.AspNetCore.App metapackage.

De projectsjablonen ASP.NET Core 2.0 Web Application, Empty en Web API maken gebruik van de metapackage Microsoft.AspNetCore.All, die een pakketverwijzing bevat voor Microsoft.VisualStudio.Web.BrowserLink. Daarom vereist het gebruik van de Microsoft.AspNetCore.All metapackage geen verdere actie om Browser Link te activeren.

De projectsjabloon ASP.NET Core 1.x Web Application bevat een pakketreferentie voor het Microsoft.VisualStudio.Web.BrowserLink-pakket . Voor andere projecttypen moet u een pakketreferentie toevoegen aan Microsoft.VisualStudio.Web.BrowserLink.

Configuratie

Roep UseBrowserLink aan in de Startup.Configure methode:

app.UseBrowserLink();

De UseBrowserLink aanroep wordt meestal in een if blok geplaatst dat Browser Link alleen inschakelt in de ontwikkelomgeving. Voorbeeld:

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

Zie ASP.NET Core runtime-omgevingen voor meer informatie.

Wanneer u een ASP.NET Core-project hebt geopend, toont Visual Studio de werkbalkknop van de Browser Link naast de knop voor foutopsporing:

Browserlink-vervolgkeuzemenu

Via de bediening van de Browserkoppeling-werkbalk kunt u:

  • Vernieuw de web-app in verschillende browsers tegelijk.
  • Open het browserkoppelingsdashboard.
  • Browserkoppeling in- of uitschakelen. Opmerking: Browserkoppeling is standaard uitgeschakeld in Visual Studio.
  • Automatische synchronisatie van CSS in- of uitschakelen.

De web-app in meerdere browsers tegelijk vernieuwen

Als u een enkele webbrowser wilt kiezen om te starten bij het opstarten van het project, gebruikt u de keuzelijst in het interface-element Debug-doel.

Vervolgkeuzelijst F5

Als u meerdere browsers tegelijk wilt openen, kiest u Bladeren met... in dezelfde vervolgkeuzelijst. Houd Ctrl ingedrukt om de gewenste browsers te selecteren en klik vervolgens op Bladeren:

Veel browsers tegelijk openen

In de volgende schermopname ziet u Visual Studio met de indexweergave geopend en twee geopende browsers:

Voorbeeld van synchroniseren met twee browsers

Beweeg de muisaanwijzer over de Browser Link werkbalkbediening om de browsers te zien die verbonden zijn met het project:

Aanwijstip

Wijzig de indexweergave en alle verbonden browsers worden bijgewerkt wanneer u op de knop Vernieuwen van browserkoppeling klikt:

Browsers synchroniseren met wijzigingen

Browser Link werkt ook met browsers die u buiten Visual Studio start en navigeer naar de URL van de app.

Open het browserkoppelingsdashboard in de vervolgkeuzelijst Browserkoppeling om de verbinding met geopende browsers te beheren:

open-browserslink-dashboard

Als er geen browser is verbonden, kunt u een sessie zonder foutopsporing starten door de koppeling Weergave in browser te selecteren:

Browserlink dashboard geen verbindingen

Anders worden de verbonden browsers weergegeven met het pad naar de pagina die elke browser weergeeft:

Browserlink dashboard twee verbindingen

U kunt ook op een afzonderlijke browsernaam klikken om alleen die browser te vernieuwen.

Wanneer u browserkoppeling opnieuw inschakelt nadat u deze hebt uitgeschakeld, moet u de browsers vernieuwen om ze opnieuw te verbinden.

Automatische synchronisatie van CSS in- of uitschakelen

Wanneer AUTOMATISCHE synchronisatie van CSS is ingeschakeld, worden verbonden browsers automatisch vernieuwd wanneer u CSS-bestanden wijzigt.

Hoe het werkt

Browser Link gebruikt SignalR om een communicatiekanaal tussen Visual Studio en de browser te creëren. Wanneer Browser Link is ingeschakeld, fungeert Visual Studio als een SignalR server waarmee meerdere clients (browsers) verbinding kunnen maken. Browser Link registreert ook een middlewareonderdeel in de ASP.NET Core-aanvraagpijplijn. Dit onderdeel injecteert speciale <script> verwijzingen naar elke paginaaanvraag van de server. U kunt de scriptverwijzingen zien door de bron weergeven in de browser te selecteren en naar het einde van de <body> taginhoud te schuiven:

    <!-- 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>

Uw bronbestanden worden niet gewijzigd. Het middlewareonderdeel injecteert de scriptverwijzingen dynamisch.

Omdat de code aan de browserzijde alle JavaScript is, werkt deze voor alle browsers die SignalR ondersteuning bieden zonder dat hiervoor een browserinvoegtoepassing nodig is.