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

Kayce Basques

Bienvenue ! Il y a environ 12 semaines que nous avons publié la dernière mise à jour, qui concernait Chrome 68. Nous avons sauté la version 69 de Chrome, car nous n'avions pas assez de nouvelles fonctionnalités ni de modifications de l'UI pour justifier un post.

Voici les nouvelles fonctionnalités et les principaux changements apportés aux outils pour les développeurs dans Chrome 70 :

• Expressions en direct dans la console
• Mettez en surbrillance les nœuds DOM lors de l'évaluation stricte.
• Optimisations du panneau "Performances"
• Débogage plus fiable.
• Activez la limitation de la bande passante à partir du menu Command.
• Points d'arrêt conditionnels pour la saisie semi-automatique
• Arrêtez-vous sur les événements AudioContext.
• Déboguez les applications Node.js avec ndb.
• Conseil bonus : Mesurez les interactions réelles des utilisateurs avec l'API User Timing.

Lisez la suite ou regardez la version vidéo de ce document :

Expressions en direct dans la console

Épinglez une expression Live en haut de votre console lorsque vous souhaitez surveiller sa valeur en temps réel.

1. Cliquez sur Créer une expression en direct . L'UI Live Expression s'ouvre.

   

   Figure 1 : Interface utilisateur de l'expression en direct

2. Saisissez l'expression que vous souhaitez surveiller.

   

   Figure 2 : Saisir Date.now() dans l'interface utilisateur de l'expression active

3. Cliquez en dehors de l'interface utilisateur des expressions en direct pour enregistrer votre expression.

   

   Figure 3. Une expression active enregistrée

Les valeurs d'expression faciale en direct sont mises à jour toutes les 250 millisecondes.

Mettre en surbrillance les nœuds DOM lors de l'évaluation stricte

Saisissez une expression qui correspond à un nœud DOM dans la console. L'évaluation anticipée met désormais en surbrillance ce nœud dans la fenêtre d'affichage.

Figure 4. Étant donné que l'expression actuelle est évaluée à un nœud, ce nœud est mis en surbrillance dans la fenêtre d'affichage.

Voici quelques expressions qui pourraient vous être utiles :

• document.activeElement pour mettre en surbrillance le nœud actuellement sélectionné.
• document.querySelector(s) pour mettre en surbrillance un nœud arbitraire, où s est un sélecteur CSS. Cela équivaut à pointer sur un nœud dans l'arborescence DOM.
• $0 pour mettre en surbrillance le nœud actuellement sélectionné dans l'arborescence DOM.
• $0.parentElement pour mettre en surbrillance le parent du nœud actuellement sélectionné.

Optimisations du panneau "Performances"

Lors du profilage d'une grande page, le panneau "Performances" mettait auparavant des dizaines de secondes à traiter et à visualiser les données. Il fallait parfois plusieurs secondes pour que les informations sur un événement s'affichent dans l'onglet "Résumé". Le traitement et la visualisation sont plus rapides dans Chrome 70.

Figure 5. Traitement et chargement des données de performances

Débogage plus fiable

Chrome 70 corrige certains bugs qui entraînaient la disparition ou le non-déclenchement des points d'arrêt.

Il corrige également les bugs liés aux mappages source. Certains utilisateurs de TypeScript demandaient aux outils de développement d'ignorer un certain fichier TypeScript lors du débogage du code, mais les outils de développement ignoraient plutôt l'intégralité du fichier JavaScript groupé. Ces correctifs résolvent également un problème qui ralentissait généralement le panneau "Sources".

Activer la limitation de la bande passante à partir du menu de commandes

Vous pouvez désormais définir la limitation du réseau sur "3G rapide" ou "3G lente" depuis le menu de commandes.

Figure 6. Commandes de limitation de bande passante réseau dans le menu de commandes

Points d'arrêt conditionnels de saisie semi-automatique

Utilisez l'interface utilisateur de saisie semi-automatique pour saisir plus rapidement vos expressions de point d'arrêt conditionnel.

Figure 7 : Interface utilisateur de saisie semi-automatique

Le saviez-vous ? L'UI de saisie semi-automatique est possible grâce à CodeMirror, qui alimente également la console.

Arrêt sur les événements AudioContext

Utilisez le volet Points d'arrêt de l'écouteur d'événements pour mettre en pause la première ligne d'un gestionnaire d'événements de cycle de vie AudioContext.

AudioContext fait partie de l'API Web Audio, que vous pouvez utiliser pour traiter et synthétiser l'audio.

Figure 8. Événements AudioContext dans le volet "Points d'arrêt de l'écouteur d'événements"

Déboguer des applications Node.js avec ndb

ndb est un nouveau débogueur pour les applications Node.js. En plus des fonctionnalités de débogage habituelles des outils de développement, ndb propose également :

• Détection et association aux processus enfants.
• Les points d'arrêt doivent être placés avant les modules.
• Modifier des fichiers dans l'interface utilisateur des outils de développement.
• Par défaut, tous les scripts en dehors du répertoire de travail actuel sont ignorés.

Figure 9. Interface utilisateur de ndb

Pour en savoir plus, consultez le fichier README de ndb.

Conseil bonus : Mesurez les interactions réelles des utilisateurs avec l'API User Timing

Vous souhaitez mesurer le temps nécessaire aux utilisateurs réels pour effectuer des parcours critiques sur vos pages ? Envisagez d'instrumenter votre code avec l'API User Timing.

Par exemple, supposons que vous souhaitiez mesurer le temps qu'un utilisateur passe sur votre page d'accueil avant de cliquer sur votre bouton d'incitation à l'action (CTA). Vous devez d'abord marquer le début du parcours dans un gestionnaire d'événements associé à un événement de chargement de page, tel que DOMContentLoaded :

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Vous marquerez ensuite la fin du trajet et calculerez sa durée lorsque l'utilisateur cliquera sur le bouton :

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Vous pouvez également extraire vos mesures pour les envoyer facilement à votre service d'analyse afin de collecter des données agrégées et anonymes :

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

Les outils de développement marquent automatiquement vos mesures User Timing dans la section User Timing de vos enregistrements de performances.

Figure 10 : Section "Temps utilisateur"

Cela s'avère également utile pour déboguer ou optimiser le code. Par exemple, si vous souhaitez optimiser une certaine phase de votre cycle de vie, appelez window.performance.mark() au début et à la fin de votre fonction de cycle de vie. React le fait en mode Développement.

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 Chrome DevTools

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 en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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 de DevTools.