Écrire et déboguer votre code pour gagner en performance

Internet Explorer 10 propose un ensemble riche d’API conçues pour accroître les performances de votre page Web. Vous bénéficiez également d’un environnement de débogage intégré et puissant grâce aux outils de développement F12.

Dans cette section

RubriqueDescription

Utiliser les outils de développement F12 pour déboguer vos pages Web

Les outils de développement F12 sont une série d’outils à la demande intégrés à chaque installation depuis Windows Internet Explorer 9. Ces outils sont disponibles à tout moment, quelle que soit la page, et permettent aux développeurs de sites Web de déboguer rapidement du code JavaScript, HTML et des feuilles de style en cascade (CSS), et d’identifier les problèmes de performance sur une page Web ou un réseau.

 

Introduction

Souvent, la qualité d’une page Web se définit par son aptitude à remplir la mission pour laquelle elle est conçue.  HTML5 et Windows Internet Explorer comporte des fonctionnalités capables de garantir un fonctionnement optimal de vos pages. Pour un utilisateur, la performance se juge à l’interface utilisateur. De nouvelles fonctionnalités, telles que les threads de travail Web, la méthode requestAnimationFrame, la visibilité de la page et la méthode setImmediate peuvent contribuer à améliorer les performances à l’écran en offrant au développeur un contrôle accru sur le lieu et le moment d’exécution du code.

Le débogage de code est une activité fréquente pour tous les développeurs. Tandis que les pages Web font appel à une multitude de scripts et de bibliothèques et se font plus complexes, la tâche visant à rechercher des bogues et améliorer les performances devient elle aussi plus ardue.  Les outils de développement F12 vous permettent de corriger des bogues depuis votre navigateur à mesure que vous observez et parcourez votre code HTML, CSS et JavaScript.

Améliorez les performances de votre page

Les articles qui suivent peuvent vous être utiles si vous utilisez les nouvelles API et fonctionnalités de performance pour la première fois. Ces articles vous apprendront à vous servir des threads de travail Web pour exécuter des tâches fastidieuses en arrière-plan, exécuter des scripts de manière asynchrone pour débloquer une interface utilisateur figée et mettre localement en cache des ressources.

Nouvelles API de performance et de synchronisation Internet Explorer 10 et les applications du Windows Store prennent en charge plusieurs API qui permettent une utilisation plus efficace du matériel informatique, améliorant la gestion des performances et de l’alimentation des sites Web. Ces dernières comprennent notamment le chronométrage de la navigation, la synchronisation de ressource, la visibilité de la page, le minutage d’animation et le rapport de script efficace.
Threads de travail Web L’API de thread de travail Web permet aux auteurs d’applications Web de générer des scripts en arrière-plan qui s’exécutent parallèlement à la page principale.
Exécution asynchrone de script L’attribut async de l’élément script facilite le chargement et l’exécution asynchrone du script associé par rapport au reste de la page.
API du cache d’application (« AppCache ») AppCache enregistre les ressources localement. Le recours à AppCache permet d’améliorer les performances d’une page Web en limitant le nombre de demandes envoyées au serveur d’hébergement, et en activant aussi l’accès hors connexion aux ressources en cache.

 

Débogage au moyen des outils de développement F12

Après avoir créé vos pages Web, servez-vous des outils de développement F12 pour rechercher et corriger des bogues et des goulets d’étranglement, ou bien nettoyer votre interface utilisateur. Les outils disposent des points d’arrêt, des variables espions (watch) et du code pas à pas généralement employés dans un environnement de développement intégré (IDE) moderne. La règle et le sélecteur de couleurs peuvent vous aider à concevoir une interface utilisateur plus attrayante. Grâce aux fonctionnalités de capture  Profileur et Réseau, vous pouvez identifier des goulets d’étranglement dans votre code et votre réseau et garantir les meilleures performances à vos utilisateurs.

Navigation dans l’interface des outils de développement F12 Il s’agit d’une référence rapide aux outils, commandes et menus disponibles dans les outils F12, intégrés à Internet Explorer 10.
Présentation des outils de développement F12 Cet article vous met sur les rails en vous présentant d’abord les fonctionnalités les plus courantes des outils de développement F12.
Utilisation de la console Outils F12 pour afficher les erreurs et le statut La console Outils F12 vous permet de recevoir des messages d’erreur de Windows Internet Explorer 9 et de renvoyer vos propres messages depuis votre code sans interrompre le fil de votre processus d’exécution.
Utilisation des outils de développement F12 pour déboguer les erreurs JavaScript Les outils de développement F12 contient des outils de débogage (points d’arrêt, affichage des variables espions (watch) et locales, etc.), ainsi qu’une console conçue pour les messages et l’exécution immédiate du code.
Utilisation de l’outil Profileur pour analyser les performances de votre code Cette rubrique présente les fonctionnalités de l’outil Profileur et explique comment les utiliser pour contrôler les performances de vos scripts.
Utilisation de la fonction Capture du réseau des outils de développement Internet Explorer L’onglet Réseau dans les outils de développement Internet Explorer 9 peut vous aider à diagnostiquer des problèmes de réseau en affichant l’ensemble du trafic lié à une page, ainsi que les détails des connexions individuelles

 

Démonstrations et articles

Voici une liste de démonstrations et articles supplémentaires qui vous seront réellement utiles pour améliorer les performances de vos pages et le débogage.

Présentation des threads de travail Web HTML5 : approche multithreading de JavaScriptDécouvrez en profondeur les threads de travail Web grâce à de nombreux exemples de code et débats techniques.
Démonstration de tests (test262) avec les threads de travail WebCette démonstration lance une série de tests fonctionnels JavaScript. Ces tests sont réalisés à la fois dans le thread d’interface utilisateur et en arrière-plan par le biais des threads de travail Web pour présenter les performances relatives de chaque approche.
Développement d’initiatives hors connexion grâce aux technologies HTML5 AppCache et IndexedDBApprenez à créer à des sites et des applications hors connexion irréprochables en vous servant de la technologie AppCache pour stocker des ressources de fichiers, la technologie IndexedDB pour stocker localement des données structurées, le stockage DOM (Document Object Model) pour stocker en local des petites quantités d’informations texte et des événements hors connexion pour déterminer si vous êtes connecté au réseau.
Débogage des threads de travail Web dans Internet Explorer 10Découvrez comment exploiter les outils de développement F12 dans Internet Explorer 10 pour bénéficier d’une expérience de débogage complète et prévisible de votre code JavaScript et l’exécuter à la fois dans la page Web et dans les threads de travail Web.
Nouvelles API de performance WebProfitez au maximum de votre matériel sous-jacent et optimisez de manière plus efficace la consommation de batterie grâce à la méthode requestAnimationFrame, la visibilité de la page et la méthode setImmediate.
Déboguer votre site plus rapidement avec le mode strict ECMAScriptL’activation du mode strict ECMAScript vous permet de mettre en œuvre les meilleures pratiques de développement JavaScript dans votre code et simplifier ainsi le débogage.

 

 

 

Afficher:
© 2014 Microsoft