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

Kayce Basques

Voici quelques-unes des nouvelles fonctionnalités et des modifications majeures à venir dans les outils de développement dans Chrome 61:

• Simulation de limitation de la bande passante des appareils mobiles. Définir simultanément la limitation du CPU et du réseau, sur simuler des appareils mobiles de milieu ou d'entrée de gamme.
• Utilisation de l'espace de stockage : Affichez la quantité d'espace de stockage utilisée par une origine, répartie par technologie (base de données indexée, cache, local, session, etc.).
• Horodatages de cache : Affichez les moments où un service worker a mis en cache une réponse.
• Activez l'outil de mesure du FPS depuis le menu de commandes.
• 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 poursuivez votre lecture pour en savoir plus.

Simuler des appareils mobiles d'entrée de gamme et de milieu de gamme en mode Appareil

Le menu Throttling du mode appareil est maintenant affiché par défaut et vous permet de simuler une sur un appareil mobile d'entrée de gamme ou de milieu de gamme en quelques clics.

Figure 1 : Le menu de limitation

Figure 2 : Passez la souris sur le menu Throttling (Limitation de la bande passante) ou ouvrez le menu Capture Settings (Paramètres de capture) pour afficher les Définitions des mobiles de milieu de gamme et des mobiles de bas de gamme

Afficher l'utilisation de l'espace de stockage

La nouvelle section Utilisation de l'onglet Vider l'espace de stockage du panneau Application vous montre comment l'espace de stockage utilisé par une origine, ainsi que le quota maximal pour cette origine sur cet appareil.

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

Afficher les cas où un service worker a mis en cache des réponses

La nouvelle colonne Durée de mise en cache de l'onglet Stockage du cache vous indique quand un service worker a été mis en cache. réponses.

Figure 4. Colonne Durée de mise en cache

Activer le FPS dans le menu de commandes

Vous pouvez désormais activer le mètre FPS dans le menu de commandes.

Figure 5. Activer le mètre FPS à partir du menu de commandes

Définissez le comportement de la molette de la souris pour zoomer ou faire défiler l'écran avec les enregistrements de performances.

Ouvrez Paramètres, puis définissez le nouveau paramètre Action de la molette de la souris Flamechart pour modifier la façon dont se comportent dans le panneau Performances.

Par exemple, lorsque vous utilisez la molette de la souris sur la section Main (Principal) d'un enregistrement ou lorsque vous balayez l'écran avec deux doigts sur un pavé tactile, le comportement par défaut consiste à faire un zoom avant ou arrière. Lorsque vous modifiez 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 Flamechart

Prise en charge du débogage pour les modules ES6

Les modules ES6 sont disponibles de manière native dans Chrome 61. Il ne se passe pas grand-chose ici en ce qui concerne À part le débogage, les outils de développement fonctionnent comme prévu. Essayez de définir des points d'arrêt et en consultant l'implémentation ES6-Module-Module de TodoMVC de Paul Irish pour le constater par vous-même.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement