Partager via

Découverte des Outils de développement Internet Explorer

  • Article

Nouveautés de Windows Internet Explorer 8

Chaque installation d'Internet Explorer 8 comprend les Outils de développement. Ces outils permettent aux développeurs de sites Web de déboguer rapidement Microsoft JScript, d'examiner un comportement propre à Internet Explorer ou d'effectuer une courte itération dans le but d'établir un prototype d'une nouvelle conception ou d'essayer instantanément des solutions pour résoudre un problème. Cet article présente les fonctionnalités clés des Outils de développement.

  • Introduction
  • Mise en route
  • Débogage de code HTML et CSS
    • Inspection des éléments HTML
    • Inspection des propriétés CSS
    • Modification instantanée des sources
    • Enregistrement des modifications
  • Débogage de JScript
    • Démarrage et arrêt du débogueur
    • Contrôle de l'exécution
    • Inspection des variables
    • Inspection de la pile des appels
    • Utilisation de la console du débogueur
  • Profilage des performances JScript
    • Démarrage et arrêt du profileur
    • Affichage des données
    • Profilage de plusieurs sessions et exportation de données
  • Recherche de contenu
  • Affichage des sources
  • Définition du contour des éléments à l'écran
  • Manipulation des images
  • Contrôle du cache et des cookies
  • Utilisation d'outils puissants
  • Validation des sources
  • Test dans différents modes navigateur et document
    • Test des modes navigateur
    • Test des modes document
  • Utilisation des raccourcis clavier
  • Référencement des commandes d'interface
  • Voir aussi

Introduction

Des outils fiables jouent un rôle critique dans la productivité des développeurs. Alors qu'il existe de nombreux outils de développement Web, ils ne répondent pas forcément à tous vos besoins. Par exemple, vous souhaiterez peut-être déboguer rapidement JScript, examiner un comportement propre à Internet Explorer ou effectuer une courte itération dans le but d'établir un prototype d'une nouvelle conception ou d'essayer des solutions pour résoudre un problème. Pour améliorer la productivité des développeurs dans ces scénarios, ou scénarios similaires, Internet Explorer 8 inclut des outils puissants mais simples d'utilisation dotés de caractéristiques importantes :

  • Intégration et simplicité d'utilisation : une instance des Outils de développement est fournie dans chaque installation d'Internet Explorer 8. Ces outils permettent d'effectuer un débogage sur tout ordinateur exécutant Internet Explorer 8. De plus, ils se chargent uniquement au moment requis afin de limiter leur impact sur les performances du navigateur. À l'aide des Outils de développement, vous pouvez effectuer un débogage instantané des scripts uniquement pour le processus Internet Explorer en cours plutôt qu'activer le débogage pour Internet Explorer dans son intégralité.
  • Interface visuelle de la plateforme : au lieu d'effectuer une ingénierie à rebours du fonctionnement de votre site ou de modifier votre site pour sortir les informations de débogage, les Outils de développement vous permettent de visualiser Internet Explorer pour afficher sa représentation de votre site. Cela réduit le temps passé à déboguer des sites dynamiques pour lesquels l'inspection de la source n'est pas utile ou à examiner un comportement propre à Internet Explorer pour lequel un outil de création générique s'avère impuissant.
  • Expérimentation rapide : lors de l'établissement d'un prototype pour une nouvelle conception ou du test de correctifs dans les versions précédentes d'Internet Explorer, vous modifiez probablement votre source, vous l'enregistrez, vous actualisez votre page dans le navigateur et répétez cette opération. Les Outils de développement Internet Explorer 8 simplifient ce scénario en vous permettant de modifier votre site dans le navigateur et de voir immédiatement la modification.
  • Optimisation des performances de l'application : l'identification et la résolution de problèmes de performances constituent généralement une approche itérative effectuée en se concentrant sur un seul scénario à la fois. Avec le Profileur de script des Outils de développement Internet Explorer 8, vous pouvez collecter des statistiques telles que le temps d'exécution et le nombre d'appels d'une fonction JScript pendant le test de votre application et utiliser le rapport de profil pour rapidement identifier et résoudre des goulots d'étranglement au niveau des performances.

