Les outils de développement web d'Internet Explorer
Noter ce cours : 
Terminologies
Front-end et back-end
Un site web est composé de deux parties :
- Le front-end : il s'agit de la partie visible de l'utilisateur, composée des langages HTML 5, CSS, Javascript.
- Le back-end : il s'agit du code dynamique de votre site (généralement écrit en PHP ou dans un autre langage dynamique.
L'outil d'inspection (appelé Inspecteur ou explorateur) est présent sur la plupart des navigateurs modernes. Nous allons présenter celui d'Internet Explorer 11, déjà présent et amélioré depuis la version 8.
Le DOM
Le DOM (Document Object Model) est (dans la partie qui nous intéresse à savoir les sites Web) une interface permettant à des scripts d'accéder ou de mettre à jour la structure (construite sous forme d'une arborescence), le contenu ou le style du document.
Rappelez-vous : le langage HTML utilise des balises. Ces balises forment une arborescence. DOM offre la possibilité de manipuler la structure et le contenu de cette arborescence.
<!doctype html> <html lang="fr"> <head> <title>Vulgarisation-informatique.com</title> <meta name="description" content="Cours et tutoriels sur l'informatique tous niveaux"> <meta charset="iso-8859-1"> <link rel="stylesheet" href="styles/style.css" type="text/css" media="all"> <script src="scripts/jquery-1.10.2.js"></script> </head> <body> <section id="conteneur"> <p>Mon texte</p> </section> </body> </html>
Outils de développement F12
Les outils de développement F12 sont disponibles sur n'importe quelle page que vous affichez dans Internet Explorer. Pour y accéder, appuyez sur la touche F12, ou cliquez sur la roue dentée, puis cliquez sur Outils de développement F12.
Les outils s'ouvrent dans la même fenêtre (en bas) :
Vous pouvez détacher les outils dans une autre fenêtre pour des raisons pratiques en cliquant sur le bouton Détacher.
En regardant la fenêtre des outils de développement, vous pouvez constater qu'il y a 8 boutons (à gauche). Nous allons voir quelles sont leurs utilités.
Explorateur DOM (CTRL+1)
Accessible en cliquant sur le premier bouton, l'explorateur DOM montre la structure de votre page Web telle qu'elle est affichée dans le navigateur.
Vous pouvez également modifier la structure HTML et CSS, de manière à changer dynamiquement en temps réel le style et le rendu de la page active, sans toucher au code source ni recharger la page !
C'est un outil que l'on utilise par conséquent généralement pour tester en live de nouveaux réglages ou tenter de diagnostiquer un problème dans le code HTML ou CSS.
Visualisation de la structure
Un bouton très intéressant est celui de la sélection d'élément (voir illustration ci-dessous). Il vous permet, en cliquant dessus, de sélectionner ensuite n'importe quel élément dans votre page web pour voir sa structure DOM correspondante :
Cliquez sur le bouton de sélection d'élément, puis cliquez ensuite sur l'élément dont vous souhaitez voir la structure DOM telle qu'affichée dans le navigateur. Pour mon exemple, je vais cliquer sur la barre de navigation de VIC :
Modification des propriétés HTML
Maintenant que nous avons accès à la structure de l'élément, déroulons sa structure, puis effectuons un clic avec le bouton droit sur l'élément. Un menu apparaît. Vous pourrez ici ajouter des attributs, supprimer l'élément ou alors faire d'autres manipulations. Le résultat de ces modifications sera appliqué en temps réel sur la page active.
Modification des propriétés CSS
A droite, vous aurez sans doute remarqué que l'ensemble des propriétés CSS appliquées à l'élément sélectionné sont affichées. Vous pouvez pour chacune d'entre-elles les décocher (annulant ainsi leur effet) ou alors les modifier, voire en rajouter. Les modifications seront là encore appliquées en temps réel, sans rafraîchissement de page.
Imaginions que je souhaite modifier la couleur de ma barre de navigation, sélectionnée depuis tout à l'heure. Je regarde la propriété CSS color, clique sur sa valeur #666. Un menu (nommé Intellisense) s'affiche et vous propose des choix, que vous pouvez respecter ou non (cela peut ne pas fonctionner si la valeur que vous saisissez n'est pas valide).
En optant pour la valeur aqua, voici l'effet sur ma barre de navigation :
La console (CTRL+2)
La Console vous permet d'avoir une vue sur le code Javascript en cours d'exécution (en utilisant l'API javascript console, par exemple console.log('test'); pour stocker la valeur 'test' en console), sur les erreurs de chargement réseau mais également sur les erreurs de propriétés CSS.
La console permet de classer les informations en trois types :
- Les erreurs
- Les avertissements (warnings)
- Les messages
Un clic sur chacun des boutons représentant les types d'informations vous permet de les filtrer.
Outil débogueur (CTRL+3)
Le Débogueur javascript vous permet d'examiner ce que fait votre code javascript et de voir où se situent les éventuelles erreurs qu'il contient. Vous pouvez alors suspendre l'exécution du code à l'aide de points d'arrêts, l'exécuter pas à pas (ligne par ligne) et observer l'état des variables en temps réel.
En cliquant sur l'icône symbolisant un dossier, vous avez accès à l'ensemble des fichiers javascripts appelés par la page active. Un clic sur celui ou ceux de votre choix vous permet de les ouvrir dans différents onglets.
- Le volet de script (à gauche) affiche la source du code HTML et Javascript de la page Web active.
- Le volet Espions (en haut à droite) contient les valeurs des variables locales à votre emplacement actuel dans le code, mais également de certaines variables de votre choix pour lesquelles vous aurez placé un espion dessus. On les appelle les variables espions.
- Le volet Pile des appels et points d'arrêt (en bas à droite) comporte les éléments suivants :
- Pile des appels : ce mode affiche le cheminement d'appels de fonction qui a mené à la fonction actuellement en cours d'exécution dans le code. Par exemple, si la fonction a() a appelé la fonction b() qui s'est arrêtée, le chemin d'accès de a() vers b() est affiché.
- Points d'arrêt : ce mode affiche une liste de points d'arrêt ou de trace que vous avez définis.
Vous avez la possibilité d'insérer un point d'arrêt. Celui-ci permettra au script de s'arrêter là où vous l'aurez décidé, vous aurez alors accès (à droite) aux différentes variables et à leurs valeurs. Pour insérer un point d'arrêt, effectuez un clic avec le bouton droit à l'endroit où vous souhaitez l'insérer, puis cliquez sur Insérer un point d'arrêt.
Lorsque vous effectuez un clic avec le bouton droit sur votre point d'arrêt, vous pouvez le personnaliser et lui attribuer une condition (qui deviendra du coup une condition d'arrêt) en cliquant sur Condition. Vous avez également la possibilité d'afficher la prochaine instruction qui sera exécutée.
La plupart des sites internet font appel maintenant à du code javascript minifié, c'est à dire débarrassé des caractères inutiles (espaces, tabulations, sauts de lignes, etc.) afin de rendre leur code plus compact et donc plus rapide à charger. Ce n'est pas du tout pratique pour déboguer :
L'outil de développement d'IE dispose d'une fonctionnalité très pratique : Pretty print. Un clic sur le bouton Pretty Print, et l'affichage de votre javascript est désormais indenté correctement :
Outil trafic réseau (CTRL+4)
L'outil Réseau permet d'afficher l'ensemble des communications réseau entre le navigateur les différents serveurs, mais également de voir dans le détail les communications effectuées en analysant les en-têtes et réponses (headers). Pour commencer l'analyse du trafic réseau, appuyez sur l'icône lecture, puis appuyez sur l'icône STOP pour arrêter la capture du trafic.
Il existe certaines icônes vous permettant d'affiner les réglages :
La troisième icône s'intitule Toujours actualiser depuis le serveur (troisième icône en partant de la gauche). Elle vous évite de faire appel au cache disque du navigateur.
La sixième icône s'intitule Supprimer les entrées en naviguant et permet de supprimer les enregistrements lorsque vous rechargez ou changez de page.
Détails des requêtes HTTP
Pour accéder aux détails des headers (en-têtes et réponses), sélectionnez dans la liste la requête dont vous souhaitez afficher les détails, puis cliquez sur l'onglet Détails. En premier s'affichent les en-têtes de demande, c'est à dire la manière dont votre navigateur a demandé les informations au serveur :
Pour voir comment le serveur a répondu à la requête, cliquez sur En-têtes de réponse, puis sur Corps de réponse pour avoir le contenu "visible" renvoyé.
L'onglet Minutage vous permet d'avoir une vue graphique détaillée du temps mis par le navigateur pour récupérer les données, du temps nécessaire pour générer le DOM, et du temps nécessaire pour afficher le document. C'est un indicateur précieux pour déterminer le goulot d'étranglement si votre site est lent.
La ligne DOMLoadedContent vous indique quand l'arbre DOM a été généré. Si ce temps vous paraît trop élevé et que votre ordinateur n'est pas énormément vieux, il est temps de vous pencher sur la diminution de la profondeur de l'arbre DOM et sur la réduction de la quantité de code HTML.
La ligne load affiche quant à elle le temps qu'il a fallu pour générer complètement la page (affichage compris).
Réactivité et ressenti interface utilisateur
L'outil Réactivité d'interface utilisateur vous aide à observer ce qui se produit quand le rendu de votre page est lent ou saccadé. Vous pourrez alors afficher les endroits où la page est plus lente et savoir ce qui prend le plus de temps.
Cliquez sur le bouton Lecture jusqu'à ce que vous souhaitiez arrêter l'analyse, cliquez alors sur STOP puis visualisez la barre de débit visuel (en images/seconde) :
En sélectionnant sur la barre de débit visuel les endroits où celui-ci diminue, vous pouvez apercevoir en un instant les goulots d'étranglements et en consulter les détails :
Profileur
Non, ce n'est pas une série à la mode ! L'outil de profiling dit profileur vous permet outil de mesurer la vitesse d'exécution des différentes fonctions du code Javascript composant votre site, le nombre de fois que ces fonctions ont été appelées. Pour démarrer l'outil de profiling js, cliquez sur l'icône lecture, puis sur stop lorsque vous souhaitez arrêter l'acquisition.
Pour effectuer un profiling précis, utilisez dans votre code javascript les lignes suivantes : console.profile() et console.profileEnd() qui permettent respectivement de démarrer et d'arrêter le profileur.
