Débogage de code HTML et CSS avec les Outils de développement

  • Article

Nouveautés de Windows Internet Explorer 8

Internet Explorer 8 propose des Outils de développement évolués qui vous aideront à analyser et à résoudre les problèmes liés aux codes HTML, aux feuilles de style en cascade (CSS) et à Microsoft JScript. Cet article porte principalement sur les outils HTML et CSS inclus dans les Outils de développement.

  • Introduction
  • Ouverture et fermeture des Outils de développement
  • Sélection d'objets sur une page Web
  • Inspection d'éléments HTML
    • Utilisation des outils Style et Suivre les styles
    • Utilisation de l'outil Disposition
    • Utilisation de l'outil Attributs
  • Inspection de règles CSS
  • Enregistrement des modifications
  • Résumé
  • Voir aussi

Introduction

La fonctionnalité Outils de développement d'Internet Explorer 8 vous permet de contrôler la représentation interne d'une page Web dans le navigateur. Vous pouvez utiliser les Outils de développement pour différentes tâches, notamment pour visualiser des attributs, pour déterminer les raisons pour lesquelles une règle CSS particulière est appliquée à un élément, ou encore pour afficher un aperçu des documents dans différents modes de compatibilité. En exposant la façon dont le navigateur interprète une page Web, les Outils de développement permettent d'analyser et de résoudre les problèmes plus rapidement qu'avec les versions précédentes d'Internet Explorer, tout en offrant de nombreuses fonctionnalités supplémentaires.

Cet article traite des outils HTML et CSS inclus dans les Outils de développement. Pour plus d'informations sur l'utilisation des Outils de développement appliquée au débogage de code JScript, consultez Débogage de scripts avec les Outils de développement.

Ouverture et fermeture des Outils de développement

Pour ouvrir les Outils de développement, appuyez sur F12. Vous pouvez également accéder au menu Outils d'Internet Explorer 8 et cliquer sur Outils de développement. L'image suivante présente la fenêtre Outils de développement.

Cette figure montre l'emplacement de l'option Outils de développement et du bouton Fermer dans Internet Explorer 8.Figure 1.Option Outils de développement et bouton Fermer.

Une fois démarrés, les Outils de développement peuvent être affichés dans une fenêtre distincte ou attachés à l'instance du navigateur à partir de laquelle ils ont été lancés. Chaque onglet Internet Explorer possède sa propre instance des Outils de développement. Si vous travaillez avec plusieurs instances des Outils de développement, utilisez la fonction Attachement pour associer chacune de ces instances à la fenêtre appropriée. Pour ce faire, utiliser le bouton affiché dans l'angle supérieur droit de la fenêtre Outils de développement. Une fois que vous avez attaché la fenêtre Outils de développement à l'instance appropriée, vous pouvez la redimensionner pour agrandir la zone d'affichage.

Pour fermer les outils de développement, vous disposez de plusieurs méthodes. Vous pouvez appuyer sur F12, cliquer sur l'option Outils de développement dans le menu Outils, cliquer sur le bouton Fermer dans l'angle supérieur droit de la fenêtre Outils de développement, ou encore fermer la fenêtre ou l'onglet Internet Explorer dans lequel les Outils de développement ont été ouverts.

Sélection d'objets sur une page Web

De nombreux outils de développement HTML et CSS fonctionnent au niveau des éléments individuels d'une page Web. Pour sélectionner un élément, mettez-le en surbrillance dans l'onglet HTML ou cliquez sur le bouton Sélectionner l'élément par clic, dans le menu Rechercher des Outils de développement. Si vous cliquez sur ce bouton, vous pourrez utiliser la souris pour sélectionner un élément dans votre page Web. Déplacez le curseur sur un élément. Lorsque la bordure de ce dernier est affichée en bleu, cliquez pour le sélectionner. La figure suivante montre le résultat de la sélection d'un élément.

Cette illustration montre le bouton Sélectionner l'élément par clic et le résultat de la sélection d'un élément. Figure 3. Bouton Sélectionner l'élément par clic et résultat de la sélection d'un élément.

