Chrome DevTools Revolutions 2013

Arthur Evans

Tim Statler

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 présentation de Paul Irish lors de la Google I/O 2013 intitulée Chrome DevTools Revolutions 2013 (Révolutions dans Chrome DevTools en 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é la présentation de Paul, vous pouvez la regarder ci-dessus (n'hésitez pas, nous vous attendons) ou passer directement à la récapitulative des fonctionnalités:

• Workspaces vous permet d'utiliser DevTools comme éditeur de code source.
• Si vous utilisez Sass, vous apprécierez de pouvoir modifier en direct les fichiers Sass (.scss) dans DevTools et de voir vos modifications immédiatement reflétées sur la page.
• Il est possible de déboguer des pages à distance dans Chrome pour Android depuis un certain temps, mais l'extension ADB simplifie la connexion aux appareils Android. Le transfert de port inverse vous permet de vous connecter facilement à localhost sur votre ordinateur de développement à partir de votre appareil.
• Les performances sont toujours un sujet d'inquiétude dans les applications Web. DevTools propose de nombreuses nouvelles fonctionnalités pour vous aider à identifier les goulots d'étranglement, y compris la nouvelle visualisation du graphique en forme de flamme pour le profilage du processeur et plusieurs nouveaux outils de débogage des problèmes de performances liés au rendu et à l'utilisation de la mémoire.

Ces fonctionnalités sont disponibles dans Chrome 28, qui est désormais disponible dans le canal 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 sur 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 montre un exemple d'espace de travail en action. Le site Calendar a été chargé via localhost, tandis que le panneau "Sources" affiche la vue du système de fichiers local du dossier racine du site. Les modifications que vous apportez 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 affiché à côté du nom du fichier.

Appuyer sur Control+S ou Command+S permet de 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 à la fois dans le panneau "Sources" et dans votre éditeur externe. Remarques :

• Les modifications apportées au DOM dans le panneau "Éléments" 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 apportées dans le panneau "Éléments" sont enregistré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 d'un espace de travail se compose de deux étapes: rendre le contenu d'un dossier local disponible pour DevTools et mapper ce dossier sur 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 Autoriser pour accorder aux outils de développement un accès complet au dossier.

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

Mappage d'un dossier sur 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 sur une URL:

1. Dans le panneau "Sources", effectuez un clic droit ou un clic avec la touche Ctrl sur un fichier dans un dossier de l'espace de travail.
2. Sélectionnez Map to Network Resource (Map to Network Resource).

   

3. Sélectionnez la ressource réseau correspondante à partir de la page actuellement chargée.

   

4. Actualisez la page dans Chrome.

Le panneau "Sources" ne doit désormais afficher que le contenu du dossier de l'espace de travail local de votre site, et non les sources localhost, comme illustré ci-dessous.

Remarque:Si les sources localhost s'affichent toujours, actualisez la page dans Chrome.

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

• Effectuez un clic droit (ou appuyez sur Ctrl+clic) sur une ressource réseau, puis sélectionnez Mapper avec la ressource du système de fichiers.
• Ajoutez des mappages manuellement dans l'onglet "Espace de travail" de la boîte de dialogue "Paramètres de DevTools".

Débogage des cartes sources Sass/CSS

Le débogage Sass (CSS Source Map) vous permet de modifier en direct les fichiers Sass (.scss) dans le panneau "Sources" et d'afficher les résultats sans avoir à quitter DevTools 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 "Éléments" 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 que vous souhaitez à ce fichier.

Lorsque vous enregistrez des modifications apportées à un fichier SCSS (dans DevTools ou ailleurs), le compilateur Sass génère à nouveau les fichiers CSS. DevTools recharge ensuite le fichier CSS nouvellement généré.

Remarque:Techniquement, cette fonctionnalité devrait fonctionner avec n'importe quel préprocesseur CSS compatible avec les cartes sources. Pour en savoir plus, consultez la section Utiliser des préprocesseurs CSS dans la documentation DevTools.

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 la seule version compatible avec la génération de mappe de sources.

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

Vous devez également activer la fonctionnalité de débogage Sass dans les tests DevTools:

1. Ouvrez about:flags dans Chrome.
2. Activez Activer les tests des outils pour les développeurs.
3. Redémarrez Chrome.
4. Ouvrez les paramètres des outils de développement, puis cliquez sur Tests.
5. Activez Compatibilité avec Sass (ou 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 de mappage source 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 CSS compilé. Le fichier de mappage de sources est un fichier JSON qui définit les mappages entre le fichier .scss et les fichiers .css. Chaque fichier CSS contient une annotation qui spécifie l'URL de son fichier de mappage 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 comme celui-ci, avec l'annotation sourceMappingURL:

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

Vous trouverez ci-dessous un exemple de fichier de mappage de sources:

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

Débogage à distance plus facile dans Chrome pour Android

Deux nouvelles fonctionnalités dans les outils pour les développeurs facilitent la configuration du débogage à distance dans Chrome pour Android: l'extension ADB et le transfert de port inverse.

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

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

Le transfert de port inverse permet de connecter facilement Chrome sur Android à un serveur Web exécuté sur votre localhost, ce qui est difficile dans certains environnements réseau sans quelques astuces DNS.

Utiliser l'extension ADB

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

Remarque:L'installation d'extensions à partir du Chrome Web Store n'est pas disponible sous Windows 8. Si vous rencontrez des problèmes lors de l'installation à partir du Chrome Web Store, consultez Débogage à distance sur Android pour obtenir d'autres instructions d'installation.

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

Une fois ADB démarré, l'icône du 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 "Inspect" (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 étapes de dépannage, consultez Débogage à distance sur Android.

Transfert de port inverse (expérimental)

En général, un serveur Web s'exécute sur votre ordinateur de développement local, et vous souhaitez vous connecter à ce site depuis votre appareil. Si l'ordinateur de développement et l'appareil se trouvent sur le même réseau, la procédure est simple. Toutefois, dans certains cas, comme sur les réseaux d'entreprise soumis à des restrictions, cela peut s'avérer impossible sans quelques astuces DNS. Une nouvelle fonctionnalité de Chrome pour Android appelée transfert de port inverse permet de le faire facilement. Elle consiste à créer un port TCP d'écoute sur votre appareil qui transfère le trafic via USB vers un port TCP particulier sur votre ordinateur de développement.

Pour utiliser cette fonctionnalité, vous avez besoin de:

• Chrome 28 ou version ultérieure installée 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, vous devez connecter votre appareil 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 Enable Developer Tools experiments (Activer les tests des outils pour les développeurs) et redémarrez Chrome.
3. Ouvrez about:inspect. Votre appareil mobile et la liste des onglets ouverts devraient s'afficher.
4. Cliquez sur le lien "Inspecter" à côté de l'un des sites listés.
5. Dans la fenêtre DevTools qui s'ouvre, ouvrez le panneau "Settings" (Paramètres).
6. Sous "Tests", activez l'option Enable reverse port forwarding (Activer le transfert de port inverse).
7. Fermez la fenêtre des outils de développement, puis revenez à about:inspect.

Ajoutez ensuite une règle de transfert de port:

1. Cliquez à nouveau sur le lien "Inspecter" pour ouvrir les outils de développement, puis ouvrez à nouveau les 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 (par défaut, 8080).
4. Dans le champ Target (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 (par défaut : 8080).

Le contenu doit être diffusé par votre ordinateur de développement.

Visualisation du graphique en forme de flamme pour les profils JavaScript

La nouvelle vue graphique en forme de flamme fournit une représentation visuelle du traitement JavaScript au fil du temps, semblable à celle que vous trouverez dans les panneaux "Chronologie" et "Réseau".

L'axe horizontal représente le temps, et l'axe vertical la pile d'appels. En haut du panneau, une vue d'ensemble affiche l'intégralité de l'enregistrement. Vous pouvez faire un "zoom avant" sur une région de la vue d'ensemble en la sélectionnant avec la souris, comme illustré ci-dessous. La chronologie de la vue détaillée est réduite en conséquence.

Dans la vue d'informations, une pile d'appels est représentée sous la forme d'une pile de "blocs" de fonction. Un bloc situé au-dessus d'un autre a été appelé par le bloc de fonction inférieur. Pointez sur un bloc donné pour afficher son nom de fonction et ses données de temporisation:

• Nom : nom de la fonction.
• Temps propre : durée d'exécution de l'appel actuel de la fonction, y compris uniquement les instructions de la fonction elle-même, mais sans inclure les fonctions qu'elle a appelées.
• Durée totale : temps nécessaire pour effectuer l'appel actuel de cette fonction et toutes les fonctions qu'elle a appelées.
• Temps propre agrégé : temps agrégé pour tous les appels de la fonction dans l'enregistrement, sans inclure les fonctions appelées par cette fonction.
• Temps total cumulé : temps total cumulé pour tous les appels de la fonction, y compris les fonctions appelées par cette fonction.

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

Pour utiliser le graphique en forme de flamme:

1. Dans les outils de développement, cliquez sur l'onglet Profiles (Profils).
2. Sélectionnez Enregistrer le profil du processeur JavaScript, puis cliquez sur Démarrer.
3. Lorsque vous avez terminé de collecter des données, cliquez sur Arrêter.
4. Dans la vue "Profil", sélectionnez la visualisation Graphique en flammes.

   

Cinq fonctionnalités clés de mesure des performances

Pour compléter cette présentation des avancées révolutionnaires des outils pour les développeurs, voici plusieurs nouvelles fonctionnalités permettant d'étudier les problèmes de performances:

• Mode de peinture continue
• Afficher les rectangles de peinture et les bordures des calques
• Compteur de FPS
• Rechercher des mises en page synchrones forcées (mise en page instable)
• Suivi de l'allocation des objets

Mode de peinture continue

Le mode de peinture continue est une option disponible dans les paramètres des outils de développement (Rendering > Enable continuous page repainting, "Rendu" > "Activer la remise en peinture continue de la page"). Elle vous permet d'identifier le coût de rendu de certains éléments ou styles CSS.

En règle générale, Chrome ne peint que sur l'écran en réponse à un changement de mise en page ou de style, et uniquement dans les régions de l'écran qui doivent être mises à jour. Lorsque vous activez le repeinturage continu de la page, l'ensemble de l'écran est constamment repeint. Un affichage en tête d'écran indique le temps que Chrome met à peindre la page, ainsi que la plage de temps et un graphique illustrant la distribution des temps de peinture récents. La ligne horizontale de l'histogramme indique la marque de 16,6 ms.

L'avantage de cette approche 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 le temps qu'un élément ou un style ajoute au "poids" du rendu de la page, le cas échéant, en observant les modifications apportées au temps de peinture de la page. Si le masquage d'un seul élément réduit considérablement les temps de peinture, vous savez que vous devez vous concentrer sur le style ou la construction de cet élément.

Pour activer le mode de peinture continue:

1. Ouvrez les paramètres des outils pour les développeurs. 1.Dans l'onglet General (Général), sous Rendering (Rendu), activez Enable continuous page repainting (Activer la remise en peinture continue de la page).

Remarque:Si cette option ne s'affiche pas dans les paramètres, ouvrez about:flags, activez Compositing GPU sur toutes les pages, puis redémarrez Chrome.

Pour en savoir plus, consultez Profiler les temps de peinture longs avec le mode de peinture continue de DevTools.

Afficher les rectangles de peinture et les bordures des calques

Une autre option de DevTools permet d'afficher les régions rectangulaires de l'écran sur lesquelles sont peintes. (Paramètres > Rendu > Afficher les rectangles à peindre). Par exemple, dans la capture d'écran ci-dessous, un rectangle de peinture est dessiné sur la région où un effet de survol CSS était appliqué au graphique violet. C'est une bonne chose, car il s'agit d'une partie relativement petite de l'écran.

Vous devez éviter les pratiques de conception et de développement qui entraînent la remise en peinture de l'intégralité de l'écran. Par exemple, dans la capture d'écran suivante, l'utilisateur fait défiler la page. Un rectangle peint entoure la barre de défilement, et un autre entoure tout le reste de la page. Dans ce cas, l'image de fond de l'élément body est en cause. La position de l'image est définie sur "fixed" (fixe) en CSS, ce qui oblige Chrome à repeindre l'intégralité de la page à chaque défilement.

Compteur de FPS

Le mètre de FPS affiche la fréquence d'images actuelle de la page, la fréquence d'images minimale et maximale, un graphique à barres montrant la fréquence d'images au fil du temps, ainsi qu'un histogramme illustrant la variabilité de la fréquence d'images.

Pour afficher le compteur de FPS:

1. Ouvrez les paramètres des outils pour les développeurs.
2. Cliquez sur Général.
3. Sous Affichage, activez Forcer la composition accélérée et Afficher le compteur de FPS.

Vous pouvez forcer l'affichage permanent du compteur de FPS en ouvrant about:flags, en activant le compteur de FPS et en redémarrant Chrome.

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

Pour maximiser les performances de rendu, Chrome regroupe normalement les modifications de mise en page demandées par votre application et planifie une étape de mise en page pour calculer et afficher de manière asynchrone les modifications demandées. Toutefois, si une application demande la valeur d'une propriété dépendante de la mise en page (comme offsetHeight ou offsetWidth), Chrome est obligé d'effectuer immédiatement et de manière synchrone une mise en page de la page. Ces mises en page synchrones forcées peuvent réduire considérablement 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 a également été appelé "mise en page chaotique".

Un enregistrement Vos trajets vous avertit lorsqu'il détecte une mise en page synchrone forcée. Une icône d'avertissement jaune s'affiche alors à côté de l'enregistrement Vos trajets correspondant. Pointez sur l'un de ces enregistrements pour afficher les traces de la pile pour le code qui a invalidé la mise en page et le code qui a forcé la mise en page.

Ce pop-up indique également le nombre de nœuds nécessitant une mise en page, la taille de l'arborescence de remise 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émo de Timeline: diagnostiquer les mises en page synchrones forcées.

Suivi de l'allocation des objets

Le suivi des allocations d'objets est un nouveau type de profil de mémoire qui affiche les allocations au fil du temps. Lorsque vous commencez le suivi des allocations, DevTools prend des instantanés du tas de mémoire en continu au fil du temps. Le profil d'allocation de tas 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 Profiles (Profils).
2. Sélectionnez Enregistrer les allocations de tas, puis cliquez sur Démarrer.
3. Lorsque vous avez terminé de collecter des données, cliquez sur Arrêter l'enregistrement du profil de tas (cercle rouge en bas à gauche du volet de profilage).

Profilage du canevas (expérimental)

Enfin, voici une fonctionnalité entièrement expérimentale à explorer. Le profilage de canevas vous permet d'enregistrer et de lire les appels WebGL effectués sur un élément de canevas. Vous pouvez suivre les appels WebGL individuels ou les groupes d'appels, et afficher les résultats affichés. Vous pouvez également voir le temps qu'il a fallu pour lire ces appels en particulier.

Pour utiliser le profilage de canevas:

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