Chrome DevTools Revolutions 2013

Introduction

La complexité et les fonctionnalités des applications Web ont augmenté, tout comme les outils pour les développeurs Chrome. Dans ce récapitulatif de la conférence Google I/O 2013 de Paul Irish, Chrome DevTools Revolutions 2013, vous découvrirez les dernières fonctionnalités qui révolutionnent la création et le test d'applications Web.

Si vous avez manqué l'intervention de Paul, vous pouvez la visionner ci-dessus (nous attendons) ou vous pouvez passer directement au résumé des fonctionnalités:

• Les espaces de travail vous permettent d'utiliser les outils de développement comme éditeur de code source.
• Si vous utilisez Sass, vous apprécierez la possibilité de modifier en direct des fichiers Sass (.scss) dans les Outils de développement. Vos modifications seront immédiatement répercutées sur la page.
• Le débogage à distance des pages dans Chrome pour Android est possible depuis un certain temps, mais l'extension ADB simplifie la connexion aux appareils Android. Le transfert de port inversé vous permet de vous connecter facilement à localhost sur votre ordinateur de développement depuis votre appareil.
• Les performances sont toujours une préoccupation dans les applications Web, et les outils de développement disposent d'un certain nombre de nouvelles fonctionnalités pour vous aider à repérer les goulots d'étranglement, y compris la nouvelle visualisation du graphique de flammes pour le profilage du processeur et plusieurs nouveaux outils de débogage des problèmes de performances liés à l'affichage et à l'utilisation de la mémoire.

Ces fonctionnalités sont disponibles dans Chrome 28, désormais disponibles en version de mise à jour stable.

Espaces de travail

Les espaces de travail vous permettent de mapper des ressources diffusées à partir d'un serveur Web local avec des fichiers sur disque. Vous pouvez ainsi modifier n'importe quel type de fichier source dans le panneau "Sources" et conserver ces modifications sur le disque. De même, les modifications que vous apportez dans votre éditeur externe apparaissent immédiatement dans le panneau "Sources".

La capture d'écran ci-dessous illustre un exemple d'espaces de travail en action. Le site Agenda a été chargé sur localhost, tandis que le panneau "Sources" affiche la vue du système de fichiers local du dossier racine du site. Les modifications apportées aux fichiers de ce dossier sont conservées sur le disque. Dans la capture d'écran ci-dessous, des modifications non enregistrées ont été apportées à Calendar.css. Un astérisque est donc placé à côté du nom du fichier.

Appuyez sur Control+S ou Command+S pour conserver les modifications sur le disque.

De même, les modifications que vous apportez aux styles d'un élément dans le panneau "Éléments" sont répercutées dans le panneau "Sources" et dans votre éditeur externe. Remarques :

• Les modifications DOM dans le panneau "Elements" ne sont pas conservées. Seules les modifications de style apportées dans le panneau "Éléments" sont conservées.
• Seuls les styles définis dans un fichier CSS externe peuvent être modifiés. Les modifications apportées à "Element.style" ou aux styles intégrés ne sont pas conservées sur le disque. Si vous utilisez des styles intégrés, vous pouvez les modifier dans le panneau "Sources".
• Les modifications de style dans le panneau "Éléments" sont conservées immédiatement. Vous n'avez pas besoin d'appuyer sur Control+S ou Command+S.

Ajouter un dossier d'espace de travail

L'utilisation des espaces de travail se fait en deux étapes: mettre le contenu d'un dossier local à la disposition des outils de développement et mapper ce dossier à une URL.

Pour ajouter un dossier d'espace de travail:

1. Dans les Outils de développement, cliquez sur Paramètres pour ouvrir les paramètres des Outils de développement.
2. Cliquez sur Espace de travail.
3. Cliquez sur Ajouter un dossier.
4. Accédez au dossier contenant les fichiers sources de votre projet, puis cliquez sur Sélectionner.
5. Lorsque vous y êtes invité, cliquez sur Allow (Autoriser) pour autoriser les Outils de développement à accéder à l'intégralité du dossier.

Le panneau "Sources" affiche le nouveau dossier de l'espace de travail ainsi que les sources chargées sur localhost. Vous pouvez désormais modifier en temps réel des fichiers dans votre dossier d'espace de travail. Ces modifications seront conservées sur le disque.

Mapper un dossier avec une URL

