Utiliser les outils de développement de Windows Internet Explorer 8 pour corriger votre site

Remarque : les informations de ce document sont provisoires et sujettes à modification.

Windows Internet Explorer 8 introduit une nouvelle série d'outils de développement pouvant aider à identifier et à corriger les problèmes liés au HTML, aux feuilles de style en cascade (CSS) et au script de pages Web. Les outils de développement aident le développeur Web à effectuer diverses tâches, y compris afficher chaque attribut, déterminer pourquoi une règle CSS spécifique est appliquée à un élément, déboguer le service d'exécution de script et prévisualiser une page Web en utilisant différents modes de compatibilité de document .

Ce document décrit l'utilisation générale des outils de développement de même que les fonctions et l'utilisation des quatre principaux modes que comprennent ces outils. Il s'agit des modes suivants :

1. Le mode HTML, pour voir le code sous-jacent derrière vos pages, sélectionner et tracer le contour de chaque élément, prévisualiser comment certaines modifications de valeur d'attribut affectent le rendu de votre page et voir comment vos règles CSS ont été appliquées à chaque élément.
2. Le mode CSS, pour comprendre comment vos diverses feuilles de style affectent votre page Web et, en conséquence, il est des plus utiles pour les sites utilisant plusieurs feuilles de style.
3. Le mode Script, pour déboguer les scripts utilisés sur votre page Web. Vous pouvez parcourir le code, insérer des points d'arrêt et des espions et inspecter les variables.
4. Le mode Profileur, pour analyser la performance du code sous-jacent derrière vos pages et localiser les fonctions qui peuvent ne pas fonctionner de façon optimale.

Ouvrir et fermer les outils de développement

Pour ouvrir les outils de développement, appuyez sur F12 ou cliquez sur l'option Outils de développement dans le menu Outils sur la barre d'outils de Windows Internet Explorer. La figure 1 montre l'option du menu Outils de développement en surbrillance dans le coin supérieur droit de Windows Internet Explorer.

Figure 1

La fenêtre Outils de développement s'affiche devant la fenêtre Windows Internet Explorer. Les Outils de développement peuvent être fermés comme ils ont été ouverts, en appuyant sur F12 ou en cliquant sur l'option Outils de développement dans le menu Outils de la barre d'outils de Windows Internet Explorer.

Important : Toute modification apportée à l'aide des Outils de développement est temporaire et n'affecte pas la source sous-jacente de votre page Web. Les modifications s'annulent lorsque la page est actualisée, le navigateur passe à une nouvelle page ou la fenêtre de navigation est fermée. Les modifications HTML et CSS peuvent être enregistrées dans un fichier texte en cliquant sur le bouton d'enregistrement de la barre d'outils Outils de développement.

Prévisualiser les différents modes de compatibilité

Windows Internet Explorer 8 introduit des modes de compatibilité de document qui modifient la façon dont Windows Internet Explorer 8 affiche votre page Web. Pour plus d'informations sur les différents modes de compatibilité de document pris en charge et sur la façon de les implémenter, lisez Compatibilité future des balises META et du verrouillage .

Vous pouvez voir la différence visuelle entre les différents modes de compatibilité en utilisant les Outils de développement. Pour modifier le mode de document pour une page Web donnée, choisissez le mode voulu dans le menu Mode document du menu Outils de développement. Une coche indique le mode de compatibilité sélectionné. Les options incluent Excentrique, Normes Internet Explorer 7 ou Normes Internet Explorer 8. Pour modifier le mode du navigateur, choisissez le mode voulu dans le menu Mode navigateur du menu Outils de développement. Une coche indique le mode de compatibilité sélectionné. Les options incluent Internet Explorer 7, Internet Explorer 8 ou Affichage de la compatibilité Internet Explorer 8.

Tracer le contour d'éléments

Pour vous aider à comprendre où les éléments s'affichent dans une page Web ainsi que les types d'éléments utilisés pour créer des effets spécifiques, vous pouvez choisir de tracer le contour de certains éléments. Lorsque vous choisissez les commandes du menu Contour, Windows Internet Explorer trace le contour des éléments correspondants sur la page Web. Par exemple, lorsque vous choisissez la commande Éléments DIV dans le menu Contour, des contours apparaissent autour de tous les éléments div de la page Web actuelle.

Utiliser le mode HTML

