Utilisation de l’Inspecteur de page dans Visual Studio 2012

Article
07/16/2024

Dans ce laboratoire pratique, vous découvrirez un nouvel outil pour rechercher et résoudre les problèmes de page web dans Visual Studio - le Inspecteur de page.

Inspecteur de page est un nouvel outil qui apporte des outils de diagnostic de navigateur à Visual Studio et offre une expérience intégrée dans le navigateur, ASP.NET et le code source. Il affiche une page web (HTML, Web Forms, ASP.NET MVC ou Pages web) directement dans l’IDE Visual Studio et vous permet d’examiner le code source et la sortie résultante. Inspecteur de page vous permet de décomposer facilement un site web, de créer rapidement des pages à partir du terrain et de diagnostiquer rapidement les problèmes.

Aujourd’hui, nous avons un certain nombre de frameworks Web qui créent des sites web flexibles et évolutifs en temps opportun, tels que ASP.NET MVC et WebForms. En revanche, il est plus difficile de trouver des problèmes sur les pages, car l’IDE ne prend pas en charge l’affichage concepteur dans les pages basées sur des modèles et le contenu dynamique. Par conséquent, ces sites web doivent être ouverts dans un navigateur pour voir comment ils apparaissent à un utilisateur.

Les développeurs web utilisent des outils externes pour rechercher des problèmes qui s’exécutent régulièrement dans le navigateur. Ensuite, ils retournent à l’IDE et commencent à corriger. Cette activité de retour et de retour entre l’IDE, le navigateur et les outils de profilage peuvent être inefficaces, et nécessite parfois un nouveau déploiement et un nettoyage du cache chaque fois que vous souhaitez reproduire un problème.

Inspecteur de page combler un écart dans le développement web entre le client (outils de navigateur) et le serveur (ASP.NET et le code source) en regroupant le meilleur des deux mondes à l’aide d’un ensemble combiné de fonctionnalités.

À l’aide de Inspecteur de page, vous pouvez voir quels éléments dans les fichiers sources (y compris le code côté serveur) ont généré le balisage HTML à afficher dans le navigateur. Inspecteur de page vous permet également de modifier les propriétés CSS et les attributs d’élément DOM pour voir les modifications reflétées immédiatement dans le navigateur.

Ce laboratoire pratique vous guide tout au long des fonctionnalités de Inspecteur de page et vous montre comment vous pouvez les utiliser pour résoudre les problèmes dans les applications web. Ce labo contient deux exercices utilisant des flux similaires, mais ciblant des technologies différentes. Si vous êtes un développeur ASP.NET MVC, suivez l’exercice 1 ; si vous êtes un développeur WebForms, suivez l’exercice 2.

Ce labo vous guide tout au long des améliorations et des nouvelles fonctionnalités décrites précédemment en appliquant des modifications mineures à un exemple d’application web fourni dans le dossier Source.

Objectifs

Dans ce laboratoire pratique, vous allez apprendre à :

Décomposer un site web à l’aide de Inspecteur de page
Inspecter et afficher un aperçu des modifications des styles CSS avec Inspecteur de page
Détecter et résoudre les problèmes dans vos pages web à l’aide de Inspecteur de page

Prérequis

Vous devez disposer des éléments suivants pour effectuer ce labo :

Microsoft Visual Studio Express 2012 pour le web ou supérieur (lisez l’annexe A pour obtenir des instructions sur la façon de l’installer).
Internet Explorer 9 ou version ultérieure

Exercices

Ce laboratoire pratique comprend les exercices suivants :

Exercice 1 : Utilisation de Inspecteur de page dans ASP.NET projets MVC
Exercice 2 : Utilisation de Inspecteur de page dans les projets WebForms

Remarque

Chaque exercice est accompagné d’une solution de départ, située dans le dossier Begin de l’exercice, qui vous permet de suivre chaque exercice indépendamment des autres. Dans le code source d’un exercice, vous trouverez également un dossier End contenant une solution Visual Studio avec le code qui résulte de la réalisation des étapes de l’exercice correspondant. Vous pouvez utiliser ces solutions comme conseils si vous avez besoin d’aide supplémentaire lorsque vous travaillez dans ce laboratoire pratique.

Durée estimée pour terminer ce labo : 30 minutes.