Une fois que vous avez ajouté un dossier d'espace de travail, vous pouvez le mapper à une URL. Chaque fois que Chrome charge l'URL spécifiée, le panneau "Sources" affiche le contenu du dossier de l'espace de travail à la place du contenu du dossier réseau.

Pour mapper un dossier d'espace de travail avec une URL:

1. Dans le panneau "Sources", effectuez un clic droit ou cliquez sur un fichier dans un dossier d'espace de travail en maintenant la touche Ctrl enfoncée.
2. Sélectionnez Mapper à une ressource réseau.

   

3. Sélectionnez la ressource réseau correspondante sur la page qui est chargée.

   

4. Actualisez la page dans Chrome.

Le panneau "Sources" devrait maintenant afficher uniquement le contenu du dossier de l'espace de travail local de votre site, et non les sources localhost, comme indiqué ci-dessous.

Il existe deux autres façons d'associer un dossier réseau à un dossier d'espace de travail:

• Effectuez un clic droit (ou cliquez en maintenant la touche Ctrl enfoncée) sur une ressource réseau, puis sélectionnez Mapper sur une ressource de système de fichiers.
• Ajoutez des mappages manuellement dans l'onglet "Espace de travail" de la boîte de dialogue "Paramètres des outils de développement".

Débogage des cartes sources Sass/CSS

Le débogage Sass (CSS Source Map) vous permet de modifier en direct des fichiers Sass (.scss) dans le panneau "Sources" et d'afficher les résultats sans avoir à quitter les outils de développement ni à actualiser la page. Lorsque vous inspectez un élément dont les styles sont fournis par un fichier CSS généré par Sass, le panneau "Elements" affiche un lien vers le fichier .scss, et non vers le fichier .css généré.

Cliquez sur le lien pour ouvrir le fichier SCSS (modifiable) dans le panneau "Sources". Vous pouvez apporter les modifications de votre choix à ce fichier.

Lorsque vous enregistrez des modifications dans un fichier SCSS (dans les Outils de développement ou ailleurs), le compilateur Sass génère à nouveau les fichiers CSS. Ensuite, les outils de développement actualisent le fichier CSS qui vient d'être généré.

Utiliser le débogage Sass

Pour utiliser le débogage Sass dans Chrome, vous devez disposer de la version préliminaire du compilateur Sass, qui est actuellement la seule version compatible avec la génération de cartes sources.

gem install sass -v '>=3.3.0alpha' --pre

Vous devez également activer la fonctionnalité de débogage Sass dans les tests des outils de développement:

1. Ouvrez about:flags dans Chrome.
2. Activez l'option Activer les tests dans les outils de développement.
3. Redémarrez Chrome.
4. Ouvrez les paramètres des outils de développement, puis cliquez sur Tests.
5. Activez la compatibilité avec Sass (ou le débogage de la feuille de style Sass, selon la version du navigateur que vous utilisez).

Une fois Sass installé, démarrez le compilateur Sass pour surveiller les modifications apportées à vos fichiers sources Sass et créer des fichiers map sources pour chaque fichier CSS généré, par exemple:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Si vous utilisez Compass, notez que Compass n'est pas encore compatible avec la version préliminaire de Sass. Vous ne pouvez donc pas utiliser le débogage Sass avec Compass.

Fonctionnement

Pour chaque fichier source SCSS qu'il traite, le compilateur Sass génère un fichier de mappage source (fichier .map) en plus du fichier CSS compilé. Le fichier de mappage source est un fichier JSON qui définit les mappages entre le fichier .scss et les fichiers .css. Chaque fichier CSS contient une annotation qui précise l'URL de son fichier de carte source, intégrée dans un commentaire spécial:

/*# sourceMappingURL=<url>; */

Prenons l'exemple du fichier SCSS suivant:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass génère un fichier CSS de ce type, avec l'annotation sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Voici un exemple de fichier de mappage source:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Simplification du débogage à distance sur Chrome pour Android

Deux nouvelles fonctionnalités des outils de développement facilitent la configuration du débogage à distance sur Chrome pour Android: l'extension ADB et le transfert de port inversé.

L'extension Chrome ADB simplifie le processus de configuration du débogage à distance. Elle offre les avantages suivants:

• Empaquette Android Debug Bridge (ADB) pour que vous n'ayez pas à l'installer.
• Aucune interaction avec la ligne de commande n'est requise.
• UI permettant de démarrer et d'arrêter facilement le daemon ADB et de visualiser les appareils connectés

