Utilisation d’un lien de navigateur dans Visual Studio 2013

Le lien de navigateur 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 le lien du navigateur pour actualiser votre application web dans plusieurs navigateurs à la fois, ce qui est utile pour les tests inter-navigateurs.

Actualisation du navigateur

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

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 l’icône de flèche mise en surbrillance dans la barre d’outils pour illustrer le processus de débogage d’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 l’icône de flèche mise en surbrillance 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 Navigateur pour déboguer avec le navigateur sélectionné. Le lien du navigateur fonctionne également si vous lancez un navigateur en dehors de Visual Studio et accédez à l’URL de l’application.

Capture d’écran de la boîte de dialogue Naviguer avec, avec l’instruction « sélectionnez un ou plusieurs navigateurs » et trois navigateurs mis en surbrillance 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, pointez la souris sur le bouton Actualiser pendant le débogage. Les navigateurs connectés sont affichés dans une 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 s’exécutant 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 l’application s’exécutant 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 ASP.NET affiché et une balise H1 mise en surbrillance.

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

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

Remarques

  • Pour activer Browser Link, définissez debug=true dans l’élément <compilation> du 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 du lien du navigateur.

Capture d’écran de Visual Studio, avec le bouton Actualiser mis en surbrillance et le tableau de bord du lien du navigateur mis en surbrillance 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 des liens de navigateur, avec les navigateurs connectés et l'URL vers laquelle chaque navigateur a navigué affichée.

La section Conditions préalables présente les étapes nécessaires pour activer le lien du navigateur pour ce projet. Par exemple, la capture d’écran suivante montre un projet dans lequel « déboguer » a la valeur false dans le fichier Web.config.

Capture d’écran du tableau de bord de Browser Link, 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 la désactiver :

  • Dans le menu déroulant Lien du navigateur, désactivez l’option Activer le lien du navigateur.

    Capture d’écran de Visual Studio, avec Activer Browser Link affiché et décoché dans le menu déroulant Browser Link.

  • 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 le débogage sur false.

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

Comment cela fonctionne-t-il ?

Browser Link utilise SignalR pour créer un canal de communication entre Visual Studio et le navigateur. Lorsque le lien du navigateur est activé, Visual Studio agit en tant que 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 des 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 javaScript, il fonctionne sur tous les navigateurs pris en charge par SignalR, sans nécessiter de plug-in de navigateur.

  • Last updated on