Link przeglądarki w programie ASP.NET Core

Przez Nicolò Carandini i Tom Dykstra

Link przeglądarki to funkcja programu Visual Studio. Tworzy kanał komunikacyjny między środowiskiem projektowym a co najmniej jedną przeglądarką internetową. Użyj linku przeglądarki, aby:

• Odśwież aplikację internetową w kilku przeglądarkach jednocześnie.
• Przetestuj wiele przeglądarek z określonymi ustawieniami, takimi jak rozmiary ekranu.
• Wybierz elementy interfejsu użytkownika w przeglądarkach w czasie rzeczywistym, zobacz, do jakich znaczników i źródła są skorelowane w programie Visual Studio.
• Przeprowadzanie automatyzacji testów przeglądarki w czasie rzeczywistym. Link przeglądarki jest również rozszerzalny.

Konfiguracja linku przeglądarki

Dodaj pakiet Microsoft.VisualStudio.Web.BrowserLink do projektu. W przypadku projektów ASP.NET Core Razor Pages lub MVC włącz również kompilację Razor plików () środowiska uruchomieniowego zgodnie.cshtml z opisem w Razor kompilacji plików w programie ASP.NET Core. Razor zmiany składni są stosowane tylko wtedy, gdy kompilacja środowiska uruchomieniowego została włączona.

Konfigurowanie

Wywołaj metodę UseBrowserLinkStartup.Configure :

app.UseBrowserLink();

Wywołanie UseBrowserLink jest zwykle umieszczane wewnątrz if bloku, który włącza tylko link przeglądarki w środowisku deweloperów. Na przykład:

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

Więcej informacji można znaleźć w temacie Używanie wielu środowisk na platformie ASP.NET Core.

Jak używać linku przeglądarki

Po otwarciu projektu ASP.NET Core program Visual Studio wyświetli kontrolkę paska narzędzi Link przeglądarki obok kontrolki paska narzędzi Debugowanie elementu docelowego :

W kontrolce pasek narzędzi Link przeglądarki możesz wykonywać następujące czynności:

• Odśwież aplikację internetową w kilku przeglądarkach jednocześnie.
• Otwórz pulpit nawigacyjny linku przeglądarki.
• Włącz lub wyłącz łącze przeglądarki. Uwaga: Link przeglądarki jest domyślnie wyłączony w programie Visual Studio.
• Włącz lub wyłącz automatyczną synchronizację CSS.

Odświeżanie aplikacji internetowej w kilku przeglądarkach jednocześnie

Aby wybrać jedną przeglądarkę internetową do uruchomienia podczas uruchamiania projektu, użyj menu rozwijanego w kontrolce paska narzędzi Debugowanie elementu docelowego :

Aby otworzyć wiele przeglądarek jednocześnie, wybierz pozycję Przeglądaj za pomocą... z tej samej listy rozwijanej. Przytrzymaj wciśnięty klawisz Ctrl , aby wybrać żądane przeglądarki, a następnie kliknij przycisk Przeglądaj:

Poniższy zrzut ekranu przedstawia program Visual Studio z otwartym widokiem indeksu i dwoma otwartymi przeglądarkami:

Umieść kursor na kontrolce paska narzędzi Link przeglądarki, aby wyświetlić przeglądarki połączone z projektem:

Zmień widok indeksu, a wszystkie połączone przeglądarki zostaną zaktualizowane po kliknięciu przycisku Odświeżanie linku przeglądarki:

Link przeglądarki działa również z przeglądarkami uruchamianymi spoza programu Visual Studio i przejdź do adresu URL aplikacji.

Pulpit nawigacyjny linku przeglądarki

Otwórz okno pulpitu nawigacyjnego linku przeglądarki z menu rozwijanego Link przeglądarki, aby zarządzać połączeniem z otwartymi przeglądarkami:

Jeśli żadna przeglądarka nie jest połączona, możesz uruchomić sesję bez debugowania, wybierając link Wyświetl w przeglądarce :

W przeciwnym razie połączone przeglądarki są wyświetlane ze ścieżką do strony wyświetlanej w każdej przeglądarce:

Możesz również kliknąć pojedynczą nazwę przeglądarki, aby odświeżyć tylko tę przeglądarkę.

Włączanie lub wyłączanie linku przeglądarki

Po ponownym włączeniu linku przeglądarki po jego wyłączeniu należy odświeżyć przeglądarki, aby je ponownie połączyć.

Włączanie lub wyłączanie automatycznej synchronizacji CSS

Po włączeniu automatycznej synchronizacji CSS połączone przeglądarki są automatycznie odświeżane po zmianie plików CSS.

Jak to działa

Link przeglądarki używa SignalR metody do tworzenia kanału komunikacyjnego między programem Visual Studio i przeglądarką. Po włączeniu linku przeglądarki program Visual Studio działa jako serwer, z który SignalR może łączyć się wielu klientów (przeglądarek). Link przeglądarki rejestruje również składnik oprogramowania pośredniczącego w potoku żądania ASP.NET Core. Ten składnik wprowadza specjalne <script> odwołania do każdego żądania strony z serwera. Odwołania do skryptu można wyświetlić, wybierając pozycję Wyświetl źródło w przeglądarce i przewijając na końcu zawartości tagu <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>

Pliki źródłowe nie są modyfikowane. Składnik oprogramowania pośredniczącego dynamicznie wprowadza odwołania do skryptu.

Ponieważ kod po stronie przeglądarki to cały kod JavaScript, działa we wszystkich przeglądarkach, które SignalR obsługują bez konieczności wtyczki przeglądarki.