Megosztás a következőn keresztül:

Böngészőhivatkozás a ASP.NET Core-ban

Megjegyzés:

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információt a .NET és a .NET Core támogatási szabályzatában talál. A jelen cikk .NET 9-es verzióját lásd az aktuális kiadásért .

Készítette: Nicolò Carandini és Tom Dykstra

A böngészőhivatkozás egy Visual Studio-funkció. Kommunikációs csatornát hoz létre a fejlesztési környezet és egy vagy több webböngésző között. Böngészőhivatkozás használata a következőhöz:

  • Frissítse a webalkalmazást egyszerre több böngészőben.
  • Tesztelje több böngészőben adott beállításokkal, például képernyőméretekkel.
  • Válassza ki a felhasználói felület elemeit valós időben a böngészőkben, és nézze meg, hogy milyen jelölőnyelv és forráskód társul hozzá a Visual Studioban.
  • Valós idejű böngészőteszt automatizálása.

Futásidejű fordítás és gyors újratöltés

A böngésző Link alkalmazása futtatókörnyezeti fordítással vagy gyors újratöltéssel a Razor (.cshtml) fájlok futásidejű változásainak hatásának megtekintéséhez. Javasoljuk a forró újratöltést.

Ha meg van nyitva egy ASP.NET Core-projekt, a Visual Studio megjeleníti a böngészőhivatkozás eszköztár vezérlőelemét a Hibakeresési típus eszköztár vezérlőelem mellett:

böngészőhivatkozás legördülő menüje

A böngészőhivatkozás eszköztárának vezérlője a következőt teszi lehetővé:

  • Frissítse egyszerre a webalkalmazást több böngészőben.
  • Nyissa meg a Böngészőhivatkozás irányítópultot.
  • Böngészőhivatkozás engedélyezése vagy letiltása.
  • Engedélyezze vagy tiltsa le a CSS gyakori újratöltését.

A webalkalmazás frissítése egyszerre több böngészőben

Ha egyetlen webböngészőt szeretne választani a projekt indításakor, használja a Hibakeresési cél eszköztár vezérlőelem legördülő menüjét:

F5 legördülő menü

Ha egyszerre több böngészőt szeretne megnyitni, válassza a Tallózás... lehetőséget ugyanazon a legördülő listában. A Ctrl billentyűt lenyomva tartva jelölje ki a kívánt böngészőket, majd kattintson a Tallózás gombra:

Egyszerre több böngésző megnyitása

Az alábbi képernyőképen a Visual Studio látható az Index nézettel és két megnyitott böngészővel:

Szinkronizálás két böngészővel – példa

Vigye az egérmutatót a böngészőhivatkozás eszköztárának vezérlője fölé a projekthez csatlakozó böngészők megtekintéséhez:

Buboréktipp

Módosítsa az Index nézetet, és minden csatlakoztatott böngésző frissül, amikor a böngészőhivatkozás frissítési gombjára kattint:

A böngészők szinkronizálása a módosításokkal

A böngészőhivatkozás a Visual Studión kívülről indított böngészőkkel is működik, és az alkalmazás URL-címére navigál.

Nyissa meg a böngészőhivatkozás irányítópultjának ablakát a böngészőhivatkozás legördülő menüjében a megnyitott böngészőkkel való kapcsolat kezeléséhez:

hogyan-nyitható-meg-browserlink-irányítópult

A csatlakoztatott böngészők az egyes böngészők által megjelenített lap elérési útjával együtt jelennek meg:

Böngészőhivatkozás irányítópultja két kapcsolat

Az egyes böngészőnevekre kattintva csak az adott böngészőt frissítheti.

Ha a letiltás után újra engedélyezi a böngészőhivatkozást, frissítenie kell a böngészőket, hogy újracsatlakoztathassa őket.

A CSS gyakori újratöltésének engedélyezése vagy letiltása