Exercice 1 : Utilisation de Inspecteur de page dans ASP.NET projets MVC

Dans cet exercice, vous allez apprendre à afficher un aperçu et à déboguer une solution MVC 4 ASP.NET à l’aide de Inspecteur de page. Tout d’abord, vous allez effectuer un bref tour autour de l’outil pour découvrir les fonctionnalités qui facilitent le processus de débogage Web. Ensuite, vous allez travailler dans une page web qui contient des problèmes de style. Vous allez apprendre à utiliser Inspecteur de page pour rechercher le code source qui génère le problème et le résoudre.

Tâche 1 - Exploration de Inspecteur de page

Dans cette tâche, vous allez apprendre à utiliser le Inspecteur de page dans le contexte d’un projet ASP.NET MVC 4 qui montre une galerie de photos.

Ouvrez la solution Begin située dans le dossier Source/Ex1-MVC4/Begin/.
1. Vous devrez télécharger des packages NuGet manquants avant de continuer. Pour ce faire, cliquez sur le menu Projet et sélectionnez Gérer les packages NuGet.
2. Dans la boîte de dialogue Gérer les packages NuGet, cliquez sur Restaurer pour télécharger les packages manquants.
3. Enfin, générez la solution en cliquant sur Générer | la solution.
  
  Remarque
  
  L’un des avantages de l’utilisation de NuGet est que vous n’avez pas à expédier toutes les bibliothèques dans votre projet, ce qui réduit la taille du projet. Avec NuGet Power Tools, en spécifiant les versions du package dans le fichier Packages.config, vous pourrez télécharger toutes les bibliothèques requises la première fois que vous exécutez le projet. C’est pourquoi vous devrez exécuter ces étapes après avoir ouvert une solution existante à partir de ce labo.
Dans le Explorateur de solutions, recherchez l’affichage Index.cshtml sous le dossier du projet /Views/Accueil, cliquez dessus avec le bouton droit et sélectionnez Affichage dans Inspecteur de page.

Sélection d’un fichier à afficher en préversion dans Inspecteur de page
La fenêtre Inspecteur de page affiche l’URL /Home/Index mappée à la vue source sélectionnée.

Premier contact avec Inspecteur de page

L’outil Inspecteur de page est intégré à votre environnement Visual Studio. L’inspecteur contient un navigateur incorporé, ainsi qu’un profileur HTML puissant. Notez que vous n’avez pas besoin d’exécuter la solution pour voir l’apparence de vos pages.

Remarque

Lorsque la largeur de Inspecteur de page navigateur est inférieure à la largeur de la page ouverte, la page ne s’affiche pas correctement. Si cela se produit, ajustez la largeur du Inspecteur de page.
Cliquez sur l’onglet Fichiers dans Inspecteur de page.

Vous verrez tous les fichiers sources qui composent la page Index. Cette fonctionnalité permet d’identifier tous les éléments en un clin d’œil, en particulier lorsque vous travaillez avec des vues et des modèles partiels. Notez que vous pouvez également ouvrir chacun des fichiers si vous cliquez sur les liens.

Onglet Fichiers
Cliquez sur le bouton Activer/Désactiver le mode d’inspection, situé à gauche des onglets.

Cet outil vous permet de sélectionner n’importe quel élément de la page et de voir son code HTML et Razor.

Bouton Activer/désactiver le mode d’inspection
Dans le navigateur Inspecteur de page, déplacez le pointeur de la souris sur les éléments de page. Lorsque vous déplacez le pointeur de la souris sur une partie de la page rendue, le type d’élément est affiché et le balisage source ou le code correspondant est mis en surbrillance dans l’éditeur Visual Studio.

Mode d’inspection en action

Remarque

N’agrandissez pas la fenêtre Inspecteur de page ou vous ne pourrez pas voir l’onglet aperçu montrant le code source. Si vous cliquez sur l’élément dans Inspecteur de page lorsqu’il est agrandi, le code source de la sélection s’affiche, mais il masque la fenêtre Inspecteur de page.

Si vous faites attention au fichier Index.cshtml , vous remarquerez que la partie du code source qui génère l’élément sélectionné est mise en surbrillance. Cette fonctionnalité facilite la modification de fichiers sources longs, fournissant un moyen direct et rapide d’accéder au code.