Le transfert de port inverse vous permet de connecter facilement Chrome sur Android à un serveur Web s'exécutant sur votre hôte local, ce que certains environnements réseau compliquent sans quelques astuces DNS.

Utiliser l'extension ADB

Commencez par installer l'extension Chrome ADB à partir du Chrome Web Store. Cliquez sur Ajouter à Chrome pour installer l'extension.

Une fois l'installation effectuée, une icône de menu Android grise s'affiche dans Chrome. Pour démarrer ADB, cliquez sur l'icône, puis sur Démarrer ADB.

Une fois qu'ADB a démarré, l'icône de menu devient verte et affiche le nombre d'appareils actuellement connectés, le cas échéant.

Cliquez sur Afficher les appareils pour ouvrir la page about:inspect, qui affiche chaque appareil connecté et ses onglets. Pour inspecter un onglet dans les outils de développement, cliquez sur le lien "Inspecter" à côté de son URL.

Si aucun appareil connecté ne s'affiche, vérifiez que votre appareil est connecté à un port USB et que le débogage USB est activé dans les paramètres de Chrome pour Android. Pour obtenir des instructions plus détaillées et des procédures de dépannage, consultez Débogage à distance sur Android.

Transfert de port inverse (expérimental)

En général, vous disposez d'un serveur Web s'exécutant sur votre ordinateur de développement local et vous souhaitez vous connecter à ce site à partir de votre appareil. Si la machine de développement et l'appareil se trouvent sur le même réseau, c'est simple. Mais dans certains cas, par exemple sur les réseaux d'entreprise restreints, cela peut être impossible sans quelques astuces DNS intelligentes. Cette nouvelle fonctionnalité de Chrome pour Android, appelée transfert de port inversé, facilite cette opération. Elle consiste à créer sur votre appareil un port TCP d'écoute qui transfère le trafic via USB vers un port TCP spécifique de votre ordinateur de développement.

Pour utiliser cette fonctionnalité, vous devez disposer des éléments suivants:

• Chrome 28 ou version ultérieure installé sur votre ordinateur de développement
• Chrome pour Android Bêta installé sur votre appareil
• Android Debug Bridge (extension Chrome ADB ou SDK Android complet) installé sur votre ordinateur de développement

Pour utiliser le transfert de port inverse, votre appareil doit être connecté pour le débogage à distance, comme décrit dans la section "Utiliser l'extension ADB". Vous devez ensuite activer le transfert de port inverse et ajouter une règle de transfert de port pour votre application.

Commencez par activer le transfert de port inverse:

1. Ouvrez Chrome sur votre ordinateur de développement.
2. Dans about:flags, activez l'option Activer les expériences liées aux outils pour les développeurs, puis redémarrez Chrome.
3. Ouvrez about:inspect. Votre appareil mobile s'affiche, ainsi qu'une liste de ses onglets ouverts.
4. Cliquez sur le lien "Inspecter" à côté de l'un des sites listés.
5. Dans la fenêtre "Outils de développement" qui s'ouvre, ouvrez le panneau "Paramètres".
6. Sous "Tests", activez l'option Activer le transfert de port inversé.
7. Fermez la fenêtre "Outils de développement", puis revenez à about:inspect.

Ajoutez ensuite une règle de transfert de port:

1. Cliquez de nouveau sur le lien "Inspecter" pour ouvrir les Outils de développement, puis de nouveau sur "Paramètres des Outils de développement".
2. Cliquez sur l'onglet Transfert de port.
3. Dans le champ Port de l'appareil, saisissez le numéro de port auquel Chrome doit se connecter sur votre appareil Android (8080 par défaut).
4. Dans le champ Cible, ajoutez le numéro de port sur lequel votre application Web s'exécute sur votre ordinateur de développement.

   

5. Dans Chrome pour Android, ouvrez localhost:, où correspond à la valeur que vous avez saisie dans le champ Port de l'appareil (8080 par défaut).

Le contenu diffusé par votre ordinateur de développement doit s'afficher.

Visualisation du graphique de flammes pour les profils JavaScript

La nouvelle vue "Graphique de flammes" offre une représentation visuelle du traitement JavaScript au fil du temps, semblable à celle des panneaux "Chronologie" et "Réseau".