Grâce à ces caractéristiques, les fonctionnalités des Outils de développement amélioreront considérablement votre productivité pour le développement dans Internet Explorer. La suite de cet article détaille la plupart de ces fonctionnalités et bien d'autres.

Mise en route

La mise en route avec ces outils est simple : appuyez sur F12 ou cliquez sur Outils de développement dans le menu Outils.

Une fois ouverts, les outils existent dans leur propre fenêtre, chacun étant connecté à un onglet unique dans Internet Explorer. Si vous préférez diminuer le nombre de fenêtres ouvertes, attachez les outils à un onglet en cliquant sur le bouton Attacher ou appuyez sur CTRL+P.

Certaines fonctionnalités des outils n'ont pas besoin de l'intégralité de l'interface des outils. Dans ce cas, cliquez sur le bouton Réduire ou appuyez sur CTRL+M lorsque les outils sont attachés. Les outils sont placés sur une ligne en bas de la fenêtre permettant ainsi d'accéder uniquement à la barre de menus de commande.

Débogage de code HTML et CSS

Les outils vous permettent d'avoir une visibilité dans le navigateur pour inspecter le code HTML et les feuilles de style en cascade (CSS, Cascading Style Sheets) de votre site tels qu'ils existent à l'intérieur d'Internet Explorer au lieu de la source d'origine uniquement. Cette fonctionnalité se révèle particulièrement utile avec les sites dynamiques, les sites complexes et les sites qui utilisent des infrastructures comme ASP (Active Server Pages) ou PHP.

Le volet de contenu principal des outils affiche l'arborescence DOM (Document Object Model) du site, qui reflète celle maintenue par Internet Explorer pour représenter le site en mémoire. Vous pouvez naviguer dans l'arborescence à l'aide de la souris ou du clavier. La méthode la plus rapide permettant de trouver le nœud d'un élément spécifique consiste à utiliser la fonctionnalité Sélectionner l'élément par clic. Utilisez cette fonctionnalité pour sélectionner un élément dans la page afin que les outils sélectionnent automatiquement le nœud d'arborescence correspondant. Une autre méthode consiste à utiliser la zone de recherche.

Inspection des éléments HTML

Une fois que vous avez sélectionné un élément dans l'arborescence DOM, le volet des propriétés à droite affiche davantage d'informations sur l'élément des façons suivantes :

  • Style : la commande Style améliore le débogage CSS en fournissant une liste de toutes les règles qui s'appliquent à l'élément sélectionné. Les règles s'affichent par ordre de priorité, de sorte que celles qui s'appliquent en dernier s'affichent en bas, et toute propriété remplacée par une autre est rayée. Vous pouvez ainsi comprendre rapidement comment les règles CSS affectent l'élément actuel sans effectuer de correspondance manuelle des sélecteurs. Vous pouvez rapidement activer ou désactiver une règle CSS à l'aide de la case à cocher située en regard de cette règle afin que l'action prenne immédiatement effet dans votre page.
  • Suivre les styles : cette commande contient les mêmes informations que Style excepté qu'elle regroupe les styles par propriété. Si vous recherchez des informations sur une propriété spécifique, utilisez la commande Suivre les styles. Recherchez simplement la propriété qui vous intéresse, cliquez sur l'icône plus (+) et consultez la liste de toutes les règles qui définissent cette propriété, toujours par ordre de priorité.
  • Disposition : la commande Disposition fournit des informations de modèle de boîte, telles que le décalage, la hauteur et la marge intérieure de l'élément. Utilisez cette commande lors du débogage du positionnement d'un élément.
  • Attributs : la commande Attributs vous permet d'inspecter tous les attributs définis de l'élément sélectionné. Cette commande vous permet également de modifier, d'ajouter ou de supprimer des attributs de l'élément sélectionné.

