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

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

Kayce Basques

Bienvenue ! 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. Par défaut, la console regroupe désormais 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 exécutez une version antérieure, ces fonctions n'existeront pas. Si vous exécutez une version ultérieure, ces fonctionnalités peuvent ont changé. Une nouvelle version majeure de Chrome est mise à jour automatiquement toutes les six semaines environ.

Surveillance des performances

Utilisez l'Analyseur de performances pour obtenir une vue en temps réel des divers aspects du chargement d'une page ou les performances d'exécution, 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 est lente ou saccadée, consultez l'Analyseur de performances pour obtenir ou d'indices.

Importance des performances de charge: BookMyShow a augmenté ses conversions de 80% en créant un 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. La Analyseur de performances
Cliquez sur une métrique pour l'afficher ou la masquer. Dans la figure 1, les statistiques Utilisation du processeur, taille du tas de mémoire JS et JS les graphiques des écouteurs d'événements s'affichent.

Fonctionnalités associées:

Performance. Parcourez un parcours utilisateur critique et enregistrez tout ce qui se passe sur y compris l'activité JavaScript, les requêtes réseau, l'utilisation du processeur, etc. Peut également être pour analyser les performances de chargement. En savoir plus
Audits. Exécutez une suite de tests automatisés des 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 Audits, puis étudiez le problème plus en détail à l'aide du panneau Performances ou Performances surveiller.

Sur les sites volumineux, la console peut rapidement être inondée de messages non pertinents. Utiliser la nouvelle Console Barre latérale 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 incluant ce qui suit : du texte. 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

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

Exemple de console regroupant des messages similaires

Figure 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 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'avions approchée une échéance afin d’atténuer quelques approximations. Apparemment, l'interface utilisateur des nouveautés n'a pas été mise à jour dans en temps réel. Désolé !

Cette fonctionnalité est disponible dans Chrome 65, qui sera disponible environ six semaines après Chrome 64. Chèque Remplacements locaux pour en savoir plus. Si vous utilisez Windows ou Mac, vous pouvez essayer Chrome 65 dès maintenant en téléchargez 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 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.