Inspection des éléments
Cliquez sur le bouton Désactiver le mode d’inspection ( ) pour désactiver le curseur.
Sélectionnez l’onglet HTML pour afficher le code HTML affiché dans le navigateur Inspecteur de page.
Dans le balisage HTML, recherchez l’élément de liste avec le lien Koala et sélectionnez-le.

Notez que lorsque vous sélectionnez le code, la sortie correspondante est automatiquement mise en surbrillance dans le navigateur. Cette fonctionnalité est utile pour voir comment un bloc HTML est rendu sur la page.

Sélection de l’élément HTML dans la page
Cliquez sur le bouton Activer le mode d’inspection pour activer le mode d’inspection, puis cliquez sur la barre de navigation. À droite du code HTML, dans le volet Styles, vous verrez une liste avec les styles CSS appliqués à l’élément sélectionné.

Remarque

Étant donné que l’en-tête fait partie de la disposition du site, Inspecteur de page ouvre également le fichier _Layout.cshtml et met en surbrillance le segment du code affecté.

Découverte de styles et de fichiers sources d’un élément sélectionné
Lorsque le pointeur d’inspection bascule est activé, déplacez le pointeur de la souris sous la barre bleue proposée, puis cliquez sur la moitié du cercle.

Sélection d’un élément
Dans le volet Styles, recherchez l’élément d’image d’arrière-plan sous le groupe .main-content . Décochez l’image d’arrière-plan et voyez ce qui se passe. Vous remarquerez que le navigateur reflète immédiatement les modifications et que le cercle est masqué.

Remarque

Les modifications que vous appliquez sous l’onglet Styles Inspecteur de page n’affectent pas la feuille de style d’origine. Vous pouvez décocher les styles ou modifier leurs valeurs autant de fois que vous le souhaitez, mais elles seront restaurées après l’actualisation de la page.

Activation et désactivation des styles CSS
À présent, cliquez sur le texte « votre logo ici » sur l’en-tête à l’aide du mode inspection.
Sous l’onglet Styles, recherchez l’attribut CSS de taille de police sous le groupe .site-title. Double-cliquez sur la valeur d’attribut et remplacez la valeur 2.3 em par 3 em, puis appuyez sur Entrée. Notez que le titre semble plus grand.

Modification des valeurs CSS dans le Inspecteur de page
Cliquez sur l’onglet Styles de trace, situé dans le volet droit de Inspecteur de page. Il s’agit d’une autre façon de voir tous les styles appliqués à la sélection, classés par nom d’attribut.

Suivi des styles CSS de l’élément sélectionné
Une autre fonctionnalité de Inspecteur de page est le volet Disposition. À l’aide du mode d’inspection, sélectionnez la barre de navigation, puis cliquez sur l’onglet Disposition dans le volet droit. Vous verrez la taille exacte de l’élément sélectionné, ainsi que son décalage, sa marge, son remplissage et sa taille de bordure. Notez que vous pouvez également modifier les valeurs de cette vue.

Disposition d’élément dans Inspecteur de page

Tâche 2 - Recherche et résolution des problèmes de style dans la galerie de photos

Comment diagnostiquer les problèmes de pages web avec les versions précédentes de Visual Studio ? Vous êtes probablement familiarisé avec les outils de débogage web qui s’exécutent en dehors de l’IDE Visual Studio, comme les outils de développement Internet Explorer ou Firebug. Les navigateurs comprennent uniquement le code HTML, les scripts et les styles, tandis qu’une infrastructure sous-jacente génère le code HTML qui sera rendu. Pour cette raison, vous devez souvent déployer l’ensemble du site pour voir comment les pages web ressemblent.

Vous aviez probablement suivi ces étapes lorsque vous souhaitiez détecter et résoudre un problème dans votre site web :

Exécutez la solution à partir de Visual Studio ou déployez la page sur le serveur web.
Dans le navigateur, ouvrez les outils de développement que vous utilisez, ou ouvrez simplement le code source et les styles et essayez de faire correspondre le problème. Pour rechercher les fichiers impliqués, vous avez utilisé les fonctionnalités « Rechercher » ou « Rechercher dans des fichiers » avec le nom des classes de style.
Une fois l’erreur détectée, arrêtez le navigateur web et le serveur.
Effacez le cache du navigateur.
Revenez à Visual Studio pour appliquer un correctif. Répétez toutes les étapes à tester.

