Cette page a été traduite par l'API Cloud Translation.

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éfinissez simultanément la limitation du processeur et du réseau pour simuler des appareils mobiles de milieu ou d'entrée de gamme.
Utilisation de l'espace de stockage : Affichez la quantité de stockage utilisée par une origine, répartie par technologie (indexedDB, 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

Remarque:Vous pouvez vérifier la version de Chrome que vous utilisez sur chrome://version. Une nouvelle version majeure de Chrome est mise à jour automatiquement toutes les six semaines environ.

Regardez la version vidéo de ces notes de version ci-dessous ou poursuivez votre lecture pour en savoir plus.

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

Le menu Throttling du mode appareil est désormais affiché par défaut. Il vous permet de simuler 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 options Mid-tier mobile (Mobile de milieu de gamme) et Low-end mobile (Mobile 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 indique l'espace de stockage utilisé par une origine, ainsi que le quota maximal pour cette origine sur cet appareil.

Section "Utilisation"

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

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 en cache vous indique quand un service worker a mis en cache des réponses.

Colonne Durée de mise en cache

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.

Activer le lecteur de FPS à partir du menu de commandes

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

Paramétrez la molette de la souris pour zoomer ou faire défiler l'écran avec les enregistrements de performances.

Ouvrez Paramètres et définissez le nouveau paramètre Action de la molette de la souris Flamechart pour modifier le comportement de la molette dans le panneau Performances.

Par exemple, lorsque vous utilisez la molette de la souris dans la section Main d'un enregistrement ou que 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 définissez le paramètre sur Scroll (Défilement), ce geste fait désormais défiler l'écran vers le haut ou vers le bas.

Paramètre "Action de la molette de la souris Flamechart"

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 concernant les outils de développement, à part le débogage qui fonctionne comme prévu. Essayez de placer des points d'arrêt et de suivre l'implémentation ES6-Module-Module de TodoMVC de Paul Irish pour 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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.