Pour une inspection CSS plus détaillée, accédez à l'onglet CSS pour afficher la liste de tous les fichiers CSS du site actuel.

Inspection des propriétés CSS

L'onglet CSS vous donne l'accès à tous les fichiers CSS externes à inspecter. Sélectionnez une feuille de style en cliquant sur le bouton de sélection de feuille de style. Lorsque vous cliquez sur un nom de propriété de style ou une valeur, vous pouvez les modifier et constater leur répercussion immédiate.

Modification instantanée des sources

Après avoir utilisé les outils pour inspecter et rassembler les informations souhaitées, vous souhaiterez peut-être exécuter de suite des actions sur les éléments trouvés. Pour modifier un attribut HTML ou une propriété CSS, cliquez simplement dessus, tapez la nouvelle valeur et appuyez sur ENTRÉE. La modification prend effet immédiatement, vous permettant ainsi de tester rapidement les modifications. Dans HTML, vous pouvez également appuyer sur le bouton Modifier pour rendre toute l'arborescence modifiable et ajouter, supprimer ou modifier des éléments complets. Dans l'un ou l'autre cas, les Outils de développement permettent une modification rapide sans altération de la source. Une fois tous les éléments en place, vous pouvez enregistrer vos modifications.

Enregistrement des modifications

Toutes les modifications effectuées dans les outils existent uniquement dans la représentation interne d'Internet Explorer du site. Par conséquent, l'actualisation de la page ou la navigation pour en sortir restitue le site d'origine. Toutefois, vous souhaiterez peut-être dans certains cas enregistrer les modifications. Dans les onglets HTML et CSS, cliquez sur le bouton Enregistrer pour enregistrer respectivement le code HTML ou CSS actuel dans un fichier. Souvenez-vous que les zones du site que vous avez modifiées diffèrent donc de votre source, mais d'autres parties peuvent également différer car les outils affichent votre site tel qu'il existe dans Internet Explorer plutôt que dans votre source. Pour empêcher le remplacement accidentel de la source, les outils enregistrent la sortie sous forme de texte et ajoutent un commentaire au début du fichier.

Pour plus d'informations sur le code HTML et CSS, lisez l'article Débogage de code HTML et CSS avec les Outils de développement (page éventuellement en anglais).

Débogage de JScript

Alors que CSS simplifie la génération de sites dynamiques sans JScript, les sites les plus complexes requièrent toujours un script. Et comme pour tout langage de programmation, un bon débogueur est essentiel à la productivité d'où l'importance de ces Outils de développement fournis.

Démarrage et arrêt du débogueur

Le débogage de JScript dans Internet Explorer 8 est simple. Sur un site que vous souhaitez déboguer, ouvrez les Outils de développement et accédez à l'onglet Script, puis cliquez sur Démarrer le débogage. Lors du démarrage du processus de débogage, les Outils de développement actualisent la page et détachent les outils s'ils sont attachés.

Une fois le processus démarré, vous disposez de toutes les fonctionnalités que vous attendez d'un débogueur. Lorsque vous avez terminé, cliquez à nouveau sur le bouton pour arrêter le débogage. Dès le démarrage du débogueur, les Outils de développement offrent un contrôle puissant ainsi que des aperçus de vos scripts.

Contrôle de l'exécution

Vous pouvez suspendre l'exécution à un endroit spécifié en définissant des points d'arrêt. Cliquez sur un numéro de ligne ou cliquez avec le bouton droit sur la source et choisissez Insérer un point d'arrêt. Vous pouvez définir des points d'arrêt dans les fonctions inline ou dans les gestionnaires d'événements. Des points d'arrêt conditionnels peuvent également être définis.

Si vous n'êtes pas certain de l'emplacement où vous devez définir un point d'arrêt, cliquez sur Interrompre tout pour suspendre l'exécution avant le lancement de l'instruction JScript suivante ou sur Erreur de point d'arrêt pour suspendre l'exécution lorsqu'Internet Explorer rencontre une erreur de script. Après avoir suspendu l'exécution, parcourez le script, notamment les fonctions anonymes avec les commandes Pas à pas détaillé, Pas à pas principal et Pas à pas sortant.

Inspection des variables

Lorsque vous parcourez le code, il est utile d'inspecter l'état actuel des variables. Sous l'onglet Script, utilisez le volet Variables locales pour visualiser les variables locales et le volet Espion pour surveiller une liste personnalisée de variables. Vous pouvez ajouter des variables à cette liste en cliquant avec le bouton droit dans la source, puis en cliquant sur Ajouter un espion ou en tapant le nom de la variable dans le volet Espion.

Inspection de la pile des appels

Lorsque vous déboguez votre application en parcourant le code JScript, vous pouvez visualiser les fonctions dans la pile des appels actuelle. Si vous cliquez sur une fonction dans la liste de la pile des appels, le code source s'affiche dans le volet de contenu principal.

Utilisation de la console du débogueur

Au lieu de modifier votre source pour tester une instruction, à l'aide des Outils de développement, tapez simplement les instructions JScript dans le volet Console pour l'exécuter. Cliquez sur Mode multiligne pour entrer plusieurs lignes à exécuter en même temps. Internet Explorer exécute immédiatement le code ; vous pouvez donc tester le résultat de l'ajout du code au même emplacement que le point d'arrêt actuel. Vous pouvez utiliser la console même lorsque vous n'effectuez pas de débogage. Pour faciliter la résolution des erreurs dans votre page, la console enregistre également tous les messages d'erreur de script via le fichier console.log. Vous trouverez davantage d'informations à ce sujet dans l'article Débogage de scripts avec les Outils de développement sous la section « Utilisation de la console pour exécuter des instructions de code » (page éventuellement en anglais).

Pour obtenir des informations détaillées sur le débogage des scripts, lisez l'article Débogage de scripts avec les Outils de développement (page éventuellement en anglais).

Profilage des performances JScript

Le débogage de JScript aide à parfaire le comportement de votre site, mais le profileur JScript peut faire passer votre site au niveau supérieur en améliorant ses performances. Le profileur vous donne des données sur le temps passé pour chacune des méthodes JScript de votre site et même pour les fonctions JScript intégrées telles que la concaténation de chaînes. Étant donné que vous pouvez démarrer et arrêter le profileur JScript à tout moment pendant l'exécution de l'application, vous pouvez collecter de nombreuses données de profil pour le scénario spécifique qui vous intéresse.

Démarrage et arrêt du profileur

Comme pour le débogueur, la mise en route est simple : ouvrez l'onglet Profileur et cliquez sur Démarrer le profilage pour commencer une session. Exécutez le scénario que vous souhaitez profiler, puis cliquez sur Terminer le profilage. Les données résultantes peuvent alors être examinées immédiatement.

Affichage des données

Par défaut, les données s'affichent dans une vue de fonction qui répertorie toutes les fonctions utilisées. Cliquez sur le menu déroulant Affichage actuel et sélectionnez Arborescence des appels pour consulter une arborescence qui représente l'ordre des appels effectués pour vous permettre de parcourir le chemin d'accès du code et de trouver les zones réactives. Dans les deux vues, vous pouvez ajouter, supprimer, réorganiser et trier des colonnes pour trouver les informations que vous recherchez.

Le rapport de profil vous donne des informations sur l'URL et le numéro de ligne de la fonction pour vous aider à trouver le code dans votre application. Cliquez sur le nom de la fonction pour afficher le code source correspondant dans le volet de contenu principal de l'onglet Script.

Remarque :  Le mappage des numéros de ligne aux fonctionnalités du code source est uniquement disponible lorsque le débogage des scripts est activé. Vous trouverez davantage d'informations sur le débogage de script dans l'article : Débogage de scripts avec les Outils de développement (page éventuellement en anglais).

Profilage de plusieurs sessions et exportation de données