Comme il n’existe pas de wySIWYG réel dans ASP.NET MVC 4, la plupart des problèmes de style sont détectés à une étape ultérieure, après l’exécution ou le déploiement de l’application web. Maintenant, avec Inspecteur de page, il est possible d’afficher un aperçu d’une page sans exécuter la solution.

Dans cette tâche, vous allez utiliser l’inspecteur de page et résoudre certains problèmes liés à l’application Galerie de photos.

À l’aide de Inspecteur de page, recherchez le registre et les liens de connexion à gauche de l’en-tête.

Notez que les liens ne sont pas affichés à l’emplacement attendu à droite et qu’ils sont affichés comme une liste à puces. Vous alignerez maintenant les liens vers la droite et les restylez en conséquence.

Localisation des liens Inscrire et Se connecter
Lorsque le mode d’inspection bascule est sélectionné, cliquez sur Fermer, mais pas sur, le lien Inscrire pour ouvrir son code.

Notez que le code source des liens se trouve dans le fichier _LoginPartial.cshtml , et non l’index.cshtml ni le _Layout.cshtml, qui sont les endroits où vous pouvez regarder en premier lieu. Vous avez été placé directement dans le fichier source approprié.
Sous l’onglet Styles, recherchez et cliquez sur la< section> #login élément, qui est le conteneur HTML de ces liens.

Notez que le style #login se trouve automatiquement dans Site.css après avoir cliqué. De plus, le code est désormais mis en surbrillance.

Sélection des styles CSS
Supprimez les marques de commentaire de l’attribut d’alignement de texte dans le code mis en surbrillance en supprimant les caractères ouvrants et fermants, puis enregistrez le fichier Site.css .

Inspecteur de page est conscient de tous les différents fichiers qui composent la page active, et il peut détecter quand l’un de ces fichiers change. Il vous avertit chaque fois que la page active du navigateur n’est pas synchronisée avec les fichiers sources.
Dans le navigateur Inspecteur de page, cliquez sur la barre située sous la barre d’adresses pour recharger la page.

Rechargement de la page

Les liens sont maintenant à droite, mais ils ressemblent toujours à une liste à puces. À présent, vous allez supprimer les puces et aligner les liens horizontalement.

Page mise à jour
En utilisant le mode d’inspection, sélectionnez l’un <des éléments li> qui contiennent les liens « Inscrire » et « Se connecter ». Cliquez ensuite sur la <section> #login élément pour accéder au code Styles.css .

Recherche du style
Dans Style.css, supprimez les marques de commentaire du code de #login éléments li . Le style que vous ajoutez masque la puce et affiche les éléments horizontalement.

Restyling the login links
Enregistrez Style.css fichier, puis cliquez une fois sur la barre située sous l’adresse pour recharger la page. Notez que les liens apparaissent correctement.

Liens alignés sur le côté droit
Enfin, vous allez modifier le titre de l’en-tête. Utilisez le mode d’inspection pour cliquer sur votre logo ici et accéder au code source qui le génère.
Vous êtes maintenant dans _Layout.cshtml, remplacez « votre logo ici » par « Galerie de photos ». Enregistrez et mettez à jour le navigateur Inspecteur de page.

Affectation d’un nouveau titre

Page Galerie de photos mise à jour
Enfin, sélectionnez le projet PhotoGallery et appuyez sur F5 pour exécuter l’application. Consultez toutes les modifications comme prévu.

Exercice 2 : Utilisation de Inspecteur de page dans les projets WebForms

Dans cet exercice, vous allez apprendre à afficher un aperçu et à déboguer une solution WebForms à l’aide de Inspecteur de page. Vous allez d’abord effectuer un bref tour autour de l’outil pour découvrir les fonctionnalités Inspecteur de page qui facilitent le processus de débogage Web. Ensuite, vous allez travailler dans une page web qui contient des problèmes de style. Vous allez apprendre à utiliser Inspecteur de page pour rechercher le code source qui génère le problème et le résoudre.

Tâche 1 - Exploration de Inspecteur de page

