Udostępnij za pośrednictwem

Korzystanie z linku przeglądarki w Visual Studio 2013

  • Artykuł

Link przeglądarki to nowa funkcja w Visual Studio 2013, która tworzy kanał komunikacyjny między środowiskiem deweloperów i co najmniej jedną przeglądarką internetową. Możesz użyć linku przeglądarki, aby odświeżyć aplikację internetową w kilku przeglądarkach jednocześnie, co jest przydatne do testowania między przeglądarkami.

Odświeżanie przeglądarki

Za pomocą funkcji Odświeżanie przeglądarki można odświeżyć wiele przeglądarek połączonych z programem Visual Studio za pośrednictwem linku przeglądarki.

Aby użyć funkcji Odświeżanie przeglądarki, najpierw utwórz aplikację ASP.NET przy użyciu dowolnego szablonu projektu. Debuguj aplikację, naciskając klawisz F5 lub klikając ikonę strzałki na pasku narzędzi:

Zrzut ekranu programu Visual Studio z ikoną strzałki wyróżnioną na pasku narzędzi, aby zilustrować proces debugowania aplikacji.

Możesz również użyć listy rozwijanej, aby wybrać określoną przeglądarkę do debugowania.

Zrzut ekranu programu Visual Studio z ikoną strzałki wyróżnioną na pasku narzędzi i menu rozwijanym wyświetlającym listę przeglądarki.

Aby debugować przy użyciu wielu przeglądarek, wybierz pozycję Przeglądaj za pomocą. W oknie dialogowym Przeglądaj za pomocą przytrzymaj klawisz CTRL, aby wybrać więcej niż jedną przeglądarkę. Kliknij przycisk Przeglądaj , aby debugować przy użyciu wybranych przeglądarek. Link przeglądarki działa również w przypadku uruchomienia przeglądarki spoza programu Visual Studio i przejścia do adresu URL aplikacji.

Zrzut ekranu przedstawiający okno dialogowe Przeglądaj z instrukcją wybierz co najmniej jedną i trzy przeglądarki wyróżnione i wybrane.

Kontrolki Link przeglądarki znajdują się na liście rozwijanej z ikoną strzałki cyklicznej. Ikona strzałki to przycisk Odśwież .

Zrzut ekranu programu Visual Studio z przyciskiem Odśwież przedstawionym na czerwono. Przycisk Odświeżanie to strzałka okrągła.

Aby zobaczyć, które przeglądarki są połączone, umieść kursor myszy na przycisku Odśwież podczas debugowania. Połączone przeglądarki są wyświetlane w oknie Etykietka narzędzia.

Zrzut ekranu programu Visual Studio z wyróżnionym przyciskiem Odśwież, aby wskazać kursor myszy na przycisku. Etykietka narzędzia zawiera połączone przeglądarki.

Aby odświeżyć połączone przeglądarki, kliknij przycisk Odśwież lub naciśnij klawisze CTRL+ALT+ENTER. Na przykład poniższy zrzut ekranu przedstawia projekt ASP.NET utworzony przy użyciu szablonu projektu MVC 5. Aplikacja działa w dwóch przeglądarkach u góry. W dolnej części projektu jest otwarty w programie Visual Studio.

Zrzut ekranu przedstawiający projekt S P dot Net z aplikacją działającą w dwóch przeglądarkach obok siebie i projektem wyświetlanym poniżej w programie Visual Studio.

W programie Visual Studio zmieniono <nagłówek h1> strony głównej:

Zrzut ekranu programu Visual Studio z wyróżnionym nagłówkiem A S P dot Net i nagłówkiem H 1.

Po kliknięciu przycisku Odśwież w obu oknach przeglądarki zostanie wyświetlona zmiana:

Zrzut ekranu przedstawiający projekt S P dot Net ze zmianami wyświetlanymi w oknach przeglądarki wyświetlanych obok siebie i projektem wyświetlanym poniżej w programie Visual Studio.

Uwagi

  • Aby włączyć link przeglądarki, ustaw debug=true element <kompilacji> w pliku Web.config projektu.
  • Aplikacja musi być uruchomiona na hoście lokalnym.
  • Aplikacja musi być docelowa dla platformy .NET 4.0 lub nowszej.

Na pulpicie nawigacyjnym Link przeglądarki są wyświetlane informacje o połączeniach linku przeglądarki. Aby wyświetlić pulpit nawigacyjny, wybierz menu rozwijane Link przeglądarki (mała strzałka obok przycisku Odśwież ). Następnie kliknij pozycję Pulpit nawigacyjny linku przeglądarki.

Zrzut ekranu programu Visual Studio z wyróżnionym przyciskiem Odśwież i pulpitem nawigacyjnym linku przeglądarki wyróżnionym w menu rozwijanym.

Pulpit nawigacyjny zawiera listę połączonych przeglądarek i adres URL, do którego nawigowała każda przeglądarka.

Zrzut ekranu przedstawiający pulpit nawigacyjny linku przeglądarki z połączonymi przeglądarkami i jesteś l, do którego jest wyświetlana każda przeglądarka.

Sekcja Wymagania wstępne zawiera wszystkie kroki wymagane do włączenia linku przeglądarki dla tego projektu. Na przykład poniższy zrzut ekranu przedstawia projekt, w którym "debugowanie" jest ustawione na wartość false w pliku Web.config.

Zrzut ekranu przedstawiający pulpit nawigacyjny linku przeglądarki z sekcją Wymagania wstępne wskazujące, że debugowanie musi być włączone dla projektu.

Aby włączyć link przeglądarki dla statycznych plików HTML, dodaj następujące polecenie do pliku Web.config.

<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

Ze względów wydajności usuń to ustawienie podczas publikowania projektu.

Łącze przeglądarki jest domyślnie włączone. Istnieje kilka sposobów jego wyłączenia:

  • W menu rozwijanym Link przeglądarki usuń zaznaczenie pola wyboru Włącz łącze przeglądarki.

    Zrzut ekranu programu Visual Studio z wyświetlonym linkiem Włącz przeglądarkę i niezaznaczone w menu rozwijanym Link przeglądarki.

  • W pliku Web.config dodaj klucz o nazwie "vs:EnableBrowserLink" z wartością "false" w sekcji appSettings.

    <appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

  • W pliku Web.config ustaw wartość debugowania na wartość false.

    <system.web>
  <compilation debug="false" targetFramework="4.5" />
</system.web>

Jak to działa?

Link przeglądarki używa usługi SignalR do utworzenia kanału komunikacyjnego między programem Visual Studio i przeglądarką. Po włączeniu linku przeglądarki program Visual Studio działa jako serwer SignalR, z którego może się łączyć wiele klientów (przeglądarek). Link przeglądarki rejestruje również moduł HTTP z ASP.NET. Ten moduł wprowadza specjalne <odwołania skryptów> 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.

Zrzut ekranu przedstawiający okno Wyświetl źródło w przeglądarce z wyświetlonymi specjalnymi odwołaniami do skryptów wstrzykniętymi przez moduł h t t p.

Pliki źródłowe nie są modyfikowane. Moduł HTTP dynamicznie wprowadza odwołania do skryptu.

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