Le mode HTML vous permet de voir le balisage sous-jacent derrière vos pages, de sélectionner des éléments individuels et de voir leurs attributs, de prévisualiser comment certaines modifications de valeur d'attribut affectent le rendu de votre page et de voir comment vos règles CSS ont été appliquées aux éléments individuels. Vous pouvez cliquer sur l'onglet HTML dans la fenêtre Outils de développement pour accéder au mode HTML. La figure 2 montre l'onglet HTML sélectionné dans le coin supérieur gauche de la fenêtre Outils de développement.

Figure 2

À la droite du volet de la fenêtre HTML se trouvent les outils conçus pour vous aider à comprendre la présentation des éléments HTML de votre page Web.

• L'outil Style montre comment vos règles CSS ont été appliquées à l'élément sélectionné. Il montre les attributs affectés et où ces valeurs ont été spécifiées. Les coches à gauche de chaque règle peuvent activer ou désactiver la règle. Vous pouvez utiliser les coches pour tester l'apparence des éléments sur votre page Web.
• L'outil Styles de tracé affiche les attributs CSS qui ont été appliqués à un élément, l'élément où l'attribut a été défini et (le cas échéant) le nom de la feuille de style définissant la valeur d'attribut.
• L'outil Disposition affiche les attributs du modèle de boîte de l'élément, qui à son tour montre comment les éléments au centre de la zone de contenu sont affectés. Pour plus d'informations sur le modèle de boîte, reportez-vous à la discussion sur le modèle de boîte W3C .
• L'outil Attributs affiche les attributs de l'élément sélectionné dans l'onglet HTML. Le nœud actuel est affiché dans l'outil. Les attributs peuvent être facilement ajoutés ou supprimés du nœud sélectionné en utilisant cet outil puis mis à jour dans la fenêtre de navigation.

La figure 3 montre les boutons Style, Styles de tracé, Disposition et Attributs situés à la droite du volet HTML.

Figure 3

Sélectionner les éléments et modifier les valeurs d'attribut

Pour sélectionner un élément, mettez-le en surbrillance dans le volet HTML ou utilisez l'outil Sélectionner l'élément par clic de la barre d'outils Outils de développement. La figure 4 montre le bouton Sélectionner l'élément par clic en surbrillance dans le coin supérieur gauche de la fenêtre Outils de développement. L'outil Sélectionner l'élément par clic vous permet de sélectionner tout élément sur la page du navigateur en cliquant sur cet élément. L'élément sur lequel vous avez cliqué est sélectionné dans la fenêtre Outils de développement.

Figure 4

Après avoir sélectionné un élément dans votre page Web, vous pouvez voir ses valeurs d'attribut actuelles et tester de nouvelles valeurs en utilisant le mode HTML pour les modifier. Pour modifier une valeur d'attribut, cliquez sur la valeur d'attribut à modifier dans l'onglet HTML ou double-cliquez sur la valeur à modifier dans l'outil Attributs. Entrez la nouvelle valeur et appuyez sur ENTRÉE. Ainsi, Windows Internet Explorer affiche les effets de votre modification. Vous pouvez rejeter des valeurs partielles en appuyant sur la touche Echap avant d'appuyer sur ENTRÉE. Pour retrouver l'apparence originale de la page, actualisez-la.

Utiliser les outils Style et Styles de tracé

L'outil Style affiche toutes les règles de style qui s'appliquent à l'élément sélectionné en cascade, les styles ignorés étant rayés. Utilisez la case à côté de chaque règle pour activer et désactiver cette règle puis voyez immédiatement l'effet dans Windows Internet Explorer. L'outil Styles de tracé montre le calcul d'une propriété de style spécifique. Dans cet affichage, les styles sont groupés par propriété et non par règle. Ainsi, la valeur calculée d'une propriété est tout de suite visible. L'extension de la propriété affiche toutes les règles qui définissent cette propriété, à nouveau en cascade pour montrer comment Windows Internet Explorer a déterminé le résultat final.

Les valeurs de style des deux outils peuvent être modifiées en cliquant sur la valeur puis en entrant une nouvelle valeur. La nouvelle valeur est validée en laissant la valeur modifiable, ou en appuyant sur Echap pour abandonner la modification.

La figure 5 montre l'outil Style avec une règle désactivée.

Figure 5

Comprendre les outils Disposition

L'outil Disposition affiche les valeurs suivantes :