L'axe horizontal représente le temps, tandis que l'axe vertical représente la pile d'appel. En haut du panneau, une vue d'ensemble affiche l'intégralité de l'enregistrement. Vous pouvez faire un "zoom avant" sur une zone spécifique de l'aperçu en la sélectionnant avec la souris, comme illustré ci-dessous. L'échelle de temps de la vue détaillée est réduite en conséquence.

Dans la vue détaillée, une pile d'appel est représentée par une pile de "blocs". Un bloc situé au-dessus d'un autre était appelé par le bloc fonction inférieur. Passez la souris sur un bloc donné pour afficher le nom de sa fonction et les données temporelles:

• Nom : nom de la fonction.
• Temps propre : durée nécessaire pour effectuer l'appel en cours de la fonction, y compris les instructions de la fonction elle-même, à l'exclusion des fonctions appelées.
• Durée totale : temps nécessaire pour effectuer l'appel en cours de cette fonction et de toutes les fonctions appelées.
• Temps propre agrégé : temps agrégé pour tous les appels de la fonction au cours de l'enregistrement, à l'exclusion des fonctions appelées par cette fonction.
• Temps total agrégé : durée totale agrégée pour tous les appels de la fonction, y compris les fonctions appelées par celle-ci.

Cliquez sur un bloc de fonction pour ouvrir son fichier JavaScript dans le panneau "Sources", sur la ligne où la fonction est définie.

Pour utiliser le graphique de flammes:

1. Dans les outils de développement, cliquez sur l'onglet Profils.
2. Sélectionnez Record JavaScript CPU profile (Enregistrer un profil de processeur JavaScript), puis cliquez sur Start (Démarrer).
3. Lorsque vous avez terminé de collecter des données, cliquez sur Arrêter.
4. Dans la vue de profil, sélectionnez la visualisation Flame Chart (Graphique de flammes).

   

Cinq fonctionnalités clés de mesure des performances

Pour compléter cette enquête sur les avancées révolutionnaires des outils de développement, nous avons ajouté plusieurs nouvelles fonctionnalités permettant d'examiner les problèmes de performances:

• Mode Peinture continue
• Affichage des rectangles de peinture et des bordures des calques
• FPS
• Rechercher des mises en page synchrones forcées (thrashing de mise en page)
• Suivi de l'allocation d'objets

Mode Peinture continue

Le mode Peinture continue est une option disponible dans les paramètres des outils de développement (Rendu > Activer le repeindre en continu de la page). Elle vous permet d'identifier le coût de rendu d'éléments individuels ou de styles CSS.

Normalement, Chrome n'affiche l'écran qu'en réponse à un changement de mise en page ou de style, et uniquement sur les zones qui doivent être mises à jour. Lorsque vous activez le repeindre en continu de la page, tout l'écran est repeint en permanence. Un affichage tête haute indique le temps nécessaire à Chrome pour afficher la page, ainsi que la période correspondante, ainsi qu'un graphique indiquant la répartition des temps de peinture récents. La ligne horizontale traversant l'histogramme indique la marque de 16,6 ms.

