Nouveautés des outils de développement (Chrome 61)

Kayce Basques

Voici les nouvelles fonctionnalités et les modifications majeures apportées aux outils pour les développeurs dans Chrome 61:

• Simulation de limitation des appareils mobiles Définissez simultanément la limitation du processeur et du réseau pour simuler des appareils mobiles de milieu de gamme ou d'entrée de gamme.
• Utilisation de l'espace de stockage Afficher la quantité d'espace de stockage utilisée par une origine, ventilée par technologie (IndexedDB, cache, local, session, etc.)
• Horodatages du cache Afficher le moment où un service worker a mis en cache une réponse.
• Activez le compteur de FPS dans le menu Command (Commande).
• Modifiez le comportement de la molette de la souris et du pavé tactile dans le panneau "Performances".
• Déboguer les modules ES6 de manière native

Regardez la version vidéo de ces notes de version ci-dessous ou lisez la suite pour en savoir plus.

Simuler des appareils mobiles bas de gamme et de milieu de gamme en mode Appareil

Le menu Limitation du mode Appareil est désormais exposé par défaut. Il vous permet désormais de simuler un appareil mobile bas de gamme ou de milieu de gamme en quelques clics.

Figure 1 : Menu "Limitation"

Figure 2 : Pointez sur le menu Limitation ou ouvrez le menu Paramètres de capture pour afficher les définitions de Mobile de milieu de gamme et de Mobile bas de gamme.

Afficher l'utilisation de l'espace de stockage

La nouvelle section Utilisation de l'onglet Effacer l'espace de stockage du panneau Application indique l'espace de stockage utilisé par une origine, ainsi que le quota maximal de l'origine sur cet appareil.

Figure 3. La section Utilisation indique que https://airhorner.com utilise 66,9 ko sur le quota d'origine de 15 214 Mo.

Afficher quand un service worker a mis en cache des réponses

La nouvelle colonne Heure mise en cache de l'onglet Cache Storage indique quand un service worker a mis en cache des réponses.

Figure 4. Colonne Heure mise en cache

Activer le compteur de FPS dans le menu de commande

Vous pouvez désormais activer le mètre de FPS à partir du menu de commande.

Figure 5. Activer le mètre de FPS à partir du menu Command (Commande)

Définir le comportement de la molette de la souris pour faire un zoom ou un défilement avec les enregistrements de performances

Ouvrez Settings (Paramètres) et définissez le nouveau paramètre Flamechart mouse wheel action (Action de la molette de la courbe de flamme) pour modifier le comportement de la molette de la souris dans le panneau Performances (Performances).

Par exemple, lorsque vous utilisez une molette de souris dans la section Principale d'un enregistrement ou lorsque vous balayez l'écran avec deux doigts sur un pavé tactile, le comportement par défaut est de faire un zoom avant ou arrière. Lorsque vous définissez le paramètre sur Défilement, ce geste permet désormais de faire défiler l'écran vers le haut ou vers le bas.

Figure 6. Paramètre Action de la molette de la souris pour les graphiques de type "flamme"

Compatibilité avec le débogage des modules ES6

Les modules ES6 sont disponibles en mode natif dans Chrome 61. Il n'y a pas grand-chose à faire ici concernant les outils de développement, à part que le débogage fonctionne comme prévu. Essayez de définir des points d'arrêt et de suivre l'implémentation ES6-Module de Paul Irish de TodoMVC pour vous en rendre compte.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.