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

Kayce Basques
Kayce Basques
X GitHub

Bienvenue ! Voici quelques-unes des nouvelles fonctionnalités qui seront disponibles dans les outils pour les développeurs Chrome 64 :

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

Surveillance des performances

Utilisez le moniteur de performances pour obtenir une vue en temps réel de différents aspects des performances de chargement ou d'exécution d'une page, y compris :

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

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

Pourquoi les performances de chargement sont-elles importantes ? BookMyShow a enregistré une augmentation de 80 % des conversions lorsqu'il a créé une application Web progressive axée sur la vitesse. En savoir plus

Pour utiliser le Moniteur de performances :

  1. Ouvrez le menu Command (Commande).

  2. Commencez à saisir Performance, puis sélectionnez Show Performance Monitor.

    Analyseur de performances Figure 1. Le moniteur de performances

  3. Cliquez sur une métrique pour l'afficher ou la masquer. La figure 1 montre les graphiques Utilisation du processeur, Taille du tas JS et Écouteurs d'événements JS.

Fonctionnalités associées :

  • Panneau 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 et bien plus encore. Peut également être utilisé pour analyser les performances de chargement. En savoir plus
  • Panneau Audits. Exécutez une suite de tests de charge et de performances d'exécution automatisés 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 Performances ou du moniteur Performances.

Barre latérale de la console

Sur les grands sites, 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 vous intéressent.

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

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

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

Fonctionnalités associées :

  • Zone de texte Filtre. Saisissez du texte. La console n'affiche que les messages qui incluent ce texte. Il est également compatible avec les expressions régulières, les filtres négatifs et les filtres d'URL.

Regrouper les messages de la console similaires

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

Exemple de regroupement des messages similaires dans la console

Figure 3. Exemple de regroupement des messages similaires dans la console

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

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

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

Décochez la case Regrouper les semblables pour désactiver cette fonctionnalité.

Fonctionnalités associées :

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

Remplacements locaux

Si cette situation se produit, Nous avions initialement prévu de lancer cette fonctionnalité dans Chrome 64, mais nous l'avons retirée peu avant la date limite afin de corriger quelques imperfections. Apparemment, l'interface utilisateur "Nouveautés" n'a pas été mise à jour à temps. Désolé !

Cette fonctionnalité sera disponible dans Chrome 65, soit environ six semaines après Chrome 64. Pour en savoir plus, consultez 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

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.

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.