Anteckning
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Varning
Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i supportpolicyn för .NET och .NET Core. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .
Viktigt!
Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.
För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .
Av Nicolò Carandini och Tom Dykstra
Webbläsarlänk är en Visual Studio-funktion. Den skapar en kommunikationskanal mellan utvecklingsmiljön och en eller flera webbläsare. Använd webbläsarlänken för att:
- Uppdatera webbappen i flera webbläsare samtidigt.
- Testa i flera webbläsare med specifika inställningar, till exempel skärmstorlekar.
- Välj gränssnittselement i webbläsare i realtid, se vilken markering och källa den är korrelerad till i Visual Studio.
- Utför realtidstestautomatisering av webbläsare.
Körningskompilering jämfört med frekvent omläsning
Använd Browser Link med körningskompilering eller hot reload för att se effekten av ändringar vid körtid i Razor (.cshtml) filer. Vi rekommenderar att du laddar om frekvent.
Så här använder du webbläsarlänk
När du har ett ASP.NET Core-projekt öppet visar Visual Studio verktygsfältskontrollen för webbläsarlänken bredvid verktygsfältskontrollen Felsökningstyp :
I verktygsfältskontrollen för webbläsarlänken kan du:
- Uppdatera webbappen i flera webbläsare samtidigt.
- Öppna Browser Link-kontrollpanelen.
- Aktivera eller inaktivera Webbläsarlänk.
- Aktivera eller inaktivera CSS Hot Reload.
Uppdatera webbappen i flera webbläsare samtidigt
Om du vill välja en enda webbläsare som ska startas när projektet startas använder du den nedrullningsbara menyn i verktygsfältskontrollen Felsöka mål :
Om du vill öppna flera webbläsare samtidigt väljer du Bläddra med... i samma listruta. Håll ned Ctrl-tangenten för att välja de webbläsare du vill använda och klicka sedan på Bläddra:
Följande skärmbild visar Visual Studio med indexvyn öppen och två öppna webbläsare:
Hovra över verktygsfältskontrollen för webbläsarlänken för att se de webbläsare som är anslutna till projektet:
Ändra indexvyn och alla anslutna webbläsare uppdateras när du klickar på webbläsarlänkens uppdateringsknapp:
webbläsarlänk fungerar också med webbläsare som du startar utanför Visual Studio och navigerar till appens URL.
Instrumentpanelen för webbläsarlänken
Öppna webbläsarlänkens instrumentpanelsfönster från webbläsarlänkens nedrullningsbara meny för att hantera anslutningen med öppna webbläsare:
De anslutna webbläsarna visas med sökvägen till den sida som varje webbläsare visar:
Du kan också klicka på ett enskilt webbläsarnamn om du bara vill uppdatera webbläsaren.
Aktivera eller inaktivera webbläsarlänk
När du återaktiverar webbläsarlänken när du har inaktiverat den måste du uppdatera webbläsarna för att återansluta dem.
Aktivera eller inaktivera snabb inläsning av CSS
När css-frekvent omläsning är aktiverat uppdateras anslutna webbläsare automatiskt när du gör ändringar i CSS-filer.
Så här fungerar det
Webbläsarlänken använder SignalR för att skapa en kommunikationskanal mellan Visual Studio och webbläsaren. När webbläsarlänken är aktiverad fungerar Visual Studio som en SignalR server som flera klienter (webbläsare) kan ansluta till. Webbläsarlänk registrerar också en mellanprogramskomponent i pipelinen för ASP.NET Core-begäran. Den här komponenten matar in särskilda <script> referenser i varje sidbegäran från servern. Du kan se skriptreferenserna genom att välja Visa källa i webbläsaren och rulla till slutet av tagginnehållet <body> :
<!-- 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>
Källfilerna ändras inte. Komponenten mellanprogram matar in skriptreferenserna dynamiskt.
Eftersom koden på webbläsarsidan är javascript fungerar den på alla webbläsare som SignalR stöder utan att kräva ett plugin-program för webbläsaren.
Av Nicolò Carandini och Tom Dykstra
Browser Link är en Visual Studio-funktion. Den skapar en kommunikationskanal mellan utvecklingsmiljön och en eller flera webbläsare. Använd webbläsarlänk för att:
- Uppdatera webbappen i flera webbläsare samtidigt.
- Testa i flera webbläsare med specifika inställningar, till exempel skärmstorlekar.
- Välj gränssnittselement i webbläsare i realtid, se vilken markering och källa den är korrelerad till i Visual Studio.
- Utför realtidstestautomatisering av webbläsare. Webbläsarlänk är också utökningsbar.
Konfiguration av webbläsarlänk
Lägg till paketet Microsoft.VisualStudio.Web.BrowserLink i projektet. För ASP.NET Core Razor Pages eller MVC-projekt aktiverar du även körningskompilering av Razor (.cshtml)-filer som beskrivs i filkompilering i ASP.NET CoreRazor.
Razor syntaxändringar tillämpas endast när körningskompilering har aktiverats.
När du konverterar ett ASP.NET Core 2.0-projekt till ASP.NET Core 2.1 och övergår till Microsoft.AspNetCore.App metapackage installerar du microsoft.VisualStudio.Web.BrowserLink-paketet för webbläsarlänkfunktioner. Projektmallarna ASP.NET Core 2.1 använder Microsoft.AspNetCore.App metapaketet som standard.
Projektmallarna ASP.NET Core 2.0 Web Application, Empty och Web API använder Microsoft.AspNetCore.All metapackage, som innehåller en paketreferens för Microsoft.VisualStudio.Web.BrowserLink.
Microsoft.AspNetCore.All Därför krävs ingen ytterligare åtgärd för att göra Browser Link tillgängligt för användning med metapackage.
Projektmallen ASP.NET Core 1.x Web Application har en paketreferens för paketet Microsoft.VisualStudio.Web.BrowserLink . Andra projekttyper kräver att du lägger till en paketreferens till Microsoft.VisualStudio.Web.BrowserLink.
Konfiguration
Anropa UseBrowserLink i Startup.Configure -metoden:
app.UseBrowserLink();
Anropet UseBrowserLink placeras vanligtvis i ett if block som endast aktiverar Browser Link i utvecklingsmiljön. Till exempel:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
Mer information finns i ASP.NET Core-körningsmiljöer.
Så här använder du Webbläsarlänk
När du har ett ASP.NET Core-projekt öppet visar Visual Studio verktygsfältskontrollen Browser Link bredvid verktygsfältskontrollen Felsökningsmål :
Från Webbläsarlänk-verktygsfältets kontroll kan du:
- Uppdatera webbappen i flera webbläsare samtidigt.
- Öppna Browser Link Dashboard.
- Aktivera eller inaktivera Webbläsarlänk. Obs! Webbläsarlänken är inaktiverad som standard i Visual Studio.
- Aktivera eller inaktivera automatisk CSS-synkronisering.
Uppdatera webbappen i flera webbläsare samtidigt
Om du vill välja en enda webbläsare som ska startas när projektet startas använder du den nedrullningsbara menyn i verktygsfältskontrollen Felsöka mål :
Om du vill öppna flera webbläsare samtidigt väljer du Bläddra med... i samma listruta. Håll ned Ctrl-tangenten för att välja de webbläsare du vill använda och klicka sedan på Bläddra:
Följande skärmbild visar Visual Studio med indexvyn öppen och två öppna webbläsare:
Hovra över verktygsfältskontrollen Webbläsarlänk för att se de webbläsare som är anslutna till projektet:
Ändra indexvyn och alla anslutna webbläsare uppdateras när du klickar på knappen Uppdatera webbläsarlänk:
Browser Link fungerar också med webbläsare som du startar utanför Visual Studio och navigerar till appens URL.
Instrumentpanelen för webbläsarlänk
Öppna fönstret Instrumentpanel för webbläsarlänk från den nedrullningsbara menyn Webbläsarlänk för att hantera anslutningen med öppna webbläsare:
Om ingen webbläsare är ansluten kan du starta en icke-felsökningssession genom att välja länken Visa i webbläsare :
I annat fall visas de anslutna webbläsarna med sökvägen till den sida som varje webbläsare visar:
Du kan också klicka på ett enskilt webbläsarnamn om du bara vill uppdatera webbläsaren.
Aktivera eller inaktivera webbläsarlänk
När du återaktiverar Browser Link när du har inaktiverat den måste du uppdatera webbläsarna för att återansluta dem.
Aktivera eller inaktivera automatisk CSS-synkronisering
När CSS Auto-Sync är aktiverat uppdateras anslutna webbläsare automatiskt när du gör ändringar i CSS-filer.
Så här fungerar det
Browser Link använder SignalR för att skapa en kommunikationskanal mellan Visual Studio och webbläsaren. När Browser Link är aktiverat fungerar Visual Studio som en SignalR server som flera klienter (webbläsare) kan ansluta till. Browser Link registrerar också en middlewarekomponent i ASP.NET Core-begärningspipelinen. Den här komponenten matar in särskilda <script> referenser i varje sidbegäran från servern. Du kan se skriptreferenserna genom att välja Visa källa i webbläsaren och rulla till slutet av tagginnehållet <body> :
<!-- 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>
Källfilerna ändras inte. Komponenten mellanprogram matar in skriptreferenserna dynamiskt.
Eftersom koden på webbläsarsidan är javascript fungerar den på alla webbläsare som SignalR stöder utan att kräva ett plugin-program för webbläsaren.
Samarbeta med oss på GitHub
Källan för det här innehållet finns på GitHub, där du även kan skapa och granska ärenden och pull-begäranden. Se vår deltagarguide för mer information.
ASP.NET Core