Ha engedélyezett a CSS azonnali újratöltése, a csatlakoztatott böngészők automatikusan frissülnek, amikor módosítja a CSS-fájlokat.

Hogyan működik?

A böngészőhivatkozás SignalR kommunikációs csatornát hoz létre a Visual Studio és a böngésző között. Ha engedélyezve van a böngészőhivatkozás, a Visual Studio olyan SignalR kiszolgálóként működik, amelyhez több ügyfél (böngésző) is csatlakozhat. A böngészőhivatkozás egy köztes szoftverösszetevőt is regisztrál a ASP.NET Core kérési folyamatában. Ez az összetevő speciális <script> hivatkozásokat szúr be a kiszolgáló minden oldalkérésébe. A szkripthivatkozásokat a forrás megtekintése böngészőben való kiválasztásával és a címke tartalmának végéhez <body> görgetéssel tekintheti meg:

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

A forrásfájlok nem módosulnak. A köztes szoftver összetevő dinamikusan injektálja a szkripthivatkozásokat.

Mivel a böngészőoldali kód teljes egészében JavaScriptben van megírva, minden SignalR által támogatott böngészőben működik anélkül, hogy böngésző beépülő modulra lenne szüksége.

Készítette: Nicolò Carandini és Tom Dykstra

A Browser Link egy Visual Studio-funkció. Kommunikációs csatornát hoz létre a fejlesztési környezet és egy vagy több webböngésző között. Böngészőlink használata ehhez:

  • Frissítse a webalkalmazást egyszerre több böngészőben.
  • Tesztelje több böngészőben adott beállításokkal, például képernyőméretekkel.
  • Válassza ki a felhasználói felület elemeit valós időben a böngészőkben, és nézze meg, hogy milyen jelölőnyelv és forráskód társul hozzá a Visual Studioban.
  • Valós idejű böngészőteszt automatizálása. Böngészőhivatkozás is bővíthető.

Adja hozzá a Microsoft.VisualStudio.Web.BrowserLink csomagot a projekthez. Az ASP.NET Core Razor lapok vagy MVC-projektek esetében is engedélyezze a futtatási idejű fordítást Razor számára, ahogyan a .cshtml részletezi. Razor szintaxismódosítások csak akkor lesznek alkalmazva, ha a futtatókörnyezet fordítása engedélyezve van.

Ha egy ASP.NET Core 2.0-projektet ASP.NET Core 2.1-re konvertál, és áttér a Microsoft.AspNetCore.App metacsomagra, telepítse a Microsoft.VisualStudio.Web.BrowserLink csomagot a Böngészőhivatkozás funkcióhoz. A ASP.NET Core 2.1-projektsablonok alapértelmezés szerint a Microsoft.AspNetCore.App metacsomagot használják.

A ASP.NET Core 2.0 webalkalmazási, üres és webes API-projektsablonok a Microsoft.AspNetCore.All metacsomagot használják, amely a Microsoft.VisualStudio.Web.BrowserLink csomaghivatkozását tartalmazza. Ezért a Microsoft.AspNetCore.All metapackage használatához nincs szükség további műveletre a Böngészőhivatkozás elérhetővé tétele érdekében.

A ASP.NET Core 1.x webalkalmazás-projektsablon csomaghivatkozással rendelkezik a Microsoft.VisualStudio.Web.BrowserLink csomaghoz. Más projekttípusokhoz csomaghivatkozást kell hozzáadnia Microsoft.VisualStudio.Web.BrowserLink.

Konfiguráció

A UseBrowserLink hívása a Startup.Configure metódusban:

app.UseBrowserLink();

A UseBrowserLink hívás általában egy if olyan blokkba kerül, amely csak a böngészőhivatkozást engedélyezi a fejlesztési környezetben. Például:

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

További információ: ASP.NET Core futtatókörnyezetek.

Ha meg van nyitva egy ASP.NET Core-projekt, a Visual Studio megjeleníti a Böngészőhivatkozás eszköztár vezérlőt a Hibakeresési cél eszköztár vezérlőelem mellett:

