À l’aide du lien du navigateur dans Visual Studio 2013Using Browser Link in Visual Studio 2013

par Mike Wassonby Mike Wasson

Lien du navigateur est une nouvelle fonctionnalité dans Visual Studio 2013 qui crée un canal de communication entre l’environnement de développement et un ou plusieurs navigateurs web.Browser Link is a new feature in Visual Studio 2013 that creates a communication channel between the development environment and one or more web browsers. Vous pouvez utiliser le lien du navigateur pour actualiser votre application web dans plusieurs navigateurs à la fois, ce qui est utile pour les tests dans plusieurs navigateurs.You can use Browser Link to refresh your web application in several browsers at once, which is useful for cross-browser testing.

Actualisation du navigateurBrowser Refresh

Avec l’actualisation du navigateur, vous pouvez actualiser plusieurs navigateurs qui sont connectés à Visual Studio via le lien du navigateur.With Browser Refresh, you can refresh multiple browsers that are connected to Visual Studio through Browser Link.

Pour utiliser l’actualisation du navigateur, d’abord créer une application ASP.NET, à l’aide d’un des modèles de projet.To use Browser Refresh, first create an ASP.NET application, using any of the project templates. Déboguer l’application en appuyant sur F5 ou en cliquant sur l’icône de flèche dans la barre d’outils :Debug the application by pressing F5 or clicking the arrow icon in the toolbar:

Vous pouvez également utiliser la liste déroulante pour sélectionner un navigateur spécifique pour le débogage.You can also use the dropdown to select a specific browser for debugging.

Pour déboguer avec plusieurs navigateurs, sélectionnez naviguer avec.To debug with multiple browsers, select Browse With. Dans le naviguer avec boîte de dialogue, maintenez enfoncée la touche CTRL enfoncée pour sélectionner plusieurs navigateurs.In the Browse With dialog, hold down the CTRL key to select more than one browser. Cliquez sur Parcourir pour déboguer avec les navigateurs sélectionnés.Click Browse to debug with the selected browsers. Lien du navigateur fonctionne également si vous lancez un navigateur en dehors de Visual Studio et accédez à l’URL de l’application.Browser Link also works if you launch a browser from outside Visual Studio and navigate to the application URL.

Les contrôles de lien du navigateur se trouvent dans la liste déroulante avec l’icône de flèche circulaire.The Browser Link controls are located in the dropdown with the circular arrow icon. L’icône de flèche est la Actualiser bouton.The arrow icon is the Refresh button.

Pour voir quels sont les navigateurs sont connectés, pointez la souris sur le Actualiser bouton pendant le débogage.To see which browsers are connected, hover the mouse over the Refresh button while debugging. Les navigateurs connectés sont affichés dans une fenêtre d’info-bulle.The connected browsers are shown in a ToolTip window.

Pour actualiser les navigateurs connectés, cliquez sur le Actualiser bouton ou appuyez sur CTRL + ALT + ENTRÉE.To refresh the connected browsers, click the Refresh button or press CTRL+ALT+ENTER. Par exemple, la capture d’écran suivante montre un projet ASP.NET, que j’ai créé à l’aide du modèle de projet MVC 5.For example, the following screenshot shows an ASP.NET project, which I created using the MVC 5 project template. Vous pouvez voir l’application en cours d’exécution dans les deux navigateurs en haut.You can see the application running in two browsers at the top. En bas, le projet est ouvert dans Visual Studio.At the bottom, the project is open in Visual Studio.

Dans Visual Studio, j’ai modifié le <h1> titre pour la page d’accueil :In Visual Studio, I changed the <h1> heading for the home page:

Lorsque j’ai cliqué sur le Actualiser bouton, la modification est apparue dans les deux fenêtres du navigateur :When I clicked the Refresh button, the change appeared in both browser windows:

NotesNotes

  • Pour activer le lien du navigateur, définissez debug=true dans le <compilation> élément dans le fichier Web.config du projet.To enable Browser Link, set debug=true in the <compilation> element in the project's Web.config file.
  • L’application doit être en cours d’exécution sur l’hôte local.The application must be running on localhost.
  • L’application doit cibler .NET 4.0 ou version ultérieure.The application must target .NET 4.0 or later.

Le tableau de bord lien du navigateur affiche des informations sur les connexions de lien du navigateur.The Browser Link dashboard shows information about the Browser Link connections. Pour afficher le tableau de bord, sélectionnez le menu déroulant de lien du navigateur (la petite flèche à côté du Actualiser bouton).To view the dashboard, select the Browser Link dropdown menu (the small arrow next to the Refresh button). Puis cliquez sur tableau de bord de lien de navigateur.Then click Browser Link Dashboard.

Le tableau de bord répertorie les navigateurs connectés et l’URL à laquelle chaque navigateur a navigué.The dashboard lists the connected Browsers and the URL to which each browser has navigated.

Le conditions préalables section montre toutes les étapes nécessaires pour activer le lien du navigateur pour ce projet.The Prerequisites section shows any steps needed to enable Browser Link for that project. Par exemple, la capture d’écran suivante montre un projet où « debug » a la valeur false dans le fichier Web.config.For example, the following screenshot shows a project where "debug" is set to false in the Web.config file.

Pour activer le lien du navigateur pour les fichiers HTML statiques, ajoutez le code suivant à votre fichier Web.config.To enable Browser Link for static HTML files, add the following to your Web.config file.

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

Pour des raisons de performances, supprimez ce paramètre lorsque vous publiez votre projet.For performance reasons, remove this setting when you publish your project.

Lien du navigateur est activé par défaut.Browser Link is enabled by default. Il existe plusieurs façons de le désactiver :There are several ways to disable it:

  • Dans le menu déroulant du lien du navigateur, décochez la case activer le lien du navigateur.In the Browser Link dropdown menu, uncheck Enable Browser Link.

  • Dans le fichier Web.config, ajoutez une clé nommée « vs : EnableBrowserLink » avec la valeur « false » dans la section appSettings.In the Web.config file, add a key named "vs:EnableBrowserLink" with the value "false" in the appSettings section.

    <appSettings>
      <add key="vs:EnableBrowserLink" value="false"/>
    </appSettings>
    
  • Dans le fichier Web.config, définissez le débogage sur false.In the Web.config file, set debug to false.

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

Comment cela fonctionne-t-il ?How Does It Work?

Lien du navigateur utilise SignalR pour créer un canal de communication entre Visual Studio et le navigateur.Browser Link uses SignalR to create a communication channel between Visual Studio and the browser. Quand le lien du navigateur est activé, Visual Studio fait office de serveur SignalR auquel plusieurs clients (navigateurs) peuvent se connecter. When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to. Lien du navigateur enregistre également un module HTTP avec ASP.NET.Browser Link also registers an HTTP module with ASP.NET. Ce module injecte spéciale <script> références dans chaque demande de page à partir du serveur.This module injects special <script> references into every page request from the server. Vous pouvez voir les références de script en sélectionnant « Afficher la source » dans le navigateur.You can see the script references by selecting "View source" in the browser.

Vos fichiers sources ne sont pas modifiées.Your source files are not modified. Le module HTTP injecte dynamiquement les références de script.The HTTP module injects the script references dynamically.

Le code côté navigateur étant toutes les fonctions JavaScript, il fonctionne sur tous les navigateurs qui SignalR prend en charge, sans nécessiter de n’importe quel plug-in de navigateur.Because the browser-side code is all JavaScript, it works on all browsers that SignalR supports, without requiring any browser plug-in.