Page Inspector (Visual Studio)

L'Inspecteur de page est un outil de développement Web avec un navigateur intégré et des outils de navigation. Le navigateur rend une page Web (HTML, Web Forms, ASP.NET MVC ou Web Pages) directement dans l'interface IDE Visual Studio. Avoir le navigateur dans l'IDE vous permet de consulter la sortie restituée et sa source côte à côte. Lorsque vous utilisez la fonctionnalité d'inspection de l'Inspecteur de page pour sélectionner un élément dans le navigateur intégré de l'Inspecteur de page, la source de l'élément et ses feuilles de style en cascade (CSS) correspondantes sont mises en surbrillance. Cette fonctionnalité peut vous aider à détecter et corriger les erreurs qui seraient sinon difficiles à détecter dans le code HTML et CSS. L'Inspecteur de page est également doté d'outils de navigation que vous pouvez utiliser directement dans l'environnement Visual Studio.

Conditions requises

Configuration requise pour l'Inspecteur de page :

• Visual Studio 2012.

• .NET Framework 4,5.

• Vous devez disposez d'une application Web qui cible le .NET Framework 4 ou une version ultérieure.

• Pour les fonctionnalités complètes, Internet Explorer 9 ou version ultérieure (l'Inspecteur de page héberge la version actuelle d'Internet Explorer dans Visual Studio).

• JavaScript doit être activé dans Internet Explorer. Pour plus d'informations, consultez Procédure : activer les scripts dans votre navigateur.

Pour plus d'informations, consultez Messages d'erreur d'inspecteur de page.

Tâches de base

Ressources pour l'apprentissage

• Messages d'erreur d'inspecteur de page

• Notes de version de l'Inspecteur de page

• Inspecteur de page pour Visual Studio (blog MSDN)

• Inspecteur de page - Introduction (vidéo)

• Inspecteur de page - Décomposition de votre application Web (vidéo)

• Utilisation de l'Inspecteur de page dans ASP.NET MVC (didacticiel)

• Utilisation de l'Inspecteur de page dans ASP.NET MVC (vidéo)

• Utilisation de l'Inspecteur de page dans ASP.NET Web Forms (didacticiel)

• Outils d'efficience pour développeur Web dans Visual Studio 2012 (vidéo)

Éléments d'interface

Inspecter

Ce bouton vous permet de mapper facilement des éléments sur leur emplacement exact dans la source.

Pour placer l'Inspecteur de page en mode d'inspection, cliquez sur le bouton Inspecter dans le volet d'outils de l'Inspecteur de page. En mode d'inspection, lorsque vous maintenez le pointeur de la souris sur une partie quelconque de la page rendue, les balises ou le code source correspondants sont mis en surbrillance, ainsi que le fichier source correspondant dans l'Explorateur de solutions. Inversement, lorsque vous sélectionnez une balise dans la source, la sortie correspondante est mise en surbrillance dans le navigateur de l'Inspecteur de page. Pour plus d'informations, consultez Utilisation de l'Inspecteur de page dans ASP.NET MVC ou Utilisation de l'Inspecteur page dans ASP.NET Web Forms.

Les autres éléments de l'interface utilisateur dans le volet inférieur de l'interface utilisateur de l'Inspecteur de page contiennent des outils de navigation qui sont semblables aux outils F12 dans Internet Explorer. Pour plus d'informations sur les outils F12 dans Internet Explorer, consultez Utilisation des outils de développement F12 pour déboguer le code HTML et CSS.

HTML

La vue du volet HTML affiche une arborescence (arborescence DOM) de la page active, telle qu'elle est représentée par le navigateur de l'Inspecteur de page dans la mémoire. Naviguez dans l'arborescence directement à l'aide de la souris ou du clavier, affichez les attributs, et apportez des modifications de test aux valeurs. Développez ou réduisez les propriétés d'un élément dans l'arborescence DOM en cliquant sur la petite flèche en regard de chaque élément parent.

En mode d'inspection, lorsque vous déplacez le pointeur de la souris sur la page dans le navigateur de l'Inspecteur de page, le balisage de l'élément sélectionné est mis en surbrillance dans le volet HTML et dans le balisage source.

Le volet HTML vous permet d'apporter des modifications de test aux attributs d'élément DOM et d'afficher les modifications reflétées immédiatement dans le navigateur. Double-cliquez sur une propriété ou un attribut dans le volet HTML pour le modifier. Pour ajouter un attribut, cliquez avec le bouton droit sur un élément et choisissez Ajouter un attribut, ou utilisez le volet Attributs. Ces changements ne sont pas rendus persistants et les fichiers source d'origine ne sont pas affectés. Toutefois, étant donné que le balisage sélectionné est également mis en surbrillance dans le fichier source, il est facile de déterminer où se trouve la source, et de modifier et d'enregistrer les modifications.

