Browserkoppeling gebruiken in Visual Studio 2013

Browser Link is een nieuwe functie in Visual Studio 2013 waarmee een communicatiekanaal wordt gemaakt tussen de ontwikkelomgeving en een of meer webbrowsers. U kunt Browserkoppeling gebruiken om uw webtoepassing in verschillende browsers tegelijk te vernieuwen, wat handig is voor het testen van meerdere browsers.

Browser vernieuwen

Met Browser vernieuwen kunt u meerdere browsers vernieuwen die zijn verbonden met Visual Studio via Browser Link.

Als u Browser vernieuwen wilt gebruiken, maakt u eerst een ASP.NET toepassing met behulp van een van de projectsjablonen. Fouten opsporen in de toepassing door op F5 te drukken of op het pijlpictogram op de werkbalk te klikken:

Schermopname van Visual Studio, met het pijlpictogram gemarkeerd op de werkbalk om het foutopsporingsproces van toepassingen te illustreren.

U kunt de vervolgkeuzelijst ook gebruiken om een specifieke browser te selecteren voor foutopsporing.

Schermopname van Visual Studio, met een pijlpictogram gemarkeerd in de werkbalk en het vervolgkeuzemenu waarin de browserlijst wordt weergegeven.

Als u fouten wilt opsporen met meerdere browsers, selecteert u Bladeren met. Houd in het dialoogvenster Bladeren met ctrl ingedrukt om meer dan één browser te selecteren. Klik op Bladeren om fouten op te sporen met de geselecteerde browsers. Browser Link werkt ook als u een browser van buiten Visual Studio start en naar de toepassings-URL navigeert.

Schermopname van het dialoogvenster 'Bladeren met', waarin de instructie is om een of meer browsers te selecteren, met drie gemarkeerde en geselecteerde browsers.

De bedieningselementen voor Browser Link bevinden zich in de vervolgkeuzelijst met het cirkelvormige pijlpictogram. Het pijlpictogram is de knop Vernieuwen .

Schermopname van Visual Studio, met de knop Vernieuwen gemarkeerd in rood. De knop Vernieuwen is een cirkelvormige pijl.

Als u wilt zien welke browsers zijn verbonden, plaatst u de muisaanwijzer op de knop Vernieuwen tijdens foutopsporing. De verbonden browsers worden weergegeven in een ToolTip.

Schermopname van Visual Studio, met de knop Vernieuwen gemarkeerd om aan te geven dat de muisaanwijzer over de knop zweeft. De tooltip toont de verbonden browsers.

Als u de verbonden browsers wilt vernieuwen, klikt u op de knop Vernieuwen of drukt u op Ctrl+Alt+Enter. In de volgende schermopname ziet u bijvoorbeeld een ASP.NET project dat ik heb gemaakt met behulp van de MVC 5-projectsjabloon. U kunt de toepassing zien die in twee browsers bovenaan wordt uitgevoerd. Onderaan is het project in Visual Studio geopend.

Schermopname van een A S P dot Net-project, met de toepassing die wordt uitgevoerd in twee browsers, naast elkaar en het project dat hieronder wordt weergegeven in Visual Studio.

In Visual Studio heb ik de <kop h1> voor de startpagina gewijzigd:

Schermopname van Visual Studio, met een A S P dot Net-project weergegeven en de kop H 1 gemarkeerd.

Toen ik op de knop Vernieuwen heb geklikt, werd de wijziging weergegeven in beide browservensters:

Schermopname van A S P dot Net-project, met wijzigingen die worden weergegeven in browservensters die naast elkaar worden weergegeven en het project hieronder wordt weergegeven in Visual Studio.

Notes

  • Als u BrowserKoppeling wilt inschakelen, stelt u dit in het <compilatie>-element van het Web.config-bestand van het project: debug=true.
  • De toepassing moet worden uitgevoerd op localhost.
  • De toepassing moet .NET 4.0 of hoger targeten.

Het browserkoppelingsdashboard bevat informatie over de browserkoppelingsverbindingen. Als u het dashboard wilt weergeven, selecteert u het vervolgkeuzemenu Browserkoppeling (de kleine pijl naast de knop Vernieuwen ). Klik vervolgens op Het browserkoppelingsdashboard.

Schermopname van Visual Studio, met de knop Vernieuwen gemarkeerd en browserkoppelingsdashboard gemarkeerd in het vervolgkeuzemenu.

Het dashboard bevat de verbonden browsers en de URL waarnaar elke browser heeft genavigeerd.

Schermopname van het Browser Link Dashboard, met verbonden browsers en de URL waar elke browser naartoe is genavigeerd weergegeven.

In de sectie Vereisten ziet u alle stappen die nodig zijn om browserkoppeling voor dat project in te schakelen. In de volgende schermopname ziet u bijvoorbeeld een project waarin foutopsporing is ingesteld op false in het Web.config-bestand.

Schermopname van het browserkoppelingsdashboard, met de sectie Vereisten waarmee wordt aangegeven dat foutopsporing moet worden ingeschakeld voor het project.

Als u BrowserKoppeling wilt inschakelen voor statische HTML-bestanden, voegt u het volgende toe aan uw Web.config-bestand.

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

Verwijder deze instelling om prestatieredenen wanneer u uw project publiceert.

Browserkoppeling is standaard ingeschakeld. Er zijn verschillende manieren om deze uit te schakelen:

  • Schakel in het vervolgkeuzemenu Browserkoppeling inschakelen uit.

    Schermopname van Visual Studio, met Browserkoppeling inschakelen weergegeven en uitgeschakeld in het vervolgkeuzemenu Browserkoppeling.

  • Voeg in het bestand Web.config een sleutel met de naam 'vs:EnableBrowserLink' toe met de waarde 'false' in de sectie appSettings.

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

  • Stel in het bestand Web.config foutopsporing in op false.

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

Hoe werkt het?

Browser Link maakt gebruik van SignalR om een communicatiekanaal te maken tussen Visual Studio en de browser. Wanneer Browser Link is ingeschakeld, fungeert Visual Studio als een SignalR-server waarmee meerdere clients (browsers) verbinding kunnen maken. Browser Link registreert ook een HTTP-module met ASP.NET. Deze module injecteert speciale <scriptverwijzingen> in elke paginaaanvraag van de server. U kunt de scriptverwijzingen zien door 'Bron weergeven' te selecteren in de browser.

Schermopname van het venster 'Bron weergeven' in de browser, waarin speciale scriptverwijzingen worden weergegeven die zijn geïnjecteerd door de HTTP-module.

Uw bronbestanden worden niet gewijzigd. De HTTP-module injecteert de scriptverwijzingen dynamisch.

Omdat de code aan de browserzijde alle JavaScript is, werkt deze op alle browsers die SignalR ondersteunt, zonder dat hiervoor een browserinvoegtoepassing nodig is.

  • Last updated on