Dans cette tâche, vous allez apprendre à utiliser les fonctionnalités de Inspecteur de page dans le contexte d’un projet WebForms qui montre une galerie de photos.

Ouvrez la solution Begin située dans le dossier Source/Ex2-WebForms/Begin/.
1. Vous devrez télécharger des packages NuGet manquants avant de continuer. Pour ce faire, cliquez sur le menu Projet et sélectionnez Gérer les packages NuGet.
2. Dans la boîte de dialogue Gérer les packages NuGet, cliquez sur Restaurer pour télécharger les packages manquants.
3. Enfin, générez la solution en cliquant sur Générer | la solution.
  
  Remarque
  
  L’un des avantages de l’utilisation de NuGet est que vous n’avez pas à expédier toutes les bibliothèques dans votre projet, ce qui réduit la taille du projet. Avec NuGet Power Tools, en spécifiant les versions du package dans le fichier Packages.config, vous pourrez télécharger toutes les bibliothèques requises la première fois que vous exécutez le projet. C’est pourquoi vous devrez exécuter ces étapes après avoir ouvert une solution existante à partir de ce labo.
Dans le Explorateur de solutions, recherchez Default.aspx page, cliquez dessus avec le bouton droit et sélectionnez Affichage dans Inspecteur de page.

Ouverture de Default.aspx avec Inspecteur de page
La fenêtre Inspecteur de page affiche Default.aspx.

Affichage des Default.aspx dans Inspecteur de page

L’outil Inspecteur de page est intégré à votre environnement Visual Studio. L’inspecteur contient un navigateur incorporé, ainsi qu’un puissant profileur HTML qui affiche le code sélectionné. Notez que vous n’avez pas besoin d’exécuter la solution pour voir l’apparence de vos pages.

Remarque

Lorsque la largeur de Inspecteur de page navigateur est inférieure à la largeur de la page ouverte, la page ne s’affiche pas correctement. Si cela se produit, ajustez la largeur du Inspecteur de page.
Cliquez sur l’onglet Fichiers dans Inspecteur de page.

Vous verrez tous les fichiers sources qui composent la page par défaut affichée. Il s’agit d’une fonctionnalité utile pour identifier tous les éléments en un clin d’œil, en particulier lorsque vous utilisez des contrôles utilisateur et des pages maîtres. Notez que vous pouvez également accéder à chacun des fichiers.

Onglet Fichiers
Cliquez sur le bouton Activer/Désactiver le mode d’inspection, situé à gauche des onglets.

Cet outil vous permet de sélectionner n’importe quel élément de la page et d’afficher son code HTML et .aspx source.

Bouton Activer/désactiver le mode d’inspection
Dans le navigateur Inspecteur de page, déplacez la souris sur les éléments de la page. Lorsque vous déplacez le pointeur de la souris sur une partie de la page rendue, le type d’élément est affiché et le balisage source ou le code correspondant est mis en surbrillance dans l’éditeur Visual Studio.

Mode d’inspection en action

Remarque

N’agrandissez pas la fenêtre Inspecteur de page ou vous ne pourrez pas voir l’onglet aperçu montrant le code source. Si vous cliquez sur l’élément dans Inspecteur de page lorsqu’il est agrandi, le code source de la sélection s’affiche, mais il masque la fenêtre Inspecteur de page.

Si vous faites attention à Default.aspx fichier, vous remarquerez que la partie du code source qui génère l’élément sélectionné est mise en surbrillance. Cette fonctionnalité facilite l’édition de fichiers sources longs, fournissant un moyen direct et rapide d’accéder au code.

Inspection des éléments
Cliquez sur le bouton Basculer le mode d’inspection (), situé sous Inspecteur de page onglets, pour désactiver le curseur.
Sélectionnez l’onglet HTML pour afficher le code HTML affiché dans le navigateur Inspecteur de page.
Dans le code HTML, recherchez l’élément de liste avec le lien Koala et sélectionnez-le.

Notez que lorsque vous sélectionnez le code, la sortie correspondante est automatiquement mise en surbrillance dans le navigateur. Cette fonctionnalité est utile pour voir comment un bloc HTML est rendu sur la page.

