Introduction
Google Chrome est un navigateur Web puissant et riche en fonctionnalités pionniers dans le domaine des applications sur le Web. Google s'est efforcé d'offrir une expérience de navigation très rapide, très stable et riche en fonctionnalités aux utilisateurs finaux. Google a également veillé à ce que les développeurs comme vous bénéficient d'une expérience optimale avec Chrome. Les outils pour les développeurs, disponibles dans Chrome et Safari, permettent aux développeurs et programmeurs Web d'accéder aux options les plus avancées du navigateur et de leur application Web.
Les outils pour les développeurs font partie du projet Webkit Open Source. La majeure partie de la discussion dans cet article concerne à la fois Google Chrome et Safari. Toutefois, comme les captures d'écran ont été effectuées avec Google Chrome 6, il peut y avoir de légères différences 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 public cible est constitué de développeurs Web qui ne connaissaient pas ces outils ou qui n'ont pas encore étudié de tels outils. Cependant, nous vous garantissons un ou deux pourboires, même si vous êtes un développeur Web expérimenté.
Si votre instance des outils pour les développeurs ne correspond pas tout à fait aux captures d'écran présentées dans cet article, nous vous recommandons de passer à la version 5. Vous pourrez ainsi suivre et accéder à toutes les fonctionnalités décrites ici.
Présentation
Au total, huit groupes principaux d'outils sont disponibles dans la section "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 Elements vous permet d'afficher la page Web de la même manière que le navigateur. En d'autres termes, à l'aide de l'outil "Elements", vous pouvez afficher le code HTML brut, les styles CSS bruts et le modèle Document Object Model, et manipuler ces deux éléments 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 demandes 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 réduire le temps de chargement des pages.
Scripts
Pour appairer le code JavaScript d'une page, vous utiliserez l'outil Scripts. Vous trouverez ici une 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
Pour une analyse avancée de la durée et de la vitesse, l'outil Vos trajets offre une visibilité complète sur les différentes activités de Chrome en arrière-plan. Vous pouvez connaître 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 le point exact à optimiser.
Stockage
Les applications Web modernes nécessitent plus de persistance que de 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, dans un stockage local, un stockage de session et des cookies.
Auditer
L'outil d'audit, c'est comme si vous aviez votre propre consultant en optimisation Web à vos côtés. Cet outil analyse le chargement d'une page et fournit des suggestions et des optimisations pour réduire le temps de chargement de la page et augmenter la réactivité perçue (et réelle).
Console
Dernier point, et non des moindres, les outils pour les développeurs offrent une console complète. Depuis la console, vous pouvez saisir du code JavaScript arbitraire et interagir avec votre page par programmation.
Démarrage en cours
Vous pouvez facilement lancer les outils pour les développeurs dans Chrome.
Quel que soit le système d'exploitation, il vous suffit de cliquer avec le bouton droit de la souris sur un élément de la page et de sélectionner l'option "Inspecter l'élément" dans le menu contextuel. Cela ouvrira les outils pour les développeurs et explorera directement l'élément sur lequel vous avez cliqué.
Pour voir comment cela fonctionne, 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. Ils doivent se présenter comme suit:
Notez que les outils pour les développeurs se sont ouverts dans l'onglet "Elements" et ont automatiquement réduit la taille de la balise <img> du logo Google et mis en évidence. Ceci est très utile lorsque vous souhaitez savoir quel code HTML a généré un élément particulier de la page.
Vous pouvez également ouvrir les outils pour les développeurs à l'aide d'un simple raccourci clavier. Selon le système d'exploitation que vous utilisez, 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 à partir du menu principal du navigateur.
Sur un Mac, dans la barre de menus principale de l'application, sélectionnez "Affichage", "Développeur", "Outils de développement".
Sur un PC Windows, utilisez le menu "Page" en haut à droite, puis sélectionnez "Développeur", "Outils de développement".
Maintenant que les outils pour les développeurs sont ouverts et prêts, commençons par examiner les éléments de la page d'accueil de Google.
Éléments
Le premier onglet des outils pour les développeurs s'intitule "Éléments". Il s'agit de votre fenêtre dans la structure de la page Web, telle que votre navigateur la voit.
Navigation DOM
Vous consultez souvent les onglets "Éléments" lorsque vous avez besoin d'identifier l'extrait de code HTML d'un aspect de la page. Par exemple, vous pouvez être curieux de savoir si une image possède un attribut d'ID HTML et quelle est la valeur de cet attribut.
L'onglet "Éléments" est parfois un meilleur moyen d'afficher le code source d'une page. Dans l'onglet "Éléments", le DOM de la page sera bien mis en forme et vous présentera facilement les éléments HTML, leur ascendance et leurs descendants. Trop souvent, les pages que vous consultez comportent du code HTML réduit ou tout simplement peu plaisant, ce qui rend difficile la compréhension de la structure de la page. L'onglet "Éléments" vous permet de visualiser la structure sous-jacente réelle de la page.
Par exemple, voici le résultat de l'option "Afficher le code source" de la page d'accueil Google.
Il est difficile de lire la source ci-dessus, car elle est optimisée et réduite. Ce format convient aux clients et aux serveurs, mais difficile pour les développeurs.
Au lieu de cela, lorsque vous souhaitez lire la source d'une page, utilisez l'onglet Éléments pour afficher une hiérarchie d'éléments avec mise en surbrillance de la syntaxe et assez imprimée.
L'onglet "Éléments" vous permet également de parcourir, d'interagir et 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.
Navigation dans les styles
La nature en cascade du code CSS rend le navigateur de styles de l'onglet "Elements" très utile. Parfois, les styles se réduisent à eux-mêmes et des éléments visuels inattendus apparaissent. Connaître la règle de style que le navigateur applique à l'élément vous aidera à 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.
Comme vous pouvez le voir dans la capture d'écran ci-dessus, nous sommes en mesure d'identifier 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>. Cependant, la largeur et la hauteur proviennent de leurs attributs natifs respectifs. Fait intéressant, vous pouvez constater que des styles sont également hérités des balises <center>, <body>, etc.
Bien qu'il soit pratique de voir les styles individuels et leur origine, il est également très utile de voir l'ensemble final de styles après avoir été calculé et appliqué à l'élément. Pour voir le produit final, sélectionnez le menu "Computed Style" (Style calculé), comme illustré dans la capture d'écran ci-dessous.
Examinons maintenant rapidement les autres fonctionnalités proposées par l'onglet "Éléments". Nous aborderons les points suivants plus en détail dans de prochains articles.
Modèle de boîte
Vous pouvez voir le modèle de boîte 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, telles que 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 qui s'affichent à travers celui-ci via le menu "Écouteurs d'événements" :
Résumé
De nombreuses fonctionnalités sont disponibles via l'onglet "Elements" (Éléments). Nous aborderons ces menus plus en détail par la suite.
Utilisez l'onglet "Éléments" pour voir à quoi ressemble la page dans le navigateur lui-même. L'onglet "Éléments" permet de résoudre rapidement et facilement les 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 "Éléments" comme un "uber-"afficher la source" et bénéficiez d'une visibilité très précise sur votre page.
Après avoir examiné la page, vous vous demandez peut-être comment le HTML, le 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 vous efforcer de faire en sorte que le transfert de votre application, d'un serveur à l'autre, soit aussi rapide et efficace que possible. Vos utilisateurs vous en seront reconnaissants pour la rapidité de chargement des pages, vous réaliserez des économies en termes de bande passante et de ressources serveur, et vous obtiendrez de meilleurs résultats dans les résultats de recherche Google (qui tiennent désormais compte de la vitesse du site).
L'onglet "Ressources" des outils de développement est une 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.
L'exécution de l'onglet "Ressources" affecte les performances de chargement des pages. Cet onglet 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.
Je vous recommande de laisser l'option par défaut "Activer uniquement pour cette session" sélectionnée par défaut, car vous ne souhaitez pas encourir inutilement une légère perte de performances. Lorsque vous cliquez sur "Activer le suivi des ressources", la page s'actualise, et les outils de développement 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 prenons-les élément par élément.
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 requêtes individuelles sont effectuées par le client. Un nombre élevé de requêtes provenant du client peut avoir un impact important sur les performances. La première étape de l'optimisation et de la réduction éventuelle des ressources consiste à gagner en visibilité sur les informations demandées.
Si vous êtes uniquement intéressé par les images ou les feuilles de style, vous pouvez filtrer le type de ressource à l'aide du menu directement sous la fenêtre principale de l'onglet.
Vous découvrirez également l'ordre dans lequel les ressources sont demandées. Grâce à l'affichage chronologique, vous pouvez 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 manière dont elles composent la chronologie des requêtes dans son ensemble, vous pouvez afficher le détail de chaque ressource.
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 la ressource 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 n'a jamais été modifiée, votre serveur doit définir un en-tête Expiration pour des dates ultérieures. Cela indiquera au navigateur que la ressource ne doit plus être demandée avant cette date. Cela permet de réduire le nombre de connexions HTTP requises pour votre page, et ainsi d'accélérer le chargement de votre site.
Résumé
L'onglet "Ressources" offre bien d'autres fonctionnalités, dont nous parlerons dans un prochain article.
Utilisez l'onglet Ressources pour voir comment votre navigateur client communique avec le serveur Web. Grâce à ces informations, y compris la durée, la taille et l'ordre des requêtes, vous pouvez procéder à des optimisations intelligentes afin de réduire la charge et les coûts du serveur, 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 vous avez réduit le nombre et la taille des ressources, et que les conversations HTTP appropriées ont commencé, vous devez examiner et optimiser les scripts exécutés sur votre page. Heureusement, c'est exactement ce que fait l'onglet Scripts, dont nous allons parler ensuite.
Autres ressources
Pour en savoir plus sur les outils pour les développeurs, nous vous recommandons de consulter les ressources suivantes:
- Vidéo de présentation des outils pour les développeurs Chrome et diapositives de la conférence Google I/O 2010
- Tutoriel sur les outils pour les développeurs Chrome
Bien sûr, consultez régulièrement le site html5rocks.com pour découvrir la deuxième partie de cet article, ainsi que de nombreux autres contenus intéressants sur HTML5 et Chrome.