Introduction
Google Chrome est un navigateur Web riche et puissant qui repousse les limites des applications sur le Web. Google s'est efforcé de proposer une expérience de navigation très rapide, très stable et riche en fonctionnalités aux utilisateurs finaux. Google s'est également assuré que les développeurs comme vous profitaient d'une expérience optimale 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 aux options les plus avancées du navigateur et de leur application Web.
Les outils pour les développeurs font partie du projet Open Source Webkit. La majeure partie de cet article s'applique à la fois à Google Chrome et à Safari. Toutefois, les captures d'écran ont été effectuées avec Google Chrome 6. Il est donc possible que votre navigateur présente de légères différences.
Dans cet article, nous allons vous présenter les outils pour les développeurs et vous indiquer les 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 qui ne les ont pas encore explorés. Toutefois, même si vous êtes un développeur Web expérimenté, vous trouverez peut-être quelques conseils utiles.
Si votre instance des outils pour les développeurs ne correspond pas tout à fait aux captures d'écran de cet article, nous vous recommandons de passer à la version 5 afin de pouvoir suivre les instructions et accéder à toutes les fonctionnalités décrites ici.
Présentation
Au total, huit groupes d'outils principaux sont disponibles dans les outils pour les développeurs. Les fonctionnalités sont étendues à chaque version. Chrome 5 propose désormais les éléments, les ressources, les scripts, Vos trajets, les profils, l'espace de stockage, les audits et la console.
Éléments
L'outil "Éléments" vous permet de voir la page Web telle qu'elle apparaît dans le navigateur. Autrement dit, avec l'outil "Éléments", vous pouvez afficher le code HTML brut, les styles CSS bruts et le Document Object Model, et les manipuler en temps réel.
Ressources
Utilisez l'outil "Ressources" pour savoir quels composants 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 vous aider à accélérer le temps de chargement des pages.
Scripts
Pour examiner le code JavaScript d'une page, vous utiliserez l'outil "Scripts". Vous y trouverez la liste des scripts requis par la page, ainsi qu'un débogueur de script complet. Vous pouvez même modifier le code JavaScript à la volée.
Chronologie
Pour une analyse avancée des délais et des vitesses, l'outil "Chronologie" offre une visibilité détaillée sur les différentes activités en coulisse de Chrome. Vous pouvez connaître le temps nécessaire au navigateur pour gérer les événements DOM, afficher les mises en page des pages et peindre la fenêtre.
Profils
L'outil "Profiles" (Profils) vous aide à capturer et à analyser les performances des scripts JavaScript. Par exemple, vous pouvez identifier les fonctions dont l'exécution prend le plus de temps et déterminer précisément où optimiser.
Stockage
Les applications Web modernes nécessitent une persistance plus importante que les cookies. L'outil Storage vous aide à suivre, interroger et déboguer l'espace de stockage local du navigateur. Cet outil peut afficher et interroger les données stockées dans des bases de données locales, du stockage local, du stockage par session et des cookies.
Audit
L'outil d'audit est comme si vous aviez votre propre consultant en optimisation Web à vos côtés. Cet outil peut analyser le chargement d'une page. Vous y trouverez également des suggestions et des optimisations destinées à réduire le temps de chargement de la page, un paramètre susceptible d'altérer la réactivité perçue ou réelle.
Console
Enfin, les outils pour les développeurs proposent une console complète. Dans la console, vous pouvez saisir du code JavaScript arbitraire et interagir de manière programmatique avec votre page.
Démarrage
Il est facile de lancer les outils pour les développeurs dans Chrome.
Pour n'importe quel système d'exploitation, il vous suffit de cliquer avec le bouton droit sur un élément de la page, puis de sélectionner l'option "Inspecter l'élément" dans le menu contextuel. Les outils pour les développeurs s'ouvrent et vous pouvez accéder 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. Les options suivantes s'affichent:
Sélectionnez "Inspecter l'élément" pour afficher les outils pour les développeurs, qui devraient ressembler à ceci:
Notez que les outils pour les développeurs s'ouvrent dans l'onglet "Éléments", et qu'ils ont automatiquement accédé à la balise <img> du logo Google et l'ont mise en surbrillance. Cette fonctionnalité est très utile lorsque vous souhaitez savoir quel code HTML a généré un élément de page spécifique.
Vous pouvez également ouvrir les outils pour les développeurs à l'aide d'un simple raccourci clavier. Selon votre système d'exploitation, essayez les solutions suivantes:
- Sous Windows et Linux, sélectionnez les touches
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 menu principale de l'application, sélectionnez "Affichage", "Développeur", "Outils de développement".
Sur un PC Windows, accédez au menu "Page" en haut à droite, puis sélectionnez "Développeur", "Outils pour les développeurs".
Maintenant que les outils pour les développeurs sont ouverts et prêts, commençons par explorer les éléments de la page d'accueil de Google.
Éléments
Le premier onglet des outils pour les développeurs est "Éléments". Il s'agit d'une fenêtre sur la structure de la page Web, présentée comme votre navigateur la voit.
Navigation DOM
Vous allez souvent consulter les onglets "Éléments" lorsque vous devez identifier l'extrait HTML d'un aspect de la page. Par exemple, vous pouvez vouloir savoir si une image possède un attribut HTML d'identifiant et quelle est sa valeur.
L'onglet "Éléments" est parfois un meilleur moyen d'afficher la source d'une page. Dans l'onglet "Éléments", le DOM de la page est bien mis en forme et affiche facilement les éléments HTML, leur ascendance et leurs descendants. Trop souvent, les pages que vous consultez comportent du code HTML minifié ou simplement laid, ce qui rend difficile la compréhension de leur structure. L'onglet "Éléments" vous permet d'afficher la structure sous-jacente réelle de la page.
Par exemple, voici la sortie de l'option "Afficher la source" de la page d'accueil de Google.
La source ci-dessus est difficile à lire, car elle est optimisée et minifiée. Ce format est adapté aux clients et aux serveurs, mais difficile pour les développeurs.
Lorsque vous souhaitez lire la source d'une page, utilisez plutôt l'onglet "Éléments" pour afficher une hiérarchie d'éléments mise en forme et mise en surbrillance syntaxiquement.
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 CSS rend le navigateur de styles de l'onglet "Éléments" très utile. Il arrive parfois que des styles se replient sur eux-mêmes et que des visuels involontaires apparaissent. Savoir quelle règle de style le navigateur applique à l'élément vous aide à déboguer un tel problème.
Cliquez sur un élément de l'onglet "Éléments" pour afficher tous les styles qui lui sont associés.
Dans la capture d'écran ci-dessus, vous pouvez voir 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>. La largeur et la hauteur, en revanche, proviennent de leurs attributs natifs respectifs. Fait intéressant, vous pouvez constater que des styles sont également hérités de la balise <center>, de la balise <body> et d'autres.
Il est certes intéressant de voir les styles individuels et leur origine, mais il est également très utile de voir l'ensemble final de styles une fois qu'il a été calculé et appliqué à l'élément. Pour voir le produit final, sélectionnez le menu "Style calculé", comme illustré dans la capture d'écran ci-dessous.
Nous allons maintenant examiner brièvement les autres fonctionnalités de l'onglet "Éléments". Nous aborderons les points suivants plus en détail dans de prochains articles.
Modèle Box
Pour voir le modèle de boîte tel qu'il est appliqué à l'élément sélectionné, sélectionnez 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 les verraient, 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 le traversent via le menu "Écouteurs d'événements" :
Résumé
De nombreuses fonctionnalités sont disponibles dans l'onglet "Éléments". De futurs articles vous présenteront plus en détail les menus individuels.
Utilisez l'onglet "Éléments" lorsque vous souhaitez voir à quoi ressemble la page pour le navigateur lui-même. Les problèmes courants tels que "Comment ce style est-il calculé ?" ou "Quelles balises HTML ont généré ce composant ?" sont rapidement et facilement résolus via l'onglet "Éléments".
Considérez l'onglet "Éléments" comme une version améliorée de la fonctionnalité "Afficher la source". Vous obtiendrez ainsi une visibilité très précise sur votre page.
Après avoir examiné la page, vous vous demandez peut-être comment le code HTML, le CSS et les images y sont arrivés. L'onglet "Ressources", décrit ci-dessous, montre comment le navigateur client et le serveur Web communiquent pour envoyer ces ressources.
Ressources
Une fois votre application opérationnelle, vous devez optimiser les performances du réseau et de la bande passante. Vous devez vous efforcer de rendre le transfert de votre application, du serveur au client, aussi rapide et efficace que possible. Vos utilisateurs vous remercieront pour la rapidité de chargement des pages, vous économiserez de l'argent en termes de bande passante et de ressources serveur, et vous améliorerez votre classement dans les résultats de recherche de Google (qui prennent désormais en compte la vitesse du site).
L'onglet "Ressources" des outils pour les développeurs vous permet de voir la communication entre le serveur Web et le navigateur client. Vous pouvez voir toutes les ressources demandées par le navigateur (c'est toujours très surprenant !), le temps qu'il faut pour les recevoir du serveur et la quantité de bande passante utilisée lors du transfert.
Ironiquement, l'exécution de l'onglet "Ressources" a un impact sur les performances de chargement de la page. Il est donc désactivé par défaut. La première fois que vous accédez à cette fonctionnalité, vous devez l'activer pour la page que vous consultez.
Nous vous recommandons de laisser la valeur par défaut "Activer uniquement pour cette session" sélectionnée, car vous ne souhaitez pas subir inutilement une légère pénalité 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 par le serveur.
La capture d'écran suivante montre les ressources requises et chargées pour la page d'accueil de Google.
Cet écran contient beaucoup d'informations. Nous allons donc les examiner une par une.
Par défaut, le comportement est de vous indiquer le temps nécessaire pour demander et charger toutes les ressources de la page. Le défilement de 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 grand nombre de requêtes 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 à identifier précisément ce qui est demandé.
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 la fenêtre de l'onglet principal.
Vous découvrirez également l'ordre dans lequel les ressources sont demandées. L'affichage de la chronologie peut vous aider à comprendre pourquoi certains éléments de votre page apparaissent plus tard que d'autres.
Après avoir obtenu une vue d'ensemble de toutes les ressources demandées et de la façon dont elles composent l'ensemble de la chronologie des requêtes, vous devez examiner les 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. Pour afficher tous les en-têtes d'une ressource, cliquez dessus dans la liste de gauche.
Utilisez l'affichage des en-têtes pour vous assurer 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 Expires pour une date très éloignée. Cela indique au navigateur que la ressource ne doit pas être demandée à nouveau avant cette date. Cela réduit le nombre de connexions HTTP requises pour votre page, ce qui accélère votre site.
Résumé
L'onglet "Ressources" comporte de nombreuses autres fonctionnalités que nous aborderons dans un prochain article.
L'onglet "Ressources" vous permet de voir comment votre navigateur client communique avec le serveur Web. Grâce à ces informations, y compris l'heure, la taille et l'ordre des requêtes, vous pouvez effectuer des optimisations intelligentes pour réduire la charge et les coûts du serveur, et améliorer la vitesse et 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 lieu, l'étape suivante consiste à examiner et à optimiser les scripts exécutés sur votre page. Heureusement, l'onglet "Scripts", que nous allons voir ensuite, permet de le faire.
Autres ressources
Pour en savoir plus sur les outils pour les développeurs, nous vous recommandons de consulter les ressources suivantes:
- Vidéo et diapositives de la présentation des outils pour les développeurs Chrome lors de Google I/O 2010
- Tutoriel sur les outils pour les développeurs Chrome
Et bien sûr, restez connecté à html5rocks.com pour la deuxième partie de cet article, ainsi que pour de nombreux autres contenus de qualité sur HTML5 et Chrome.