Lorsque vous modifiez un fichier source, la barre de mise à jour s'affiche dans l'Inspecteur de page et vous invite à appuyer sur Ctrl+Alt+Entrée (ou à cliquer sur la barre) pour enregistrer les modifications apportées et actualiser la page dans le navigateur de l'Inspecteur de page.

Options de menu contextuel dans le volet HTML

Cliquez avec le bouton droit sur un élément dans le volet HTML pour accéder aux options suivantes de menu contextuel.

Pour plus d'informations, consultez Utilisation de l'Inspecteur de page dans ASP.NET MVC ou Utilisation de l'Inspecteur page dans ASP.NET Web Forms.

Styles

Le volet Styles affiche les règles et les styles pour un élément sélectionné dans l'arborescence. Il est regroupé par hiérarchie de règles CSS et inclut les attributs hérités et substitués. La règle en début de liste est la première qui est appliquée à l'élément sélectionné, alors que la règle en fin de liste est celle qui définit les propriétés de style d'un élément sélectionné.

Pour tester les modifications apportées à CSS, modifiez les propriétés CSS dans le volet Styles et affichez les modifications reflétées immédiatement dans le navigateur. Double-cliquez sur des valeurs de propriété pour les modifier. Désactivez et activez la case à cocher en regard d'une propriété pour déterminer de quelle façon son absence ou sa présence affecte le rendu de la page. Ces changements ne sont pas rendus persistants et les fichiers source d'origine ne sont pas affectés. Pour plus d'informations, consultez la section Aperçu des modifications dans la fenêtre Styles dans Utilisation l'Inspecteur de page dans ASP.NET MVC ou Utilisation de l'Inspecteur de page dans ASP.NET Web Forms.

Pour apporter une modification dans la source, cliquez sur une règle CSS dans le volet Styles ou Suivre les styles. L'Inspecteur de page ouvre le fichier .css dans lequel la règle est définie et sélectionne la règle complète. Lorsque vous modifiez la source, la barre de mise à jour s'affiche dans l'Inspecteur de page et vous invite à appuyer sur Ctrl+Alt+Entrée (ou à cliquer sur la barre) pour enregistrer les modifications apportées et actualiser la page dans le navigateur de l'Inspecteur de page.

Options de menu contextuel dans le volet Styles

Cliquez avec le bouton droit sur un élément dans le volet Styles pour accéder aux options suivantes de menu contextuel.

Suivre les styles

Le volet Suivre les styles présente les mêmes informations que le volet Styles, mais est regroupé par propriétés dans l'ordre alphabétique, plutôt que par règles. Vous trouverez peut-être le volet Suivre les styles plus pratique pour le dépannage que le volet Styles étant donné que vous connaissez souvent le nom de la propriété CSS mais pas celui de son élément parent.

Disposition

Le volet Disposition montre le modèle de boîte pour un élément sélectionné.

Pour afficher le modèle de boîte pour un élément, cliquez sur l'onglet Disposition, puis cliquez sur le bouton Inspecter. Déplacez le pointeur de la souris sur l'élément dans le navigateur ou, dans le volet HTML, cliquez sur un élément pour le sélectionner. Le volet Disposition vous indique la taille exacte de l'élément sélectionné, ainsi que son décalage, sa marge, son remplissage et la taille de la bordure.

Utilisez le volet Disposition pour apporter des modifications de test. Pour afficher un aperçu d'une modification, double-cliquez sur une valeur en pixels du volet Disposition et modifiez la valeur. Les modifications sont reflétées immédiatement dans le navigateur. Ces changements ne sont pas rendus persistants et les fichiers source d'origine ne sont pas affectés.

Attributs

Le volet Attributs montre les attributs de l'élément actuellement sélectionné.

Utilisez le volet Attributs pour apporter des modifications de test. Double-cliquez sur une valeur d'attribut pour la modifier. Utilisez les boutons Ajouter un attribut et Supprimer l'attribut pour ajouter ou supprimer temporairement des attributs. Les modifications que vous apportez sont affichées immédiatement dans le volet HTML sous le navigateur de l'Inspecteur de page. Ces changements ne sont pas rendus persistants et les fichiers source d'origine ne sont pas affectés.

Fichiers

Le volet Fichiers dans le volet des outils de l'Inspecteur de page contient des liens vers tous les fichiers source qui créent la page actuelle. Cette fonctionnalité est utile, car elle vous indique tous les fichiers connexes d'un coup d'œil. Elle s'avère particulièrement utile lorsque vous utilisez des vues et des modèles partiels, ou des applications telles que Orchard ou Umbraco.

Pour ouvrir l'un de ces fichiers dans l'éditeur Visual Studio, cliquez sur le lien correspondant.

Barre de mise à jour

Lorsque vous modifiez la page source, une barre de mise à jour apparaît en haut du navigateur de l'Inspecteur de page. Elle vous invite à appuyer sur Ctrl+Alt+Entrée ou à cliquer sur la barre pour enregistrer les modifications et actualiser le navigateur.

Voir aussi

Concepts

ASP.NET 4.5.1 et Visual Studio 2013