Cliquez à nouveau sur Démarrer le profilage pour commencer une nouvelle session de profilage. Lorsque vous cliquez sur Terminer le profilage, les nouvelles données s'affichent. Pour consulter les données de sessions profilées précédentes, cliquez sur la liste déroulante de fichiers et choisissez un autre rapport. Le rapport de profil est conservé pour le processus Internet Explorer actuel, mais vous pouvez enregistrer les données de profil au format CSV en cliquant sur le bouton Exporter et utiliser toute autre application pour de futures investigations.

Pour plus d'informations sur le profilage, lisez l'article Profilage de scripts avec les Outils de développement (page éventuellement en anglais).

Recherche de contenu

Les Outils de développement contiennent une suite d'outils permettant d'inspecter et de modifier vos sources pour tester instantanément des opérations. Lorsque les sources à parcourir sont nombreuses, trouver rapidement les éléments recherchés est un point positif. C'est possible grâce à la zone de recherche fournie dans les Outils de développement. La zone de recherche est contextuelle et dépend de l'onglet Mode dans lequel vous travaillez. Par exemple, si vous êtes actuellement sous l'onglet HTML, la recherche est exécutée par rapport au DOM dans le volet de contenu principal. Toutes les correspondances sont mises en surbrillance et la première est sélectionnée. De même, vous pouvez effectuer des recherches sous les onglets CSS, Script et Profileur.

La zone de recherche prend également en charge la syntaxe API de sélecteurs W3C  Lien World Wide Web pour l'onglet HTML. Pour utiliser la syntaxe de sélecteurs, démarrez la recherche avec le symbole « @ ». Par exemple, pour rechercher tous les éléments div, tapez « @div ». Pour rechercher uniquement les éléments div avec un nom de classe CSS particulier, tapez « @div.monNomDeClasse », ou pour rechercher tous les éléments avec ce nom de classe, tapez « @.monNomDeClasse ». Vous pouvez également rechercher des éléments avec un ID défini ; pour ce faire, tapez « @#monID ». Pour en savoir plus sur les sélecteurs CSS, lisez l'article Présentation des sélecteurs CSS (page éventuellement en anglais).

Remarque :  Les noms de classe CSS respectent la casse lorsque la syntaxe de sélecteur est utilisée dans la zone de recherche.

Affichage des sources

Avant Internet Explorer 8, la seule source que vous pouviez afficher était la source d'origine en cliquant avec le bouton droit sur une page Web et en sélectionnant Afficher la source. Cette option est encore disponible ; toutefois, la commande Affichage des Outils de développement vous offre davantage de contrôle sur le type de source à afficher. Vous pouvez choisir d'afficher un élément spécifique avec ses sources DOM uniquement ou avec les sources et styles DOM appliqués à cet élément. L'élément est alors isolé pour vous permettre de mieux cibler les problèmes potentiels. Vous pouvez également afficher la source d'origine de la page Web ou les sources DOM telles qu'elles sont représentées par Internet Explorer. Cela comprend les sources d'origine et celles insérées par des scripts. Maintenant, vous visualisez exactement ce que le navigateur Internet Explorer voit.

La commande Affichage permet également de visualiser le rapport de lien. Le rapport de lien est généré dans un onglet distinct du navigateur avec des informations sur tous les liens trouvés dans la page.

Remarque :  Les Outils de développement vous permettent de choisir votre propre application pour visualiser la source. Cette option se trouve dans le menu Fichier.

Définition du contour des éléments à l'écran

Vous êtes-vous déjà demandé où se trouvait la bordure d'un élément particulier à l'écran ? Avez-vous déjà affecté la valeur 1 à la bordure d'un élément dans le seul but de savoir où elle se trouvait ? Grâce à la commande Contour des Outils de développement, vous pouvez visualiser les contours de tous vos éléments sans avoir à modifier vos sources. La commande fournit quelques éléments couramment utilisés comme les tables, les éléments Div et les images. Elle offre également une boîte de dialogue permettant d'ajouter n'importe quel élément dont vous souhaitez définir le contour. Vous pouvez également attribuer une couleur à chaque élément pour les différencier plus facilement. Le contour est conservé jusqu'à sa désactivation ou l'actualisation de la page. Vous trouverez davantage d'informations sur le menu Contour dans l'article Référence de l'interface utilisateur des Outils de développement sous la section « Menu Contour » (page éventuellement en anglais).

