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

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

Kayce Basques

Bienvenue ! Voici quelques-unes des nouvelles fonctionnalités disponibles dans les outils de développement dans Chrome 64:

Analyseur de performances : Affichez 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. Désormais, la console regroupe par défaut les messages similaires.

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

Remarque:Pour vérifier la version de Chrome que vous utilisez, accédez à chrome://version. Si vous exécutez une version antérieure, ces fonctionnalités n'existent pas. Si vous utilisez une version ultérieure, il est possible que ces fonctionnalités aient changé. Une nouvelle version majeure 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 de divers 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 nouveaux calculs de style par seconde.

Si les utilisateurs signalent que votre application semble lente ou irrégulière, consultez l'Analyseur de performances pour obtenir des indices.

L'importance des performances de chargement: BookMyShow a augmenté ses conversions de 80% en développant une progressive web app axée sur la vitesse. En savoir plus

Pour utiliser l'analyseur de performances, procédez comme suit:

Ouvrez le menu Commandes.
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 montre les graphiques Utilisation du processeur, Taille du tas de mémoire JS et Écouteurs d'événements JS.

Fonctionnalités associées:

Panneau Performances. Suivez 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. Peut également servir à analyser les performances de charge. En savoir plus
Panneau Audits. Exécutez une suite de tests automatisés de chargement et d'exécution sur n'importe quelle URL. En savoir plus

Si vous débutez avec l'analyse des performances, nous vous recommandons d'utiliser d'abord le panneau Audits, puis d'approfondir l'analyse à l'aide du panneau Performance ou de la surveillance 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

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

Fonctionnalités associées:

Filtrer. Saisissez du texte pour que la console n'affiche que les messages qui incluent ce texte. Il est également compatible avec les formats d'expression régulière, les filtres négatifs et les filtres d'URL.

Regrouper des messages de la console similaires

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

Exemple de la console regroupant des messages similaires

Image 3. Exemple de la console regroupant des messages similaires

Cliquez sur un groupe pour le développer et afficher 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 (Grouper similaire) pour désactiver cette fonctionnalité.

Fonctionnalités associées:

Vous pouvez regrouper vos propres messages de la console à l'aide de console.group().

Remplacements locaux

Si cette situation se produit, Nous avions initialement prévu le lancement de cette fonctionnalité dans Chrome 64, mais nous l'avons rapprochée de la date limite afin de lisser certaines apparences. 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 en téléchargeant Chrome Canary.

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.