Utilisation d’un lien de navigateur dans Visual Studio 2013

  • Article

Browser Link est une nouvelle fonctionnalité de Visual Studio 2013 qui crée un canal de communication entre l’environnement de développement et un ou plusieurs navigateurs web. Vous pouvez utiliser Browser Link pour actualiser votre application web dans plusieurs navigateurs à la fois, ce qui est utile pour les tests entre navigateurs.

Actualisation du navigateur

Avec l’actualisation du navigateur, vous pouvez actualiser plusieurs navigateurs connectés à Visual Studio via Browser Link.

Pour utiliser l’actualisation du navigateur, créez d’abord une application ASP.NET à l’aide de l’un des modèles de projet. Déboguez l’application en appuyant sur F5 ou en cliquant sur l’icône de flèche dans la barre d’outils :

Capture d’écran de Visual Studio, avec une icône de flèche mise en évidence dans la barre d’outils pour illustrer le processus de débogage de l’application.

Vous pouvez également utiliser la liste déroulante pour sélectionner un navigateur spécifique pour le débogage.

Capture d’écran de Visual Studio, avec une icône de flèche mise en évidence dans la barre d’outils et le menu déroulant affichant la liste du navigateur.

Pour déboguer avec plusieurs navigateurs, sélectionnez Parcourir avec. Dans la boîte de dialogue Parcourir avec , maintenez la touche CTRL enfoncée pour sélectionner plusieurs navigateurs. Cliquez sur Parcourir pour déboguer avec les navigateurs sélectionnés. Browser Link fonctionne également si vous lancez un navigateur à partir de l’extérieur de Visual Studio et accédez à l’URL de l’application.

Capture d’écran de la boîte de dialogue Parcourir avec, avec l’instruction sélectionner un ou plusieurs navigateurs et trois navigateurs mis en évidence et sélectionnés.

Les contrôles Lien du navigateur se trouvent dans la liste déroulante avec l’icône de flèche circulaire. L’icône de flèche est le bouton Actualiser .

Capture d’écran de Visual Studio, avec le bouton Actualiser en rouge. Le bouton Actualiser est une flèche circulaire.

Pour voir quels navigateurs sont connectés, placez la souris sur le bouton Actualiser pendant le débogage. Les navigateurs connectés s’affichent dans une fenêtre Info-bulle.

Capture d’écran de Visual Studio, avec le bouton Actualiser mis en surbrillance pour indiquer le pointage de la souris sur le bouton. L’info-bulle affiche les navigateurs connectés.

Pour actualiser les navigateurs connectés, cliquez sur le bouton Actualiser ou appuyez sur Ctrl+Alt+Entrée. 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. Vous pouvez voir l’application en cours d’exécution dans deux navigateurs en haut. En bas, le projet est ouvert dans Visual Studio.

Capture d’écran d’un projet S P Dot Net, avec une application exécutée dans deux navigateurs, côte à côte et projet affichés ci-dessous dans Visual Studio.

Dans Visual Studio, j’ai modifié le <titre h1> de la page d’accueil :

Capture d’écran de Visual Studio, avec un projet point Net S P et un titre H1 mis en évidence.

Lorsque j’ai cliqué sur le bouton Actualiser , la modification est apparue dans les deux fenêtres du navigateur :

Capture d’écran d’un projet S P dot Net, avec les modifications affichées côte à côte dans les fenêtres du navigateur et le projet affiché ci-dessous dans Visual Studio.

Remarques

  • Pour activer le lien de navigateur, définissez debug=true dans l’élément <de compilation> dans le fichier Web.config du projet.
  • L’application doit s’exécuter sur localhost.
  • L’application doit cibler .NET 4.0 ou version ultérieure.

Le tableau de bord Browser Link affiche des informations sur les connexions browser Link. Pour afficher le tableau de bord, sélectionnez le menu déroulant Lien du navigateur (la petite flèche en regard du bouton Actualiser ). Cliquez ensuite sur Tableau de bord lien du navigateur.

Capture d’écran de Visual Studio, avec le bouton Actualiser mis en évidence et le tableau de bord lien du navigateur mis en évidence dans le menu déroulant.

Le tableau de bord répertorie les navigateurs connectés et l’URL vers laquelle chaque navigateur a accédé.

Capture d’écran du tableau de bord du lien du navigateur, avec les navigateurs connectés et vous êtes l vers lequel chaque navigateur a accédé affiché.

La section Prérequis présente toutes les étapes nécessaires pour activer le lien de navigateur pour ce projet. Par exemple, la capture d’écran suivante montre un projet où « debug » est défini sur false dans le fichier Web.config.

Capture d’écran du tableau de bord du lien du navigateur, avec la section Prérequis indiquant que le débogage doit être activé pour le projet.

Pour activer le lien de navigateur pour les fichiers HTML statiques, ajoutez ce qui suit à votre fichier 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>

Pour des raisons de performances, supprimez ce paramètre lorsque vous publiez votre projet.

Le lien de navigateur est activé par défaut. Il existe plusieurs façons de le désactiver :

  • Dans le menu déroulant Lien du navigateur, décochez Activer le lien du navigateur.

    Capture d’écran de Visual Studio, avec activer le lien de navigateur affiché et décoché dans le menu déroulant Lien du navigateur.

  • Dans le fichier Web.config, ajoutez une clé nommée « vs:EnableBrowserLink » avec la valeur « false » dans la section appSettings.

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

  • Dans le fichier Web.config, définissez debug sur false.

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

Comment ça marche ?

Browser Link utilise SignalR pour créer un canal de communication entre Visual Studio et le navigateur. Lorsque le lien de navigateur est activé, Visual Studio agit comme un serveur SignalR auquel plusieurs clients (navigateurs) peuvent se connecter. Browser Link inscrit également un module HTTP avec ASP.NET. Ce module injecte des références de script> spéciales <dans chaque demande de page du serveur. Vous pouvez voir les références de script en sélectionnant « Afficher la source » dans le navigateur.

Capture d’écran de la fenêtre Afficher la source dans le navigateur, affichant les références de script spéciales injectées par le module h t t p.

Vos fichiers sources ne sont pas modifiés. Le module HTTP injecte dynamiquement les références de script.

Étant donné que le code côté navigateur est tout JavaScript, il fonctionne sur tous les navigateurs pris en charge par SignalR, sans nécessiter de plug-in de navigateur.