Manipulation des images

Lors de l'utilisation d'images, les Outils de développement offrent plusieurs commandes pour vous aider à identifier rapidement les informations sur vos images telles que la taille de fichier, les dimensions et le chemin d'accès, directement à l'écran. Ils vous permettent également d'activer ou de désactiver le rendu d'image. Ils offrent même une option permettant de générer un rapport d'image pour chaque image trouvée dans la page Web.

Contrôle du cache et des cookies

Le menu de commande Cache vous permet de contrôler vos paramètres de cache et de cookie. Vous pouvez définir le navigateur de façon à Toujours actualiser depuis le serveur pour être sûr d'obtenir les informations les plus récentes. Vous pouvez également contrôler le cache avec les options Effacer le cache du navigateur ou Effacer le cache du navigateur pour ce domaine.

Si vous travaillez avec des cookies, vous pouvez choisir de les désactiver afin qu'aucun cookie ne soit écrit dans votre ordinateur. Pour visualiser rapidement la liste complète de tous vos cookies, cliquez sur Afficher les informations de cookie. Vous pouvez également choisir d'Effacer les cookies de la session ou d'Effacer les cookies du domaine.

Dans les deux cas, cache et cookies, ces commandes s'avéreront pratiques car elles vous permettent de contrôler strictement votre environnement de navigateur et d'y accéder rapidement.

Utilisation d'outils puissants

Le menu de commande Outils vous offre trois outils puissants pour travailler sur vos sites Web.

  1. Outil Redimensionner : cet outil vous aide à redimensionner rapidement votre fenêtre de navigateur à des tailles standard telles que 800 x 600 ou 1 024 x 768 ; vous pouvez même ajouter des tailles de fenêtre personnalisées. Il existe des raccourcis clavier disponibles pour ces commandes ; vous les trouverez dans l'article Référence des raccourcis clavier des Outils de développement (page éventuellement en anglais).
  2. Outil Afficher la règle : cet outil vous permet de dessiner des règles à l'écran pour calculer plus facilement la distance entre les objets. Les règles peuvent avoir la valeur Aligner sur l'axe X/Y, Aligner sur l'élément ou être libres. Vous pouvez dessiner autant de règles que vous le souhaitez, et vous pouvez également réutiliser une règle en la redimensionnant et en la repositionnant.
  3. Outil Afficher le sélecteur de couleurs : cet outil vous aidera à choisir une couleur. En plaçant le sélecteur sur du texte, un objet ou sur l'arrière-plan à l'écran, un exemple de couleur correspondant à l'emplacement actuel du sélecteur s'affiche avec sa valeur HEXADÉCIMALE. Une fois que vous avez cliqué sur une couleur, vous pouvez ensuite copier sa valeur dans votre code.

Validation des sources

Lorsque vous aurez terminé votre travail de développement, vous voudrez savoir si votre code répond aux différentes normes telles que HTML, CSS et accessibilité. Les Outils de développement ont rassemblé ces ressources utiles pour vous aider à vérifier vos sources par rapport à ces validateurs. Choisissez simplement le type de validation à exécuter ou optez pour une session Validations multiples.

Test dans différents modes navigateur et document

Internet Explorer 8 possède une fonctionnalité permettant de restituer les pages et de signaler des informations de version comme Internet Explorer 7. Les développeurs et utilisateurs finaux de sites Web peuvent utiliser cette fonctionnalité pour garantir que les sites continuent à fonctionner même s'ils n'ont pas été créés pour Internet Explorer 8, mais vous pouvez également l'utiliser pour tester de quelle façon votre site s'affichera pour les utilisateurs d'Internet Explorer 7.