• Les valeurs Décalage décrivent la distance entre l'objet sélectionné et son parent, comme représenté par les propriétés offsetLeft et offsetTop .
• Les valeurs Marge, Bordure et Remplissage affichent les valeurs correspondantes spécifiées dans la page Web. Si aucune valeur n'est spécifiée dans la source de la page Web, l'outil Disposition affiche les valeurs par défaut utilisées par Windows Internet Explorer.
• Les valeurs intérieures sont la hauteur et la largeur de l'élément, comme défini par les propriétés offsetHeight et offsetWidth.

La valeur et les unités de mesure de chaque attribut de modèle de boîte sont affichées. Par défaut, l'outil Disposition suppose que les attributs de modèle de boîte sont indiqués en pixels. Si une unité de mesure n'est pas affichée dans l'outil Disposition, la valeur représente des pixels. La figure 6 montre l'affichage de l'outil Disposition avec un élément sélectionné dans le volet HTML sur la gauche.

Figure 6

Visualiser des attributs en utilisant l'outil Attributs

Les Outils de développement de Windows Internet Explorer 8 incluent également un outil pour afficher les attributs d'un élément. Pour utiliser l'outil Attributs, cliquez sur le bouton Attributs dans le coin supérieur droit. Les éléments HTML du site Web actuel sont affichés dans le volet gauche dans l'onglet HTML. Si vous sélectionnez un élément, une liste de ses attributs s'affiche dans le volet droit. Cochez la case Afficher les propriétés de lecture seule pour que l'outil Attributs affiche une liste de toutes les propriétés de l'élément sélectionné. La figure 7 montre l'outil Attributs sélectionné avec une liste d'attributs pour l'élément HTML.

Figure 7

Vous pouvez ajouter ou supprimer des attributs en cliquant sur les boutons  ou  en haut de la fenêtre de l'outil Attributs. Une zone de liste modifiable vous permet de sélectionner l'attribut à ajouter.

Utiliser le mode CSS

Le mode CSS vous permet de voir comment vos diverses feuilles de style affectent votre page Web, ce qui le rend très utile pour les sites utilisant plusieurs feuilles de style. Vous pouvez cliquer sur l'onglet CSS dans la fenêtre Outils de développement pour accéder au mode CSS. La figure 8 montre l'onglet CSS sélectionné dans le coin supérieur gauche de la fenêtre Outils de développement.

Figure 8

La barre d'outils du mode CSS comprend une zone de liste modifiable vous permettant de sélectionner une feuille de style chargée par votre page Web et d'afficher les propriétés. Les règles dans la feuille de style s'affichent sous le bouton de feuille de style et vous pouvez développer ou réduire les attributs de l'arborescence. Les règles individuelles peuvent être activées et désactivées en cochant la case à côté de chaque article.

Les valeurs pour chaque propriété peuvent être modifiées comme dans le mode HTML, en cliquant sur la valeur, en entrant une nouvelle valeur et en sortant du champ.

Utiliser le mode Script

Le mode Script vous permet de déboguer des scripts sur votre page Web en vous permettant de parcourir le code, d'insérer des points d'arrêt et d'inspecter des variables. En fournissant un débogueur léger intégré qui vous permet de définir des points d'arrêt et de parcourir le script côté client, les Outils de développement vous permettent de déboguer vos scripts sans quitter Windows Internet Explorer. Vous pouvez cliquer sur l'onglet Script dans la fenêtre Outils de développement pour accéder au mode Script. La figure 9 montre l'onglet Script sélectionné dans le coin supérieur gauche de la fenêtre Outils de développement.

Figure 9

Démarrer et arrêter le débogage

Vous pouvez démarrer le débogage en cliquant sur le bouton Démarrer le débogage. Pendant le débogage, tous les scripts du site, y compris les fichiers séparés et les blocs de script Inline, sont disponibles dans le menu déroulant de la liste de scripts. Vous pouvez arrêter le débogage en cliquant sur le bouton Arrêter le débogage.

Paramétrer les points d'arrêt

Pendant le débogage, toute erreur d'exécution amène le débogueur à s'arrêter automatiquement à l'emplacement de l'erreur. Windows Internet Explorer s'arrête et met en surbrillance la ligne ayant provoqué l'erreur dans la fenêtre Afficher la source.

