Utilisation de Inspecteur de page avec un navigateur intégré dans ASP.NET MVC
Auteur Tim Ammann
Inspecteur de page dans Visual Studio 2012 est un outil de développement web avec un navigateur intégré. Sélectionnez n’importe quel élément dans le navigateur intégré et Inspecteur de page met instantanément en surbrillance la source et le CSS de l’élément. Vous pouvez parcourir n’importe quelle vue MVC, rechercher rapidement les sources de balisage rendu et utiliser des outils de navigateur directement dans l’environnement Visual Studio.
Ce tutoriel montre comment activer le mode Inspection, puis rapidement localiser et modifier le balisage et CSS dans votre projet web. Le didacticiel utilise un projet MVC, mais vous pouvez également utiliser Inspecteur de page pour Web Forms et d’autres applications ASP.NET.
Le didacticiel comporte les sections suivantes :
- Conditions préalables
- Créer une application web
- Utiliser Inspecteur de page pour accéder à un affichage
- Activer le mode d’inspection
- Utiliser Inspecteur de page pour apporter des modifications au balisage
- Mode Inspection et fenêtre HTML
- Aperçu des modifications CSS dans la fenêtre Styles
- Synchronisation automatique CSS
- Utilisation du sélecteur de couleurs CSS
- Mappage d’éléments de page dynamiques à JavaScript
Prérequis
Remarque
Pour obtenir la dernière version de Inspecteur de page, utilisez Web Platform Installer pour installer le Kit de développement logiciel (SDK) Windows Azure pour .NET 2.0.
Inspecteur de page est groupé avec microsoft Web Developer Tools. La dernière version est 1.3. Pour vérifier la version que vous avez, exécutez Visual Studio et sélectionnez À propos de Microsoft Visual Studio dans le menu Aide .
Créer une application web
Tout d’abord, créez une application web avec laquelle vous utiliserez Inspecteur de page. Dans Visual Studio, sélectionnez Fichier>Nouveau projet. Sur la gauche, développez Visual C#, sélectionnez Web, puis ASP.NET application web MVC4.
Cliquez sur OK.
Dans la boîte de dialogue Nouveau ASP.NET projet MVC 4, sélectionnez Application Internet. Laissez Razor comme moteur d’affichage par défaut.
L’application s’ouvre en mode Source .
Maintenant que vous avez une application à utiliser, vous pouvez utiliser Inspecteur de page pour l’examiner et la modifier.
Utiliser Inspecteur de page pour accéder à un affichage
Dans Visual Studio 2012, vous pouvez cliquer avec le bouton droit sur n’importe quel affichage dans votre projet, sélectionner Affichage dans Inspecteur de page, et Inspecteur de page déterminera l’itinéraire et affiche la page.
Dans Explorateur de solutions, développez le dossier Vues, puis le dossier Accueil. Cliquez avec le bouton droit sur le fichier Index.cshtml et choisissez Affichage dans Inspecteur de page.
Par défaut, Inspecteur de page est ancré en tant que fenêtre sur le côté gauche de l’environnement Visual Studio. Si vous préférez, vous pouvez l’ancrer ailleurs ou détacher la fenêtre. Découvrez comment : organiser et ancrer des fenêtres.
Le volet supérieur de la fenêtre Inspecteur de page affiche la page active dans une fenêtre de navigateur. Le volet inférieur affiche la page dans le balisage HTML, ainsi que certains onglets qui vous permettent d’inspecter différents aspects de la page. Le volet inférieur est similaire aux outils de développement F12 dans Internet Explorer.
Dans ce tutoriel, vous allez utiliser les onglets HTML et Styles pour naviguer rapidement et apporter des modifications à l’application.
EnableInspection Mode
Pour placer Inspecteur de page en mode Inspection, cliquez sur le bouton Inspecter. En mode Inspection, lorsque vous maintenez le pointeur de la souris sur une partie de la page rendue, le balisage source ou le code correspondant est mis en surbrillance.
Déplacez maintenant votre souris sur différentes parties de la page dans Inspecteur de page. Comme vous le faites, le pointeur de la souris passe à un signe plus volumineux et l’élément sous-jacent est mis en surbrillance :
Lorsque vous déplacez le pointeur de la souris, Visual Studio met en surbrillance la syntaxe Razor correspondante dans le fichier source. Si l’élément HTML provient d’un autre fichier source, Visual Studio ouvre automatiquement le fichier.
Dans Inspecteur de page, l’onglet HTML affiche le code HTML généré à partir de la syntaxe Razor. Lorsque vous déplacez le pointeur de la souris, les éléments HTML sont mis en surbrillance. L’onglet Styles affiche les règles CSS de l’élément.
Utiliser Inspecteur de page pour apporter des modifications au balisage
Inspecteur de page vous permet de trouver le balisage dont l’emplacement peut ne pas être évident. Vous pouvez ensuite modifier le balisage et voir les modifications résultantes.
Pour le voir, cliquez sur Inspecter, puis faites défiler jusqu’au bas de la page dans la fenêtre Inspecteur de page.
Lorsque vous déplacez le pointeur de la souris dans la zone de pied de page, Inspecteur de page ouvre le fichier _Layout.cshtml et met en surbrillance la section de la page de mise en page que vous avez sélectionnée. Comme vous pouvez le voir, la zone de pied de page est définie dans le fichier de disposition, et non dans la vue elle-même.
Déplacez maintenant votre pointeur de souris sur la ligne avec l’avis de copyright . Dans la page _Layout.cshtml, la ligne correspondante est mise en surbrillance.
Ajoutez du texte à la fin de la ligne dans le fichier _Layout.cshtml.
<p>© ; @DateTime.Now.Year - My ASP.NET MVC Application Rocks !</p>
Maintenant, appuyez sur Ctrl+Alt+Entrée ou cliquez sur la barre de mise à jour pour afficher les résultats dans la fenêtre du navigateur Inspecteur de page.
Vous avez peut-être pensé que le pied de page défini dans Index.cshtml, mais il s’est avéré être dans la _Layout.cshtml, et Inspecteur de page l’avez trouvé pour vous.
Mode Inspection et fenêtre HTML
Ensuite, vous aurez un aperçu rapide de la fenêtre HTML et comment il mappe les éléments pour vous.
Cliquez sur Inspecter pour placer Inspecteur de page en mode Inspection.
Cliquez sur la partie supérieure de la page qui indique « Votre logo ici ». Vous examinez un élément particulier plus en détail, de sorte que l’affichage dans la fenêtre du navigateur ne change plus lorsque vous déplacez le pointeur de la souris.
Déplacez maintenant le pointeur de la souris vers la fenêtre HTML . Lorsque vous déplacez le pointeur de la souris, Inspecteur de page décrit l’élément dans la fenêtre HTML et met en surbrillance l’élément correspondant dans la fenêtre du navigateur.
Comme précédemment, Inspecteur de page ouvre le fichier _Layout.cshtml pour vous dans un onglet temporaire. Cliquez sur l’onglet temporaire _Layout.cshtml, et le balisage correspondant est mis en surbrillance dans la <section d’en-tête> pour vous :
Aperçu des modifications CSS dans la fenêtre Styles
Ensuite, vous allez utiliser la fenêtre styles Inspecteur de page pour afficher un aperçu des modifications apportées à CSS.
Cliquez sur Inspecter pour placer Inspecteur de page en mode Inspection.
Dans la fenêtre du navigateur Inspecteur de page, déplacez le pointeur de la souris sur la section « Page d’accueil » jusqu’à ce que l’étiquette div.content-wrapper apparaisse.
Cliquez une fois dans la section div.content-wrapper, puis déplacez le pointeur de la souris vers la fenêtre Styles . La fenêtre Styles affiche toutes les règles CSS de cet élément. Faites défiler vers le bas pour rechercher le sélecteur de classe .content-wrapper .featured. Désactivez maintenant la case à cocher de la propriété de couleur d’arrière-plan.
Notez comment la modification affiche instantanément les aperçus dans la fenêtre du navigateur Inspecteur de page.
Cochez à nouveau, puis double-cliquez sur la valeur de la propriété et remplacez-la par rouge. La modification s’affiche immédiatement :
La fenêtre Styles facilite le test et l’aperçu des modifications CSS avant de valider les modifications apportées à la feuille de style elle-même.
Synchronisation automatique CSS
Remarque
Cette fonctionnalité nécessite la version 1.3 de Inspecteur de page.
La fonctionnalité de synchronisation automatique CSS vous permet de modifier directement un fichier CSS et de voir les modifications immédiatement dans le navigateur Inspecteur de page.
Cliquez sur Inspecter pour placer Inspecteur de page en mode Inspection.
Dans le navigateur Inspecteur de page, déplacez le pointeur de la souris sur la section « Page d’accueil » jusqu’à ce que l’étiquette div.content-wrapper s’affiche. Cliquez une fois pour sélectionner cet élément.
La fenêtre Styles affiche toutes les règles CSS de cet élément. Faites défiler vers le bas pour rechercher le sélecteur de classe .content-wrapper .featured. Cliquez sur . featured .content-wrapper ». Inspecteur de page ouvre le fichier CSS qui définit ce style (Site.css) et met en surbrillance le style CSS correspondant.
Remplacez maintenant la valeur par background-color « rouge ». La modification s’affiche immédiatement dans le navigateur Inspecteur de page.
Utilisation du sélecteur de couleurs CSS
L’éditeur CSS dans Visual Studio 2012 a un sélecteur de couleurs qui facilite le choix et l’insertion de couleurs. Le sélecteur de couleurs inclut une palette standard de couleurs, prend en charge les noms de couleurs standard, les codes de hachage, RVB, RVBA, HSL et HSLA, et conserve une liste des couleurs que vous avez utilisées le plus récemment dans le document.
Dans la section précédente, vous avez modifié la valeur de la background-color propriété. Pour appeler le sélecteur de couleurs, placez le point d’insertion après le nom et le type # de propriété ou rvb(.
Cliquez sur une couleur pour la sélectionner, ou appuyez sur la flèche vers le bas, puis utilisez les touches de direction gauche et droite pour parcourir les couleurs. Lorsque vous visitez une couleur, la valeur hexadécimal correspondante est aperçue :
Si la barre de couleurs n’a pas la couleur exacte souhaitée, vous pouvez utiliser la fenêtre contextuelle du sélecteur de couleurs. Pour l’ouvrir, cliquez sur le double chevron situé à l’extrémité droite de la barre de couleurs, ou appuyez sur la flèche vers le bas une ou deux fois sur le clavier.
Cliquez sur une couleur à partir de la barre verticale à droite. Cela montre un dégradé pour cette couleur dans la fenêtre principale. Choisissez une couleur directement dans la barre verticale en appuyant sur Entrée, ou cliquez sur n’importe quel point dans la fenêtre principale pour choisir avec une plus grande précision.
S’il existe une couleur sur votre écran d’ordinateur que vous souhaitez utiliser (il n’est pas obligé d’être à l’intérieur de l’interface utilisateur de Visual Studio), vous pouvez capturer sa valeur à l’aide de l’outil d’écoute oculaire en bas à droite.
Vous pouvez également modifier l’opacité d’une couleur en déplaçant le curseur en bas du sélecteur de couleurs. Cela modifie les valeurs de couleur en valeurs RVBA, car le format RVBA peut représenter l’opacité.
Une fois que vous avez choisi une couleur, appuyez sur Entrée, puis tapez un point-virgule pour terminer l’entrée de couleur d’arrière-plan dans le fichier Site.css .
Barre de mise à jour Inspecteur de page
Inspecteur de page détecte immédiatement la modification apportée au Site.css fichier et affiche une alerte dans une barre de mise à jour.
Pour enregistrer tous vos fichiers et actualiser le navigateur Inspecteur de page, appuyez sur Ctrl+Alt+Entrée ou cliquez sur la barre de mise à jour. La modification de la couleur de surbrillance s’affiche dans le navigateur.
Mappage d’éléments de page dynamiques à JavaScript
Dans les applications web modernes, les éléments de la page sont souvent générés dynamiquement avec JavaScript. Cela signifie qu’il n’existe aucun balisage statique (HTML ou Razor) qui correspond à ces éléments de page.
Avec la version 1.3, Inspecteur de page pouvez désormais mapper des éléments qui ont été ajoutés dynamiquement à la page au code JavaScript correspondant. Pour illustrer cette fonctionnalité, nous allons utiliser le modèle d’application monopage (SPA).
Remarque
Le modèle SPA nécessite la mise à jour ASP.NET et Web Tools 2012.2.
Dans Visual Studio, sélectionnez Fichier>Nouveau projet. Sur la gauche, développez Visual C#, sélectionnez Web, puis ASP.NET application web MVC4. Cliquez sur OK.
Dans la boîte de dialogue Nouveau ASP.NET projet MVC 4, sélectionnez Application monopage.
Dans Explorateur de solutions, développez le dossier Vues, puis le dossier Accueil. Cliquez avec le bouton droit sur le fichier Index.cshtml et choisissez Affichage dans Inspecteur de page.
La première chose qui s’affiche dans le navigateur Inspecteur de page est une page de connexion. Cliquez sur « S’inscrire » et créez un nom d’utilisateur et un mot de passe. Une fois que vous vous êtes inscrit, l’application vous connecte et crée une liste de tâches avec certains exemples d’éléments.
Cliquez sur Inspecter pour placer Inspecteur de page en mode Inspection. Dans le navigateur Inspecteur de page, cliquez sur l’un des éléments de tâches. Notez qu’au lieu d’être mis en surbrillance en bleu, l’élément est mis en surbrillance en orange, avec « JS » en regard du nom de l’élément. Cela indique que l’élément a été créé dynamiquement via un script.
En outre, un soulignement orange apparaît sous l’onglet Pile des appels. Cela indique que le volet Pile des appels contient plus d’informations sur l’élément.
Cliquez sur l’onglet Pile des appels. Le volet Pile des appels affiche la pile des appels pour l’appel JavaScript qui a créé l’élément. Les appels aux bibliothèques externes telles que jQuery sont réduits, afin que vous puissiez facilement voir les appels à votre script d’application.
Pour afficher la pile complète, y compris les appels aux bibliothèques externes, vous pouvez développer les nœuds intitulés « Bibliothèques externes » :
Si vous cliquez sur un élément dans la pile des appels, Visual Studio ouvre le fichier de code et met en surbrillance le script correspondant.
Voir aussi
Présentation de ASP.NET MVC 4 avec Visual Studio (site web ASP.net)
Présentation de Inspecteur de page (vidéo Channel 9)
messages d’erreur Inspecteur de page (MSDN)