L'avantage est que vous pouvez parcourir l'arborescence DOM dans le panneau "Éléments" et masquer des éléments individuels (appuyez sur la touche H pour masquer l'élément actuellement sélectionné) ou désactiver les styles CSS d'un élément. Vous pouvez voir combien de temps un élément ou un style ajoute à la pondération du rendu de la page, le cas échéant, en remarquant les changements de temps de rendu de la page. Si le masquage d'un seul élément réduit considérablement le délai de rendu, vous savez que vous devez vous concentrer sur le style ou la construction de cet élément.

Pour activer le mode Dessin continu:

1. Ouvrez les paramètres des outils de développement. 1.Dans l'onglet Général, sous Affichage, activez l'option Activer l'application repeinte en continu de la page.

Pour en savoir plus, consultez Profiling Long Paint Time with DevTools' Continuous Painting Mode (Profiler de longs temps de peinture avec le mode de peinture continue des outils de développement).

Affichage des rectangles de peinture et des bordures des calques

Les outils de développement vous permettent aussi d'afficher les zones rectangulaires de l'écran qui sont peintes. (Paramètres > Rendu > Afficher les rectangles de peinture). Par exemple, dans la capture d'écran ci-dessous, un rectangle de peinture est dessiné sur la zone où un effet de survol CSS était appliqué à l'élément graphique violet. C'est une bonne chose, car elle occupe une partie relativement petite de l'écran.

Évitez les pratiques de conception et de développement qui repeindront l'ensemble de l'écran. Par exemple, dans la capture d'écran suivante, l'utilisateur fait défiler la page. Un rectangle de peinture entoure la barre de défilement et un autre entoure le reste de la page. Dans ce cas, le coupable est l'image de fond de l'élément du corps. La position de l'image est définie comme fixe dans CSS, ce qui nécessite que Chrome repeigne toute la page à chaque défilement.

FPS

Le mètre FPS affiche la fréquence d'images actuelle de la page, la fréquence d'images minimale et maximale, un graphique à barres présentant la fréquence d'images au fil du temps et un histogramme qui montre la variabilité de la fréquence d'images.

Pour afficher l'outil de mesure FPS:

1. Ouvrez les paramètres des outils de développement.
2. Cliquez sur Général.
3. Sous Rendu, activez Forcer la composition accélérée et Afficher l'outil de mesure du FPS.

Pour forcer l'affichage permanent de l'outil de mesure de FPS, ouvrez about:flags, activez le compteur de FPS et redémarrez Chrome.

Rechercher des mises en page synchrones forcées (thrashing de mise en page)

Pour optimiser les performances d'affichage, Chrome regroupe normalement les modifications de mise en page demandées par votre application et planifie une transmission de mise en page pour calculer et afficher les modifications demandées de manière asynchrone. Toutefois, si une application demande la valeur d'une propriété dépendant de la mise en page (telle que offsetHeight ou offsetWidth), Chrome est obligé d'effectuer une mise en page immédiatement et de manière synchrone. Ces mises en page synchrones forcées peuvent considérablement réduire les performances de rendu, en particulier lorsqu'elles sont effectuées de manière répétée sur de grandes arborescences DOM. Ce scénario est également appelé "thrashing de la mise en page".

Un enregistrement de la timeline vous avertit lorsqu'il détecte une mise en page synchrone forcée. Une icône d'avertissement jaune apparaît à côté de l'enregistrement de chronologie correspondant. Passez la souris sur l'un de ces enregistrements pour afficher les traces de la pile correspondant au code qui a invalidé la mise en page et celui qui l'a forcée.

Cette fenêtre contextuelle affiche également le nombre de nœuds pour lesquels la mise en page doit être effectuée, la taille de l'arborescence de mise en page, le champ d'application de la mise en page et la racine de la mise en page.

Pour en savoir plus, consultez la démonstration de la timeline: diagnostiquer les mises en page synchrones forcées.

Suivi de l'allocation d'objets

Le suivi de l'allocation d'objets est un nouveau type de profil de mémoire qui montre l'allocation au fil du temps. Lorsque vous lancez le suivi de l'allocation, les outils de développement prennent des instantanés de tas de mémoire en continu au fil du temps. Le profil d'allocation de segments de mémoire indique où les objets sont créés et identifie le chemin de conservation.

Pour suivre les allocations d'objets:

1. Dans les outils de développement, cliquez sur l'onglet Profils.
2. Sélectionnez Enregistrer des allocations de segments de mémoire, puis cliquez sur Démarrer.
3. Une fois la collecte des données terminée, cliquez sur Arrêter l'enregistrement du profil de segment de mémoire (le cercle rouge en bas à gauche du volet de profilage).

Profilage de canevas (expérimental)

Pour finir, nous vous présentons une fonctionnalité entièrement expérimentale. Le profilage de canevas vous permet d'enregistrer et de lire des appels WebGL effectués sur un élément de canevas. Vous pouvez parcourir chaque appel ou groupe d'appels WebGL et afficher le résultat. Vous pouvez également voir le temps nécessaire pour répéter ces appels particuliers.

Pour utiliser le profilage de canevas:

1. Activez la fonctionnalité Inspection du canevas dans l'onglet Tests des paramètres des outils de développement. Si cet onglet ne s'affiche pas, ouvrez about:flags, activez l'option Activer les tests dans les outils pour les développeurs, puis redémarrez Chrome.
2. Cliquez sur l'onglet Profils.
3. Sélectionnez Capture Can frame (Capturer le cadre du canevas), puis cliquez sur Take snapshot (Prendre un instantané).
4. Vous pouvez maintenant explorer les appels utilisés pour créer le cadre du canevas.