Test des modes navigateur

Le menu Mode navigateur vous permet de choisir de quelle façon Internet Explorer doit signaler trois propriétés importantes :

  • Chaîne de l'agent utilisateur : valeur envoyée par Internet Explorer aux serveurs Web pour s'identifier.
  • Vecteur de version : valeur utilisée lors de l'évaluation de commentaires conditionnels.
  • Mode document : valeur utilisée pour déterminer si Internet Explorer utilise le comportement le plus récent pour les opérations CSS, DOM et JScript ou s'il émule une version précédente d'Internet Explorer pour la compatibilité.

Il existe trois options Mode navigateur, chacune modifiant ces valeurs de différentes façons :

  • Internet Explorer 7 : dans ce mode, Internet Explorer signale un agent utilisateur, un vecteur de version et un mode document identiques à ceux utilisés par Internet Explorer 7. Utilisez ce mode pour tester l'expérience des utilisateurs d'Internet Explorer 7 sur votre site.
  • Internet Explorer 8 : dans ce mode, Internet Explorer signale un agent utilisateur, un vecteur de version et un mode document correspondant au comportement d'Internet Explorer 8 par défaut, qui est le plus conforme aux normes disponible dans Internet Explorer 8. Utilisez ce mode pour tester l'expérience des utilisateurs d'Internet Explorer 8 sur votre site.
  • Affichage de compatibilité IE8 : dans ce mode, Internet Explorer 8 signale un vecteur de version, un mode document et une chaîne d'agent utilisateur comme s'il s'agissait d'Internet Explorer 7 ; toutefois, la chaîne d'agent utilisateur inclut également un jeton indiquant que le navigateur est réellement Internet Explorer 8. Utilisez ce mode pour tester l'expérience des utilisateurs d'Internet Explorer 8 sur votre site s'ils ont choisi l'option Affichage de compatibilité.

Test des modes document

Le Mode document définit de quelle façon Internet Explorer restitue votre page, mais il n'a aucun effet sur le vecteur de version ou la chaîne d'agent utilisateur. En utilisant cette option conjointement avec le mode navigateur, vous pouvez tester rapidement le mode document à utiliser pour votre site. Il existe trois options :

  • Mode Quirks : ce comportement correspond à celui d'Internet Explorer lors du rendu d'un document sans doctype ou avec un doctype Quirks. Il s'apparente au comportement de Microsoft Internet Explorer 5 et au mode de rendu Quirks d'Internet Explorer 6, et est identique au mode Quirks d'Internet Explorer 7.
  • Mode Normes d'Internet Explorer 7 : ce comportement correspond à celui d'Internet Explorer 7 qui restitue un document avec un doctype strict ou inconnu.
  • Mode Normes d'Internet Explorer 8 : il s'agit du comportement conforme aux normes le plus récent disponible dans Internet Explorer 8 ; c'est le mode utilisé par défaut dans Internet Explorer 8 lors du rendu d'un document avec un doctype strict ou inconnu.

Pour plus d'informations sur les modes de compatibilité des documents, lisez l'article Test des modes de compatibilité des navigateurs et des documents avec les Outils de développement

Utilisation des raccourcis clavier

Les Outils de développement d'Internet Explorer 8 offrent une prise en charge complète des raccourcis clavier pour simplifier encore davantage l'exécution des tâches. Utilisez les conventions Windows standard comme F12 pour ouvrir ou fermer les Outils de développement et F5 pour actualiser la page. Vous trouverez la liste complète dans l'article Référence des raccourcis clavier des Outils de développement (page éventuellement en anglais).

Référencement des commandes d'interface

Cet article vous présente la plupart des fonctionnalités essentielles des Outils de développement, mais vous trouverez des informations supplémentaires sur tous les outils disponibles dans l'article Référence de l'interface utilisateur des Outils de développement (page éventuellement en anglais).

Voir aussi