Remarque : Pendant que Windows Internet Explorer attend l'entrée du débogueur de script, il ne répond pas aux interactions de l'utilisateur.

Vous pouvez également choisir où arrêter l'exécution en paramétrant un point d'arrêt. Un point d'arrêt amène l'exécution du script à s'arrêter tout de suite avant l'exécution de la ligne du point d'arrêt. Le débogueur met en surbrillance la ligne suivante à exécuter dans le script Afficher la source. Les points d'arrêt peuvent également être définis après avoir démarré le débogage. Vous pouvez définir un point d'arrêt en cliquant à côté d'un numéro de ligne, via le menu contextuel obtenu en cliquant avec le bouton droit ou en appuyant sur F9.

L'onglet Points d'arrêt du débogueur contient une liste de tous les points d'arrêt disponibles. La figure 10 affiche l'onglet Points d'arrêt sélectionné à la droite du volet de l'outil de débogage.

Figure 10

Ici, vous trouverez l'emplacement de tous les points d'arrêt ainsi que le nom de fichier et le numéro de ligne. Double-cliquez sur un point d'arrêt de cette liste pour atteindre l'emplacement de ce point d'arrêt dans le code source. Vous pouvez désactiver un point d'arrêt sans le supprimer du code source en désactivant la case à côté du point d'arrêt. Pour supprimer un point d'arrêt, cliquez avec le bouton droit et sélectionnez Supprimer.

Remarque : Même si vous quittez le site actuel, Windows Internet Explorer conserve les informations de point d'arrêt jusqu'à ce que vous fermiez les Outils de développement.

Inspecter les variables

Vous pouvez inspecter les variables de script quand l'exécution est arrêtée à un point d'arrêt. L'outil Variables locales du débogueur affiche le nom, la valeur et le type de toutes les variables disponibles dans la portée de l'exécution actuelle. Les variables non couvertes par l'exécution ne sont pas définies. La portée de l'exécution est la plage dans laquelle une variable peut être référencée. La figure 11 affiche l'outil Variables locales sélectionné pendant le débogage.

Figure 11

Vous pouvez regarder les variables de différents points de vue en les ajoutant à l'outil Espion. Pour définir une variable d'espion, sélectionnez le texte source, cliquez avec le bouton droit et choisissez Ajouter un espion. Cela ajoute un espion pour l'identificateur sur lequel le curseur se trouvait. La figure 12 affiche l'outil Espion sélectionné, pendant le débogage d'une variable espionnée.

Figure 12

Vous pouvez également ajouter une variable espion en cliquant « Cliquer pour ajouter... » dans la fenêtre Espion et en entrant le nom de la variable.

Utiliser le mode Profileur

Vous pouvez utiliser le mode Profileur pour étudier le délai d'exécution de votre site Web en utilisant les informations rassemblées par Profileur alors que Windows Internet Explorer affiche votre site Web. Ces informations sont utiles pour cibler les optimisations si une partie de code entraîne un délai d'exécution excessivement long ou un goulot d'étranglement.

Pour utiliser le mode Profileur, sélectionnez l'onglet Profileur dans le coin supérieur gauche de la fenêtre. Pour démarrer le profilage, cliquez sur le bouton Démarrer le profilage en haut de la fenêtre. Le Profileur commence alors à analyser les sites Web affichés dans Windows Internet Explorer. Pour profiler un site Web, naviguez jusqu'à l'URL, le mode Profileur recueillera les données alors que la page est affichée. Cliquez sur le bouton Terminer le profilage pour afficher le rapport produit par le Profileur. La figure 13 montre le mode Profileur avec un rapport chargé.

Figure 13

Le rapport affiche les fonctions utilisées par Windows Internet Explorer pour afficher l'URL. Le nom de la fonction, le nombre de fois que la fonction a été appelée, le temps inclusif et le temps exclusif. Le temps inclusif est la quantité de temps passé dans une fonction y compris le temps passé dans les fonctions appelées depuis cette fonction. Le temps exclusif est la quantité de temps passé dans une fonction excepté le temps passé dans les fonctions appelées depuis cette fonction.

En utilisant les informations recueillies par le Profileur, vous pouvez localiser tous les goulots d'étranglement se trouvant dans votre code de site Web. Localiser et restructurer le code ou les algorithmes qui ne s'exécutent pas efficacement diminue le temps passé par Windows Internet Explorer à afficher vos pages Web.