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

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

Kayce Basques

Voici les nouvelles fonctionnalités et les principales modifications apportées aux outils de développement dans Chrome 61:

Simulation de limitation de la bande passante sur les 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é d'espace de stockage utilisée par une origine, pour chaque technologie (IndexedDB, cache, local, session, etc.).
Codes temporels du cache : Indique quand un service worker a mis en cache une réponse.
Activez le lecteur d'empreinte digitale dans le menu "Commandes".
Modifiez le comportement de la roulette de la souris et du pavé tactile dans le panneau "Performances".
Déboguer les modules ES6 de manière native

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

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

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

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

Figure 1 : Menu de limitation

Figure 2 : Passez la souris sur le menu Throttling (Limitation) 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 bas de gamme).

Afficher l'utilisation de l'espace de stockage

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

Section "Utilisation"

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

Afficher la date de mise en cache des réponses par un service worker

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

Colonne "Heure de mise en cache"

Figure 4. Colonne Durée de mise en cache

Activer le lecteur d'empreinte digitale depuis le menu de commandes

Vous pouvez désormais activer le FPS Meter dans le menu Commandes.

Activer l'outil de mesure FPS depuis le menu de commandes

Figure 5. Activer le FPS Meter depuis le menu Commandes

Définir le comportement de la roulette de la souris pour zoomer ou faire défiler avec les enregistrements de performances

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

Par exemple, lorsque vous utilisez la molette de la souris sur la section Main 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 définissez le paramètre sur Scroll (Faire défiler), ce geste défile désormais vers le haut ou vers le bas.

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

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

Débogage des modules ES6

Les modules ES6 sont disponibles en natif dans Chrome 61. Il n'y a pas grand-chose à faire avec 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 du module ES6 de Paul Irish de TodoMVC pour le constater par vous-même.

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.