Sélection d’un élément HTML dans la page
Cliquez sur le bouton Activer le mode d’inspection pour activer le mode d’inspection, puis cliquez sur la barre de navigation. À droite du code HTML, dans le volet Styles, vous verrez une liste avec les styles CSS appliqués à l’élément sélectionné.

Remarque

étant donné que l’en-tête fait partie de la disposition du site, Inspecteur de page ouvre également le fichier Site.Master et met en surbrillance le segment du code affecté.

Découverte de styles et de fichiers sources d’un élément sélectionné
Lorsque le pointeur d’inspection bascule est activé, déplacez le pointeur de la souris sous la barre de menus, puis cliquez sur le demi-cercle vide.

Sélection d’un élément
Dans le volet Styles, recherchez l’élément d’image d’arrière-plan sous le groupe .main-content . Décochez l’image d’arrière-plan et voyez ce qui se passe. Vous remarquerez que le navigateur reflète immédiatement les modifications et que le cercle est masqué.

Remarque

Les modifications que vous appliquez sous l’onglet Styles Inspecteur de page n’affectent pas la feuille de style d’origine. Vous pouvez décocher les styles ou modifier leurs valeurs autant de fois que vous le souhaitez, mais elles seront restaurées après l’actualisation de la page.

Activation et désactivation des styles CSS
À présent, cliquez sur le texte « votre logo ici » sur l’en-tête à l’aide du mode inspection.
Sous l’onglet Styles, recherchez l’attribut CSS de taille de police sous le groupe .site-title. Double-cliquez une fois sur l’attribut pour modifier sa valeur. Remplacez la valeur 2.3em par 3em, puis appuyez sur Entrée. Notez que le titre semble plus grand.

Modification des valeurs CSS dans le Inspecteur de page
Cliquez sur l’onglet Styles de trace, situé dans le volet droit de Inspecteur de page. Il s’agit d’une autre façon de voir tous les styles appliqués à la sélection, classés par nom d’attribut.

Suivi des styles CSS de l’élément sélectionné
Une autre fonctionnalité de Inspecteur de page est le volet Disposition. À l’aide du mode d’inspection, sélectionnez la barre de navigation, puis cliquez sur l’onglet Disposition dans le volet droit. Vous verrez la taille exacte de l’élément sélectionné, ainsi que son décalage, sa marge, son remplissage et sa taille de bordure. Notez que vous pouvez également modifier les valeurs de cette vue.

Disposition d’élément dans Inspecteur de page

Tâche 2 - Recherche et résolution des problèmes de style dans la galerie de photos

Vous aviez probablement suivi ces étapes lorsque vous souhaitiez détecter et résoudre un problème dans votre site web :

Exécutez la solution à partir de Visual Studio ou déployez la page sur le serveur web.
Dans le navigateur, ouvrez les outils de développement que vous utilisez, ou ouvrez simplement le code source et les styles et essayez de faire correspondre le problème. Pour rechercher les fichiers impliqués, vous avez utilisé les fonctionnalités « Rechercher » ou « Rechercher dans des fichiers » avec le nom des classes de style.
Une fois l’erreur détectée, arrêtez le navigateur web et le serveur.
Effacez le cache du navigateur.
Revenez à Visual Studio pour appliquer un correctif. Répétez toutes les étapes à tester.

Comme il n’existe pas de wySIWYG réel dans ASP.NET WebForms, certains problèmes de style sont détectés à une étape ultérieure, après l’exécution ou le déploiement. Maintenant, avec Inspecteur de page, il est possible d’afficher un aperçu d’une page sans exécuter la solution.

Dans cette tâche, vous allez utiliser l’inspecteur de page pour résoudre certains problèmes de l’application Galerie de photos. Dans les étapes suivantes, vous allez détecter et résoudre rapidement un problème de style simple dans l’en-tête.

À l’aide de l’inspection de page, recherchez les liens Registre et Connexion à gauche de l’en-tête.

Notez que le lien n’est pas affiché à l’emplacement attendu à droite. Vous alignerez maintenant le lien à droite et restylez-le en conséquence.

Lien de connexion positionné à gauche
Lorsque le mode d’inspection bascule est sélectionné, sélectionnez le lien Se connecter pour ouvrir son code.

