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

Kayce Basques

Voici les nouvelles fonctionnalités et les principaux changements apportés aux outils de développement dans Chrome 61 :

• Simulation de la limitation du débit sur un appareil mobile : Définissez simultanément la limitation du processeur et du réseau pour simuler des appareils mobiles milieu de gamme ou bas de gamme.
• Utilisation de l'espace de stockage. Affichez la quantité de stockage utilisée par une origine, ventilée par technologie (IndexedDB, cache, local, session, etc.).
• Horodatages du cache Affichez le moment où un service worker a mis en cache une réponse.
• Activez le compteur de FPS depuis le menu Command.
• Modifier le comportement de la molette de la souris et du pavé tactile dans le panneau "Performances"
• Déboguez 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 et milieu de gamme en mode Appareil

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

Figure 1 : Le menu "Limitation"

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

Afficher l'utilisation de l'espace de stockage

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

Figure 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 réponses mises en cache par un service worker

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

Figure 4. Colonne Heure de mise en cache

Activer le compteur de FPS depuis le menu de commandes

Vous pouvez désormais activer le compteur de FPS depuis le menu de commandes.

Figure 5. Activer le compteur de FPS depuis le menu Command

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

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

Par exemple, lorsque vous utilisez une molette de souris dans la section Principal d'un enregistrement ou que vous balayez l'écran avec deux doigts sur un pavé tactile, le comportement par défaut consiste à effectuer un zoom avant ou arrière. Lorsque vous définissez le paramètre sur Défilement, ce geste permet 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 ne se passe pas grand-chose ici en ce qui concerne les outils de développement, si ce n'est que le débogage fonctionne comme prévu. Essayez de définir des points d'arrêt et de parcourir l'implémentation des modules ES6 de Paul Irish de TodoMVC pour vous en rendre compte par vous-même.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

Nouveautés des outils pour les développeurs

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