Browser Link legördülő menü

A Böngészőhivatkozás eszköztár vezérlőelemben a következőt teheti:

  • Frissítse egyszerre a webalkalmazást több böngészőben.
  • Nyissa meg a Böngészőhivatkozás irányítópultot.
  • Böngészőhivatkozás engedélyezése vagy letiltása. Megjegyzés: A Böngészőhivatkozás alapértelmezés szerint le van tiltva a Visual Studióban.
  • A CSS automatikus szinkronizálásának engedélyezése vagy letiltása.

A webalkalmazás frissítése egyszerre több böngészőben

Ha egyetlen webböngészőt szeretne választani a projekt indításakor, használja a Hibakeresési cél eszköztár vezérlőelem legördülő menüjét:

F5 legördülő menü

Ha egyszerre több böngészőt szeretne megnyitni, válassza a Tallózás... lehetőséget ugyanazon a legördülő listában. A Ctrl billentyűt lenyomva tartva jelölje ki a kívánt böngészőket, majd kattintson a Tallózás gombra:

Egyszerre több böngésző megnyitása

Az alábbi képernyőképen a Visual Studio látható az Index nézettel és két megnyitott böngészővel:

Szinkronizálás két böngészővel – példa

Mutasson a Böngészőhivatkozás eszköztár vezérlőelemre a projekthez csatlakoztatott böngészők megtekintéséhez:

Buboréktipp

Módosítsa az Index nézetet, és az összes csatlakoztatott böngésző frissül, amikor a Böngészőhivatkozás frissítés gombjára kattint:

A böngészők szinkronizálása a módosításokkal

A Browser Link a Visual Studión kívülről indított böngészőkkel is működik, és az alkalmazás URL-címére navigál.

Nyissa meg a Böngészőhivatkozás irányítópult ablakát a Böngészőhivatkozás legördülő menüből a megnyitott böngészőkkel való kapcsolat kezeléséhez:

open-browserslink-dashboard

Ha nincs böngésző csatlakoztatva, a Böngésző nézet hivatkozásának kiválasztásával elindíthat egy nem hibakeresési munkamenetet:

A Browserlink-irányítópulton nincsenek kapcsolatok

Ellenkező esetben a csatlakoztatott böngészők az egyes böngészők által megjelenített lap elérési útjával együtt jelennek meg:

Browserlink irányítópult két kapcsolattal

Az egyes böngészőnevekre kattintva csak az adott böngészőt frissítheti.

Ha a letiltás után újra engedélyezi a Böngészőhivatkozást, frissítenie kell a böngészőket, hogy újracsatlakoztathassa őket.

A CSS automatikus szinkronizálásának engedélyezése vagy letiltása

Ha a CSS automatikus szinkronizálása engedélyezve van, a csatlakoztatott böngészők automatikusan frissülnek a CSS-fájlok módosításakor.

Hogyan működik?

A Browser Link SignalR használ a kommunikációs csatorna létrehozásához a Visual Studio és a böngésző között. Ha a Browser Link engedélyezve van, a Visual Studio olyan kiszolgálóként SignalR működik, amelyhez több ügyfél (böngésző) is csatlakozhat. A Browser Link egy köztes szoftver összetevőt is regisztrál a ASP.NET Core kérési folyamatában. Ez az összetevő speciális <script> hivatkozásokat szúr be a kiszolgáló minden oldalkérésébe. A szkripthivatkozásokat a forrás megtekintése böngészőben való kiválasztásával és a címke tartalmának végéhez <body> görgetéssel tekintheti meg:

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

A forrásfájlok nem módosulnak. A köztes szoftver összetevő dinamikusan injektálja a szkripthivatkozásokat.

Mivel a böngészőoldali kód teljes egészében JavaScriptben van megírva, minden SignalR által támogatott böngészőben működik anélkül, hogy böngésző beépülő modulra lenne szüksége.

  • Last updated on