Notez que le code source du lien se trouve dans le fichier Site.Master , et non dans la page Default.aspx qui est l’endroit où vous pouvez regarder en premier lieu ; vous avez été placé directement dans le fichier source approprié.
Sous l’onglet Styles, recherchez et cliquez sur la< section> #login élément, qui est le conteneur HTML de ces liens.

Notez que le style #login se trouve automatiquement dans Site.css après avoir cliqué. De plus, le code est désormais mis en surbrillance.

Sélection des styles CSS
Supprimez les marques de commentaire de l’attribut d’alignement de texte dans le code mis en surbrillance en supprimant les caractères ouvrants et fermants, puis enregistrez le fichier Site.css .

Inspecteur de page est conscient de tous les différents fichiers qui composent la page active, et il peut détecter quand l’un de ces fichiers change. Il vous avertit chaque fois que la page active du navigateur n’est pas synchronisée avec les fichiers sources.
Dans le navigateur Inspecteur de page, cliquez sur la barre située sous la barre d’adresses pour enregistrer les modifications et recharger la page.

Rechargement de la page

Les liens sont maintenant à droite, mais ils ressemblent toujours à une liste à puces. À présent, vous allez supprimer les puces et aligner les liens horizontalement.

Page mise à jour
En utilisant le mode d’inspection, sélectionnez l’un <des éléments li> qui contiennent les liens « Inscrire » et « Se connecter ». Cliquez ensuite sur la <section> #login élément pour accéder au code Styles.css .

Recherche du style
Dans Style.css, supprimez les marques de commentaire du code de #login éléments li . Le style que vous ajoutez masque la puce et affiche les éléments horizontalement.

Restyling the login links
Enregistrez Style.css fichier, puis cliquez une fois sur la barre située sous l’adresse pour recharger la page. Notez que les liens apparaissent correctement.

Liens alignés sur le côté droit
Enfin, vous allez modifier le titre de l’en-tête. Au lieu de rechercher le texte « votre logo ici » dans tous les fichiers, utilisez le mode inspection pour cliquer sur le texte et accéder au code source qui le génère.

Recherche du titre du site
Vous êtes maintenant dans Site.Master, remplacez le texte « votre logo ici » par « Galerie de photos ». Enregistrez et mettez à jour le navigateur Inspecteur de page.

Page Galerie de photos mise à jour
Enfin, appuyez sur F5 pour exécuter l’application pour extraire toutes les modifications fonctionnent comme prévu.

Résumé

En effectuant ce laboratoire pratique, vous avez appris à utiliser Inspecteur de page pour afficher un aperçu de votre application web sans avoir à reconstruire et exécuter le site web dans un navigateur. En outre, vous avez appris à rechercher et corriger rapidement les bogues en accédant directement à partir de la sortie rendue au code source.

Annexe A : Installation de Visual Studio Express 2012 pour le web

Vous pouvez installer Microsoft Visual Studio Express 2012 pour Web ou une autre version « Express » à l’aide de Microsoft Web Platform Installer. Les instructions suivantes vous guident tout au long des étapes requises pour installer Visual Studio Express 2012 pour Web à l’aide de Microsoft Web Platform Installer.

Accédez à [/iis/extensions/introduction-to-iis-express/iis-express-overview ?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview ?linkid=9810169). Sinon, si vous avez déjà installé Web Platform Installer, vous pouvez l’ouvrir et rechercher le produit « Visual Studio Express 2012 for Web with Windows Azure SDK ».
Cliquez sur Installer maintenant. Si vous n’avez pas web Platform Installer , vous êtes redirigé pour le télécharger et l’installer en premier.
Une fois web Platform Installer ouvert, cliquez sur Installer pour démarrer l’installation.

Installer Visual Studio Express
Lisez toutes les licences et conditions de tous les produits, puis cliquez sur J’accepte pour continuer.

Acceptation des termes du contrat de licence
Attendez que le processus de téléchargement et d’installation soit terminé.

Progression de l’installation
Une fois l’installation terminée, cliquez sur Terminer.

Installation terminée
Cliquez sur Quitter pour fermer Web Platform Installer.
Pour ouvrir Visual Studio Express pour le web, accédez à l’écran d’accueil et commencez à écrire « VS Express », puis cliquez sur la vignette VS Express pour Web.

Vignette VS Express pour web