Udostępnij za pośrednictwem


Link przeglądarki w programie ASP.NET Core

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Ostrzeżenie

Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz zasady pomocy technicznej platformy .NET i platformy .NET Core. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

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.

Kompilacja środowiska uruchomieniowego a ponowne ładowanie na gorąco

Użyj linku przeglądarki z kompilacją środowiska uruchomieniowego lub przeładowywania na gorąco, aby zobaczyć efekt zmian czasu wykonywania w Razor plikach (.cshtml). Zalecamy ponowne ładowanie na gorąco.

Po otwarciu projektu ASP.NET Core program Visual Studio wyświetli kontrolkę paska narzędzi linku przeglądarki obok kontrolki paska narzędzi Typ debugowania:

menu rozwijane linku przeglądarki

Za pomocą kontrolki paska narzędzi linku 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.
  • Włącz lub wyłącz Przeładowywanie na gorąco 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 :

Menu rozwijane F5

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

Otwieranie wielu przeglądarek jednocześnie

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

Przykład synchronizacji z dwiema przeglądarkami

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

Porada aktywowania

Zmień widok indeksu, a wszystkie połączone przeglądarki są aktualizowane po kliknięciu przycisku odświeżania linku przeglądarki:

Przeglądarki są synchronizowane ze zmianami

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

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

how-to-open-browserlink-dashboard

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

Pulpit nawigacyjny linku przeglądarki — dwa połączenia

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

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 przeładowywania kodu CSS na gorąco

Po włączeniu ponownego ładowania kodu CSS podczas wprowadzania zmian w plikach CSS połączone przeglądarki są automatycznie odświeżane.

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ądarki). Link przeglądarki rejestruje również składnik oprogramowania pośredniczącego w potoku żądań 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.

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.

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.

Podczas konwertowania projektu ASP.NET Core 2.0 na ASP.NET Core 2.1 i przejścia na metapakiet Microsoft.AspNetCore.App zainstaluj pakiet Microsoft.VisualStudio.Web.BrowserLink dla funkcji linku przeglądarki. Szablony projektów ASP.NET Core 2.1 domyślnie używają Microsoft.AspNetCore.App metapakiet.

Szablony projektów ASP.NET Core 2.0 Web Application, Empty i Web API używają metapakiet Microsoft.AspNetCore.All, który zawiera odwołanie do pakietu microsoft.VisualStudio.Web.BrowserLink. W związku z tym użycie Microsoft.AspNetCore.All metapakietowania nie wymaga dalszych działań w celu udostępnienia linku przeglądarki do użycia.

Szablon projektu aplikacji internetowej platformy ASP.NET Core 1.x zawiera odwołanie do pakietu pakietu Microsoft.VisualStudio.Web.BrowserLink. Inne typy projektów wymagają dodania odwołania do pakietu do Microsoft.VisualStudio.Web.BrowserLinkelementu .

Konfigurowanie

Wywołaj metodę UseBrowserLink Startup.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.

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 :

Menu rozwijane Link przeglądarki

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 :

Menu rozwijane F5

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

Otwieranie wielu przeglądarek jednocześnie

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

Przykład synchronizacji z dwiema przeglądarkami

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

Porada aktywowania

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

Przeglądarki są synchronizowane ze zmianami

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

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

open-browserslink-dashboard

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

Pulpit nawigacyjny linku przeglądarki nie ma połączeń

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

Pulpit nawigacyjny linku przeglądarki — dwa połączenia

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

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.