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

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

Kayce Basques

Bon retour parmi nous ! Les nouvelles fonctionnalités suivantes seront disponibles dans les outils de développement dans Chrome 64:

Analyseur de performances : Consultez les performances d'une page en temps réel.
Barre latérale de la console. Réduisez le bruit de la console et concentrez-vous sur les messages qui sont importants pour vous.
Regroupez les messages similaires de la console. La console regroupe désormais par défaut les messages similaires.

Lisez la suite ou regardez la version vidéo de ces notes de version ci-dessous.

Remarque:Vérifiez la version de Chrome que vous utilisez sur chrome://version. Si vous utilisez une version antérieure, ces fonctionnalités n'existeront pas. Si vous exécutez une version ultérieure, ces fonctionnalités peuvent avoir changé. Une nouvelle version majeure de Chrome est mise à jour automatiquement toutes les six semaines environ.

Surveillance des performances

Le Analyseur de performances vous permet d'obtenir une vue en temps réel des différents aspects des performances de chargement ou d'exécution d'une page, y compris:

Utilisation du processeur.
Taille du tas de mémoire JavaScript.
Nombre total de nœuds DOM, d'écouteurs d'événements JavaScript, de documents et de cadres sur la page.
Mises en page et recalculs de style par seconde

Si les utilisateurs signalent que votre application semble lente ou saccadée, consultez le Analyseur de performances pour obtenir des indices.

Pourquoi les performances de chargement sont-elles importantes ? BookMyShow a enregistré une augmentation de 80% des conversions en créant une progressive web app axée sur la vitesse. En savoir plus

Pour utiliser l'Analyseur de performances:

Ouvrez le menu Command (Commande).
Commencez à saisir Performance, puis sélectionnez Show Performance Monitor.

Figure 1. L'Analyseur de performances
Cliquez sur une métrique pour l'afficher ou la masquer. La figure 1 présente les graphiques Utilisation du processeur, Taille du tas de mémoire JS et Écouteurs d'événements JS.

Fonctionnalités associées:

Performances. Parcourez un parcours utilisateur critique et enregistrez tout ce qui se passe sur la page, y compris l'activité JavaScript, les requêtes réseau, l'utilisation du processeur, etc. Permet également d'analyser les performances de chargement. En savoir plus
Audits. Exécutez une suite de tests automatisés de performances de chargement et d'exécution sur n'importe quelle URL. En savoir plus

Si vous débutez dans l'analyse des performances, nous vous recommandons d'utiliser d'abord le panneau Audits, puis d'approfondir votre analyse à l'aide du panneau Performance ou du panneau Performance.

Sur les sites volumineux, la console peut rapidement être inondée de messages non pertinents. Utilisez la nouvelle barre latérale de la console pour réduire le bruit et vous concentrer sur les messages qui sont importants pour vous.

Utiliser la barre latérale de la console pour afficher uniquement les messages d'erreur

Figure 2 : Utiliser la barre latérale de la console pour afficher uniquement les messages d'erreur

La barre latérale de la console est masquée par défaut. Cliquez sur Show Console Sidebar (Afficher la barre latérale de la console) pour l'afficher.

Fonctionnalités associées:

Filter (Filtre). Saisissez du texte pour que la console n'affiche que les messages qui l'incluent. Il est également compatible avec les modèles d'expression régulière, les filtres négatifs et les filtres d'URL.

Regrouper les messages similaires de la console

La console regroupe désormais par défaut les messages similaires. Par exemple, la figure 3 contient 27 instances du message [Violation] Avoid using document.write().

Exemple de console regroupant des messages similaires

Image 3. Exemple de console regroupant des messages similaires

Cliquez sur un groupe pour le développer et voir chaque instance du message.

Exemple de groupe développé de messages de la console

Figure 4. Exemple de groupe développé de messages de la console

Décochez la case Group Similar (Groupes similaires) pour désactiver cette fonctionnalité.

Fonctionnalités associées:

Vous pouvez regrouper vos propres messages dans la console avec console.group().

Remplacements locaux

Si cette situation se produit, À l'origine, nous avions prévu de lancer cette fonctionnalité dans Chrome 64, mais nous l'avons repoussée à la date limite afin d'atténuer les imperfections. Apparemment, l'interface utilisateur des nouveautés n'a pas été mise à jour à temps. Désolé !

Cette fonctionnalité est disponible dans Chrome 65, qui sera disponible environ six semaines après Chrome 64. Pour en savoir plus, consultez la section Remplacements locaux. Si vous utilisez Windows ou Mac, vous pouvez essayer Chrome 65 dès maintenant en téléchargeant Chrome Canary.

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.