Lorsque vous mettez un élément HTML en surbrillance et que vous cliquez dessus, l'onglet HTML montre les attributs de l'élément sélectionné, ainsi que son emplacement dans la représentation interne utilisée par Internet Explorer 8 pour afficher la page Web. Vous pouvez consulter les valeurs d'attribut actuelles de cet élément et tester de nouvelles valeurs en les modifiant à l'aide de l'onglet HTML. Pour modifier une valeur d'attribut, cliquez dessus, entrez une nouvelle valeur et appuyez sur ENTRÉE. Internet Explorer 8 affiche les effets de votre modification. Vous pouvez rejeter les valeurs partielles en appuyant sur Échap. Pour retrouver l'apparence d'origine de la page, actualisez-la.

Remarque Les modifications effectuées à l'aide de l'onglet HTML n'affectent pas la source sous-jacente d'une page Web. Ils demeurent effectifs jusqu'à la fermeture du navigateur ou l'actualisation de la page Web, ou encore jusqu'à ce que le navigateur accède à une nouvelle page. Pour plus d'informations, consultez la section Enregistrement des modifications dans la suite de ce document.

Inspection d'éléments HTML

L'onglet HTML vous aide à inspecter la présentation des éléments HTML dans une page Web. Il contient deux volets d'affichage. Le volet de gauche présente le contenu principal, tandis que celui de droite présente les propriétés.

  • Le volet de contenu principal affiche le modèle DOM (Document Object Model) dans une structure en trois noeuds qui peut être développée ou réduite. Utilisez ce volet pour examiner et inspecter vos sources HTML. Vous pouvez cliquer sur les attributs et les valeurs des éléments HTML pour les modifier. Ce mode permet également de modifier les nœuds de texte. Vous pouvez aussi modifier la page Web dans son intégralité à l'aide d'un éditeur. Pour ce faire, cliquez sur le bouton Édition. En mode édition, le bouton Retour automatique à la ligne est activé. Vous remarquerez également que le contenu de cette page peut être légèrement différent de la source d'origine, car il s'agit de la représentation interne de la page Web utilisée par Internet Explorer. Si vous utilisez des appels JScript pour écrire du contenu dans cette page, vous pouvez les visualiser dans le mode Édition. Lorsque vous avez terminé vos modifications, cliquez de nouveau sur le bouton Edition. Les changements effectués prennent effet immédiatement.
  • Une barre de menus qui permet de sélectionner les types de propriétés est affichée en haut du volet Propriétés. Elle propose différents outils qui permettent un examen plus approfondi du code source. Par exemple, lorsque le volet de contenu principal est en mode DOM, vous pouvez cliquer sur n'importe quel élément HTML pour l'inspecter. Les propriétés de l'élément sélectionné s'affichent dans le volet Propriétés. Le mode d'affichage et la nature des informations affichées dépendent du type de propriété que vous avez sélectionné. Par exemple, si le type actuel est Style, vous visualisez la liste des règles CSS appliquées à cet élément. Les autres types de propriétés sont Suivre les styles, Disposition et Attributs.

Utilisation des outils Style et Suivre les styles

Lorsque les outils Style et Suivre les styles rencontrent plusieurs règles CSS qui s'appliquent à l'élément sélectionné, ces règles sont affichées en fonction de leur spécificité par rapport aux normes CSS. La règle affichée en haut de la liste est celle qui est appliquée à l'élément sélectionné en premier, tandis que la dernière règle définit ses propriétés de style. Les valeurs associées à ces règles peuvent être modifiées. Pour ce faire, cliquez sur une valeur, tapez une nouvelle valeur et appuyez sur ENTRÉE. La modification apparaît immédiatement dans la page Web. Les informations recherchées dans les deux types de propriétés sont les mêmes. Toutefois, dans le type de propriété Suivre les styles, les informations sont regroupées par propriété, avec les règles correspondantes affichées en dessous. Les propriétés sont classées dans l'ordre alphabétique et les règles en fonction de leur spécificité.

Utilisation de l'outil Disposition

L'outil Disposition contient les informations concernant la position relative d'un élément sur une page Web et le modèle de boîte correspondant. Les informations disponibles sont les suivantes :

  • Décalage : ces valeurs décrivent la distance entre l'objet sélectionné et son parent, représentée par les propriétés offsetLeft et offsetTop.
  • Marge, bordure et remplissage : ces trois valeurs affichent les valeurs définies dans le code source de la page Web. Si aucune valeur n'est spécifiée, l'outil affiche les valeurs par défaut utilisées par Internet Explorer.
  • Largeur et hauteur : hauteur et largeur de l'élément, définies par les propriétés offsetHeight et offsetWidth.

