Použití odkazu prohlížeče v sadě Visual Studio 2013

Odkaz na prohlížeč je nová funkce v sadě Visual Studio 2013, která vytvoří komunikační kanál mezi vývojovým prostředím a jedním nebo více webovými prohlížeči. Odkaz na prohlížeč můžete použít k aktualizaci webové aplikace v několika prohlížečích najednou, což je užitečné pro testování mezi prohlížeči.

Aktualizace prohlížeče

S aktualizací prohlížeče můžete aktualizovat více prohlížečů připojených k sadě Visual Studio prostřednictvím odkazu na prohlížeč.

Pokud chcete použít aktualizaci prohlížeče, nejprve vytvořte aplikaci ASP.NET pomocí libovolné šablony projektu. Aplikaci můžete ladit stisknutím klávesy F5 nebo kliknutím na ikonu šipky na panelu nástrojů:

Snímek obrazovky sady Visual Studio se zvýrazněnou ikonou šipky na panelu nástrojů pro ilustraci procesu ladění aplikace

Rozevírací seznam můžete použít také k výběru konkrétního prohlížeče pro ladění.

Snímek obrazovky sady Visual Studio se zvýrazněnou ikonou šipky na panelu nástrojů a rozevírací nabídkou zobrazující seznam prohlížečů

Pokud chcete ladit s více prohlížeči, vyberte Procházet s. V dialogovém okně Procházet s podržte stisknutou klávesu CTRL a vyberte více prohlížečů. Kliknutím na Procházet můžete ladit s vybranými prohlížeči. Odkaz na prohlížeč funguje také v případě, že spustíte prohlížeč mimo visual Studio a přejdete na adresu URL aplikace.

Snímek obrazovky dialogového okna Procházet s instrukcí „vyberte jednu nebo více možností“ a třemi prohlížeči, které jsou zvýrazněny a vybrány.

Ovládací prvky Browser Link se nacházejí v rozevíracím seznamu s ikonou kruhové šipky. Ikona šipky je tlačítko Aktualizovat .

Snímek obrazovky sady Visual Studio s červeným tlačítkem Aktualizovat Tlačítko Aktualizovat je kruhová šipka.

Pokud chcete zjistit, které prohlížeče jsou připojené, najeďte myší na tlačítko Aktualizovat při ladění. Připojené prohlížeče se zobrazují v okně popisku nápovědy.

Snímek obrazovky aplikace Visual Studio, na němž je zvýrazněno tlačítko Aktualizovat, na které najíždí kurzor myši. Popis okna zobrazuje připojené prohlížeče.

Pokud chcete aktualizovat připojené prohlížeče, klikněte na tlačítko Aktualizovat nebo stiskněte kombinaci kláves CTRL+ALT+ENTER. Například následující snímek obrazovky ukazuje ASP.NET projekt, který jsem vytvořil pomocí šablony projektu MVC 5. V horní části vidíte spuštěnou aplikaci ve dvou prohlížečích. Dole je projekt otevřený ve Visual Studio.

Snímek obrazovky projektu ASP.NET, se spuštěnou aplikací ve dvou prohlížečích vedle sebe, a projektem zobrazeným níže v sadě Visual Studio.

V sadě Visual Studio jsem změnil <nadpis h1> pro domovskou stránku:

Snímek obrazovky Visual Studio s projektem A S P dot Net zobrazeným na obrazovce a zvýrazněným nadpisem H 1

Po kliknutí na tlačítko Aktualizovat se změna zobrazila v obou oknech prohlížeče:

Snímek obrazovky projektu ASP.NET, kde se změny zobrazují v oknech prohlížeče vedle sebe a projekt je zobrazen níže v sadě Visual Studio.

Poznámky

  • Pokud chcete povolit odkaz prohlížeče, nastavte debug=true v <elementu kompilace> v souboru Web.config projektu.
  • Aplikace musí být spuštěná na místním hostiteli.
  • Aplikace musí cílit na .NET 4.0 nebo novější.

Řídicí panel Browser Link zobrazuje informace o připojeních k Browser Link. Pokud chcete zobrazit řídicí panel, vyberte rozevírací nabídku Odkaz na prohlížeč (malá šipka vedle tlačítka Aktualizovat ). Potom klikněte na Dashboard odkazu prohlížeče.

Snímek obrazovky Visual Studio se zvýrazněným tlačítkem Aktualizovat a zvýrazněným řídicím panelem Browser Link v rozevírací nabídce.

Řídicí panel obsahuje seznam připojených prohlížečů a adresu URL, na kterou každý prohlížeč přešel.

Snímek obrazovky řídicího panelu odkazu prohlížeče s připojenými prohlížeči a URL, na kterou každý prohlížeč přistoupil.

V části Požadavky najdete všechny kroky potřebné k povolení odkazu na prohlížeč pro daný projekt. Například následující snímek obrazovky ukazuje projekt, ve kterém je v souboru Web.config nastavena hodnota debug na false.

Snímek obrazovky řídicího panelu Browser Link, s částí Požadavky, která ukazuje, že pro projekt musí být povoleno ladění.

Pokud chcete povolit odkaz prohlížeče pro statické soubory HTML, přidejte do souboru Web.config následující kód.

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

Z důvodů výkonu odeberte toto nastavení při publikování projektu.

Odkaz na prohlížeč je ve výchozím nastavení povolený. Existuje několik způsobů, jak ho zakázat:

  • V rozevírací nabídce Propojení s prohlížečem zrušte zaškrtnutí Povolit Propojení s prohlížečem.

    Snímek obrazovky se sadou Visual Studio se zobrazeným odkazem na prohlížeč a nezaškrtnutým v rozevírací nabídce Odkaz na prohlížeč

  • Do souboru Web.config přidejte klíč s názvem "vs:EnableBrowserLink" s hodnotou false v části appSettings.

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

  • V souboru Web.config nastavte ladění na false.

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

Jak to funguje?

Browser Link používá SignalR k vytvoření komunikačního kanálu mezi Visual Studio a prohlížečem. Pokud je povolen odkaz na prohlížeč, Visual Studio funguje jako server SignalR, ke kterému se může připojit více klientů (prohlížečů). Browser Link také zaregistruje HTTP modul v ASP.NET. Tento modul vloží speciální <odkazy na skripty> do každého požadavku na stránku ze serveru. Odkazy na skripty můžete zobrazit tak, že v prohlížeči vyberete "Zobrazit zdroj".

Snímek obrazovky s oknem Zobrazit zdroj v prohlížeči zobrazující speciální odkazy na skripty vložené modulem h t t p

Vaše zdrojové soubory se nezmění. Modul HTTP vloží odkazy na skripty dynamicky.

Vzhledem k tomu, že kód na straně prohlížeče je veškerý JavaScript, funguje ve všech prohlížečích, které SignalR podporuje, aniž by vyžadoval modul plug-in prohlížeče.

  • Last updated on