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

Kayce Basques

Bienvenue ! Voici les nouvelles fonctionnalités qui seront disponibles dans les outils pour les développeurs de Chrome 64:

• Performance Monitor (Surveillance des performances) consulter les performances d'une page en temps réel ;
• Barre latérale de la console Réduire le bruit de la console et se concentrer sur les messages qui vous intéressent
• Regroupez les messages de console similaires. La console regroupe désormais les messages similaires par défaut.

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 divers aspects du chargement ou des performances d'exécution d'une page, y compris les suivants:

• 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 des utilisateurs signalent que votre application semble lente ou saccadée, consultez le moniteur de performances pour obtenir des indices.

Pourquoi les performances de chargement sont 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 l'outil de surveillance des performances:

1. Ouvrez le menu Command (Commande).

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

   Figure 1 Surveillance des performances

3. Cliquez sur une métrique pour l'afficher ou la masquer. La figure 1 montre les graphiques Utilisation du processeur, Taille de la pile 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 automatisés de charge et de performances d'exécution sur n'importe quelle URL. En savoir plus

Si vous débutez dans l'analyse des performances, nous vous recommandons de commencer par utiliser 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.

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 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 alors que les messages qui incluent ce texte. Compatible également avec les expressions régulières, les filtres négatifs et les filtres d'URL.

Regrouper les messages de 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().

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

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

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

Décochez la case Grouper les éléments similaires 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 repoussée à la dernière minute afin d'éliminer quelques imperfections. Apparemment, l'interface utilisateur "Nouveautés" n'a pas été mise à jour à temps. Désolé !

Cette fonctionnalité sera disponible dans Chrome 65, qui sera publié environ six semaines après Chrome 64. Pour en savoir plus, consultez Forcer des valeurs locales. 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 Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

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