Les valeurs et les unités de mesure correspondant à chaque attribut du modèle de boîte sont affichées. Cliquez sur une valeur pour la modifier et appuyez sur ENTRÉE pour valider ou sur Échap pour annuler. Si vous appuyez sur ENTRÉE, la nouvelle valeur prend effet immédiatement. Par défaut (si l'unité de mesure n'est pas affichée), l'outil Disposition considère que les valeurs associées au modèle de boîte sont exprimées en pixels.

Utilisation de l'outil Attributs

L'outil Attributs présente les attributs d'un élément HTML sous forme d'une liste de paires nom/valeur. Vous pouvez double-cliquer sur un élément pour afficher les informations le concernant, ainsi que le nom et la valeur d'un attribut. Vous pouvez également modifier le nom et la valeur d'un attribut en cliquant dessus dans le volet de contenu principal. La valeur d'un attribut peut être vide ou nulle, mais le nom d'un attribut ne peut pas être vide. Les modifications apportées à ces informations sont immédiatement répercutées sur la page Web. Vous pouvez également utiliser le bouton affiché en haut du volet pour ajouter et supprimer des attributs.

Inspection de règles CSS

L'onglet CSS permet de comprendre l'interaction entre différentes feuilles de style et est donc d'une grande utilité pour les sites utilisant plusieurs feuilles de style. Pour passer d'une feuille de style à une autre, utilisez le sélecteur de feuille de style. Lorsque vous sélectionnez une feuille de style, les règles et les propriétés de style associées s'affichent dans le volet de contenu principal. Ces informations sont regroupées règle par règle. Par défaut, ce bouton montre la première feuille de style référencée dans votre page Web. Les règles des feuilles de style sont affichées sous le bouton du sélecteur de feuilles de style, comme indiqué Figure 4.

L'Outil CSS affiche les règles définies dans toutes les feuilles de style utilisées par une page Web. Figure 4. L'Outil CSS affiche les règles définies dans toutes les feuilles de style utilisées par une page Web.

Pour développer ou réduire les propriétés d'une règle, cliquez sur la boîte marquée avec un signe + ou -. Tous les éléments affichés dans cette vue peuvent être modifiés. Les modifications prennent effet immédiatement. Vous pouvez activer ou désactiver une règle de style en cliquant sur la case à cocher affichée en regard du nom de style. Vous pouvez aussi choisir d'activer ou de désactiver une seule ou plusieurs propriétés pour voir l'effet de cette modification sur la règle.

Enregistrement des modifications

Lorsque vous avez terminé les modifications de la page HTML et des fichiers CSS, cliquez sur le bouton Enregistrer pour sauvegarder vos modifications. La boîte de dialogue Enregistrer sous vous invite à enregistrer le fichier avec l'extension .txt et non .html ou .css. Cette sauvegarde au format texte évite le remplacement accidentel de vos fichiers source principaux. Elle est utilisée parce que toutes les modifications apportées à l'aide des Outils de développement concernent la représentation interne de la page Web dans Internet Explorer, et non la source d'origine. Pour cette raison, si vous actualisez la page Web active, que vous accédez à une autre page Web ou que vous sélectionnez Annuler tout, vous retrouvez le contenu d'origine de la page Web.

Remarque  Lorsque vous utilisez les Outils de développement, souvenez-vous que les zones modifiées dans une page Web diffèrent de ce qui existe dans le code source, et que d'autres parties peuvent également ne pas être identiques. Les Outils de développement n'affichent pas la source de votre page Web mais sa représentation dans Internet Explorer. Pour empêcher le remplacement accidentel des sources, les Outils de développement enregistrent la sortie au format texte et ajoutent un commentaire au début du fichier sauvegardé.

Résumé

Les Outils de développement d'Internet Explorer 8 vous aident à identifier et à résoudre les problèmes liés à vos pages Web. Les outils HTML vous permettent de vous concentrer sur certains attributs et propriétés spécifiques des éléments HTML inclus dans une page Web. Les outils CSS permettent d'avoir une vision plus globale et indiquent comment différentes règles et propriétés de vos feuilles de style sont interprétées par Internet Explorer 8. Étant donné que les modifications apportées à l'aide des Outils de développement affectent la représentation interne du site Web dans Internet Explorer et non la source d'origine, le bouton Enregistrer vous permet de sauvegarder vos modifications afin de pouvoir les utiliser ensuite pour actualiser vos sources. Cette opération permet de gagner du temps et de gérer vos pages Web plus efficacement.

Voir aussi