Introduction
Google Chrome est un navigateur Web riche et puissant, pionnier de ce qui est possible pour les applications sur le Web. Google s'efforce d'offrir aux utilisateurs finaux une expérience de navigation très rapide, stable et riche en fonctionnalités. Google s'est également assuré que les développeurs comme vous bénéficient d'une excellente expérience avec Chrome. Les outils pour les développeurs, regroupés et disponibles dans Chrome et Safari, permettent aux développeurs et aux programmeurs Web d'accéder de manière approfondie aux mécanismes internes du navigateur et de leur application Web.
Les outils de développement font partie du projet Open Source Webkit. La plupart des points abordés dans cet article s'appliquent à Google Chrome et Safari. Toutefois, les captures d'écran ayant été effectuées avec Google Chrome 6, de légères différences peuvent apparaître dans votre navigateur.
Dans cet article, nous allons vous présenter les outils pour les développeurs et vous présenter leurs fonctionnalités les plus populaires et les plus utiles. Notre audience cible est constituée de développeurs Web qui ne connaissaient pas les outils pour les développeurs ou ne s'y sont pas encore renseignés. Cependant, même si vous êtes un développeur Web expérimenté, vous recevrez un ou deux conseils.
Si votre instance des Outils pour les développeurs ne correspond pas aux captures d'écran présentées dans cet article, nous vous recommandons de passer à la version 5. Vous pourrez ainsi accéder à toutes les fonctionnalités décrites ici.
Présentation
Au total, il existe huit groupes principaux d'outils disponibles dans la vue "Outils pour les développeurs", et les fonctionnalités sont étendues à chaque version. Chrome 5 propose désormais les éléments, les ressources, les scripts, la chronologie, les profils, le stockage, les audits et la console.
Éléments
L'outil Éléments vous permet de visualiser la page Web de la même manière que le navigateur. En d'autres termes, avec l'outil "Elements", vous pouvez afficher le code HTML brut, les styles CSS bruts et le modèle objet de document, et manipuler l'un ou l'autre en temps réel.
Ressources
Utilisez l'outil Ressources pour connaître les composants que votre page Web ou votre application demande aux serveurs Web, la durée de ces requêtes et la quantité de bande passante requise. Vous pouvez également afficher les en-têtes de requête et de réponse HTTP pour chacune de vos ressources. L'outil "Ressources" est idéal pour accélérer le temps de chargement des pages.
Scripts
Pour appairer une page au sein du code JavaScript, utilisez l'outil Scripts. Vous y trouverez la liste des scripts requis par la page, ainsi qu'un débogueur de scripts complet. Vous pouvez même modifier le code JavaScript à la volée !
Chronologie
L'outil Chronologie permet de bénéficier d'une analyse avancée du temps et de la vitesse des différentes activités en coulisses de Chrome. Vous pouvez déterminer le temps nécessaire au navigateur pour gérer les événements DOM, afficher les mises en page et peindre la fenêtre.
Profils
L'outil Profils vous permet de capturer et d'analyser les performances des scripts JavaScript. Par exemple, vous pouvez identifier les fonctions dont l'exécution prend le plus de temps et vous concentrer sur l'emplacement exact de l'optimisation.
Stockage
Les applications Web modernes exigent plus de persistance que les simples cookies, et l'outil Storage vous aide à suivre, interroger et déboguer le stockage local du navigateur. Cet outil peut afficher et interroger des données stockées dans des bases de données locales, des espaces de stockage locaux, des stockages de session et des cookies.
Audit
Avec l'outil d'audit, c'est comme si vous disposiez de votre propre consultant en optimisation Web à côté de vous. Cet outil peut analyser le chargement d'une page, et fournir des suggestions et des optimisations pour réduire son temps de chargement et augmenter sa réactivité perçue (et réelle).
Console
Enfin, les outils pour les développeurs offrent une console complète. Dans la console, vous pouvez saisir du code JavaScript arbitraire et interagir de façon programmatique avec votre page.
Démarrage
Vous pouvez facilement démarrer les outils pour les développeurs dans Chrome.
Quel que soit le système d'exploitation, il vous suffit de faire un clic droit sur un élément de la page, puis de sélectionner l'option "Inspecter l'élément" dans le menu contextuel. Les outils de développement s'ouvrent et l'élément sur lequel vous avez cliqué s'affiche en détail.
Pour voir cela en pratique, accédez à http://www.google.com dans le navigateur Chrome. Effectuez un clic droit sur le logo Google pour afficher les options suivantes:
Si vous sélectionnez "Inspecter l'élément", les outils pour les développeurs s'affichent comme suit:
Notez que les outils de développement s'ouvrent dans l'onglet "Elements" et que la balise <img> du logo Google est affichée et mise en surbrillance automatiquement. Cette donnée est très utile lorsque vous souhaitez savoir quel code HTML a généré un élément de page particulier.
Vous pouvez également ouvrir les outils pour les développeurs à l'aide d'un simple raccourci clavier. Selon votre système d'exploitation, procédez comme suit:
- Sous Windows et Linux, sélectionnez les clés
Control-Shift-J. - Sur Mac, sélectionnez les touches
Command-Option-J.
Enfin, vous pouvez choisir d'ouvrir les outils dans le menu principal du navigateur.
Sur un Mac, dans la barre de menu principale de l'application, sélectionnez "Affichage", "Développeur" et "Outils de développement".
Sur un PC Windows, utilisez le menu Page en haut à droite, puis sélectionnez "Développeur", puis "Outils pour les développeurs".
Maintenant que les outils de développement sont ouverts et prêts, examinons les éléments de la page d'accueil de Google.
Éléments
Le premier onglet des outils de développement s'intitule "Elements". Il s'agit de votre fenêtre dans la structure de la page Web telle que votre navigateur la perçoit.
Navigation DOM
Vous consultez souvent l'onglet "Elements" lorsque vous avez besoin d'identifier l'extrait HTML d'un aspect de la page. Par exemple, vous pouvez être curieux de savoir si une image possède un attribut d'identifiant HTML et quelle est la valeur de cet attribut.
L'onglet "Éléments" est parfois plus adapté pour "afficher le code source" d'une page. Dans l'onglet "Elements", le DOM de la page sera correctement formaté, vous permettant de voir facilement les éléments HTML, leur ancêtre et leurs descendants. Trop souvent, les pages que vous consultez utilisent du code HTML réduit ou simplement moche, ce qui rend difficile la compréhension de la structure de la page. L'onglet "Elements" vous permet d'afficher la véritable structure sous-jacente de la page.
Par exemple, voici le résultat de la commande "Afficher la source" de la page d'accueil Google.
La source ci-dessus est difficile à lire, car elle est optimisée et réduite. Ce format est adapté aux clients et aux serveurs, mais il est difficile pour les développeurs.
Au lieu de cela, lorsque vous souhaitez lire la source d'une page, utilisez l'onglet "Elements" pour afficher une hiérarchie d'éléments mise en forme et mise en forme bien imprimée.
L'onglet "Éléments" vous permet également de parcourir, d'interagir et parfois même de modifier les styles, les métriques, les propriétés et les écouteurs d'événements de n'importe quel élément de la page.
Parcourir les styles
La nature en cascade du code CSS rend le navigateur "Styles" très utile dans l'onglet "Elements". Parfois, les styles s'affinent et des éléments visuels indésirables s'affichent. Connaître la règle de style que le navigateur applique à l'élément vous aide à résoudre ce problème.
Cliquez sur un élément de l'onglet "Éléments" pour afficher tous les styles associés à cet élément.
Dans la capture d'écran ci-dessus, vous constaterez que nous sommes en mesure de dire tous les attributs de style appliqués. Par exemple, la marge intérieure provient directement de l'attribut de style de l'élément <img>. En revanche, la largeur et la hauteur dépendent de leurs attributs natifs respectifs. Fait intéressant, on peut voir que certains styles ont également été hérités des balises <center> et <body>, entre autres.
Bien qu'il soit agréable de voir les styles individuels et leur origine, il est également très utile de voir l'ensemble final de styles après qu'il a été calculé et appliqué à l'élément. Vous pouvez voir le produit final en sélectionnant le menu "Style calculé", comme illustré dans la capture d'écran ci-dessous.
Nous allons maintenant découvrir les autres fonctionnalités fournies par l'onglet "Éléments". Nous aborderons les points suivants plus en détail dans de futurs articles.
Modèle Box
Vous pouvez voir le modèle de zone tel qu'il est appliqué à l'élément sélectionné en sélectionnant le menu "Métriques" :
Propriétés de l'élément
Vous pouvez afficher toutes les propriétés de l'élément, comme le ferait JavaScript et le DOM, en sélectionnant le menu "Propriétés" :
Écouteurs d'événements
Enfin, vous pouvez même voir les écouteurs d'événements associés à l'élément ou ceux-ci survolant l'élément via le menu "Écouteurs d'événements" :
Résumé
De nombreuses fonctionnalités sont disponibles via l'onglet "Elements", et les prochains articles approfondiront chaque menu.
Utilisez l'onglet "Elements" pour voir à quoi ressemble la page dans le navigateur. L'onglet "Éléments" permet de résoudre rapidement et facilement des problèmes courants tels que "comment ce style est-il calculé ?" ou "Quelles balises HTML ont généré ce composant ?".
Considérez l'onglet "Elements" comme un uber "afficher la source" et profitez d'une visibilité très précise de votre page.
Après avoir examiné la page, vous vous demandez peut-être comment le code HTML, CSS et les images y sont arrivés en premier lieu. L'onglet "Ressources", décrit ci-après, vous montre comment le navigateur client et le serveur Web communiquent pour envoyer ces ressources.
Ressources
Une fois que votre application fonctionne, vous devez optimiser les performances du réseau et de la bande passante. Vous devez faire en sorte que le transfert de votre application, du serveur au client, soit aussi rapide et efficace que possible. Vos utilisateurs vous seront reconnaissants de la rapidité de chargement de leurs pages, vous économiserez de l'argent sur la bande passante et les ressources du serveur, et vous améliorerez également le classement des résultats de recherche Google (qui tient désormais compte de la vitesse du site).
Dans les outils pour les développeurs, l'onglet "Ressources" est votre fenêtre sur la communication entre le serveur Web et le navigateur client. Vous pouvez voir toutes les ressources demandées par le navigateur (ce qui est toujours très surprenant !), le temps nécessaire pour les recevoir du serveur et la quantité de bande passante utilisée pendant le transfert.
Parfois, l'exécution de l'onglet "Ressources" affecte les performances de chargement des pages et est donc désactivé par défaut. Lorsque vous accédez à cette fonctionnalité pour la première fois, vous devez l'activer pour la page que vous consultez.
Nous vous recommandons de laisser l'option "Activer uniquement pour cette session" sélectionnée par défaut, afin de ne pas subir inutilement une légère perte de performances. Une fois que vous avez cliqué sur "Activer le suivi des ressources", la page s'actualise, et les outils pour les développeurs surveillent et affichent les ressources envoyées depuis le serveur.
La capture d'écran suivante montre les ressources requises et chargées pour la page d'accueil Google.
Il y a beaucoup d'informations sur cet écran, alors passons-les progressivement.
Le comportement par défaut consiste à indiquer le temps nécessaire pour demander et charger toutes les ressources de la page. Faire défiler la liste des ressources peut vous surprendre, car vous ne savez peut-être pas combien de demandes individuelles sont effectuées par le client. Un nombre élevé de demandes émanant du client peut avoir un impact important sur les performances. La première étape pour optimiser et réduire les ressources consiste à obtenir une bonne visibilité sur les éléments exacts demandés.
Si vous ne vous intéressez qu'aux images ou aux feuilles de style, vous pouvez filtrer le type de ressource à l'aide du menu situé directement sous l'onglet principal.
ainsi que l'ordre dans lequel les ressources sont demandées. L'affichage chronologique vous permet de mieux comprendre pourquoi certains éléments de votre page apparaissent plus tard que d'autres.
Une fois que vous avez obtenu un aperçu de toutes les ressources demandées et de la façon dont elles composent l'ensemble de la chronologie des requêtes, vous pouvez afficher le détail des ressources individuelles.
Si vous remarquez que certaines ressources sont demandées chaque fois que vous accédez à la page, cela signifie que vos en-têtes de mise en cache ne sont pas configurés correctement. Vous pouvez afficher tous les en-têtes d'une ressource en cliquant sur celle-ci dans la liste de gauche.
Utilisez l'affichage des en-têtes pour vérifier que le code de réponse HTTP attendu est défini et que les en-têtes appropriés sont fournis. Par exemple, si la ressource est rarement ou jamais modifiée, votre serveur doit définir un en-tête Expire pour une période à venir. Vous indiquez ainsi au navigateur que la ressource ne doit plus être demandée avant cette date. Cela réduit le nombre de connexions HTTP nécessaires pour votre page et accélère donc ce dernier.
Résumé
L'onglet "Ressources" offre bien d'autres fonctionnalités, que nous aborderons dans un prochain article.
Utilisez l'onglet "Ressources" pour savoir comment votre navigateur client communique avec le serveur Web. Grâce à ces informations, y compris la durée et l'ordre des requêtes, et leur taille, vous pouvez effectuer des optimisations intelligentes afin de réduire la charge du serveur et les coûts, d'augmenter la vitesse et d'améliorer l'expérience utilisateur.
La vitesse est très importante pour votre site Web, vos utilisateurs et les moteurs de recherche. Une fois que le nombre et la taille des ressources ont été réduits, et que les conversations HTTP appropriées ont eu lieu, l'étape suivante consiste à examiner et à optimiser les scripts qui s'exécutent sur votre page. Heureusement, c'est l'onglet "Scripts", que nous allons voir ci-après.
Autres ressources
Pour en savoir plus sur les outils pour les développeurs, nous vous recommandons de suivre ces conseils:
- Présentation vidéo et diapositives des outils pour les développeurs Chrome lors de la conférence Google I/O 2010
- Tutoriel sur les outils pour les développeurs Chrome
Et bien sûr, consultez régulièrement la page html5rocks.com pour découvrir la deuxième partie de cet article, qui contient de nombreux autres contenus intéressants en HTML5 et Chrome.