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

Kayce Basques

Bienvenue ! Environ 12 semaines se sont écoulées depuis notre dernière mise à jour, qui concernait Chrome 68. Nous avons ignoré Chrome 69, car nous n'avons pas suffisamment de nouvelles fonctionnalités ni de modifications de l'interface utilisateur pour justifier un post.

Voici quelques-unes des nouvelles fonctionnalités et modifications majeures apportées à DevTools dans Chrome 70:

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

Expressions en direct dans la console

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

  1. Cliquez sur Create Live Expression (Créer une expression instantanée) Créer une expression vivante. L'interface utilisateur Expression en direct s'ouvre.

    UI de l'expression en temps réel

    Figure 1 : UI de l'expression en temps réel

  2. Saisissez l'expression que vous souhaitez surveiller.

    Saisissez Date.now() dans l'interface utilisateur de l'expression en direct.

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

  3. Cliquez en dehors de l'interface utilisateur Live Expression pour enregistrer votre expression.

    Une expression active enregistrée.

    Figure 3. Expression en direct enregistrée

Les valeurs des expressions 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 s'évalue à un nœud DOM dans la console. Évaluation anticipée met désormais en surbrillance ce nœud dans le viewport.

Après avoir saisi document.activeElement dans la console, un nœud est mis en surbrillance dans le viewport.

Figure 4. Étant donné que l'expression actuelle renvoie un nœud, ce nœud est mis en surbrillance dans le viewport.

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 des performances

Lorsque vous profiliez une page volumineuse, le panneau "Performances" prenait auparavant plusieurs dizaines de secondes pour traiter et visualiser les données. Le chargement de l'onglet "Récapitulatif" pour en savoir plus sur un événement nécessitait parfois plusieurs secondes. Le traitement et la visualisation sont plus rapides dans Chrome 70.

Traitement et chargement des données de performances

Figure 5. Traiter et charger les données de performances

Débogage plus fiable

Chrome 70 corrige certains bugs qui provoquaient 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 à DevTools d'ignorer un certain fichier TypeScript lors de l'exécution du code, mais DevTools ignorait l'intégralité du fichier JavaScript groupé. Ces correctifs résolvent également un problème qui entraînait une lenteur d'exécution générale du panneau "Sources".

Activer la limitation de la bande passante depuis le menu de commande

Vous pouvez désormais définir la limitation du débit réseau sur 3G rapide ou 3G lente dans le menu de commande.

Commandes de limitation du réseau dans le menu de commandes.

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

Points d'arrêt conditionnels pour la saisie semi-automatique

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

UI de la saisie semi-automatique

Figure 7 : UI de la saisie semi-automatique

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

Arrêter sur les événements AudioContext

Utilisez le volet Points d'arrêt de l'écouteur d'événements pour mettre en pause sur 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 des contenus audio.

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

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 disponibles via DevTools, ndb propose également les éléments suivants:

  • Détecter et associer des processus enfants.
  • Placer des points d'arrêt avant que des modules ne soient requis.
  • Modifier des fichiers dans l'interface utilisateur de DevTools
  • Par défaut, tous les scripts situés en dehors du répertoire de travail actuel sont ignorés.

Interface utilisateur de ndb.

Figure 9. Interface utilisateur de ndb

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

Conseil supplémentaire: 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 les 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. Tout d'abord, vous devez 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 devez ensuite marquer la fin du trajet et calculer sa durée lorsque l'utilisateur clique 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;

DevTools marque automatiquement vos mesures de temps utilisateur dans la section User Timing (Temps utilisateur) de vos enregistrements de performances.

Section "User Timing" (Temps utilisateur)

Figure 10 : Section "User Timing" (Temps utilisateur)

Cela s'avère également pratique lors du débogage ou de l'optimisation du 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 effectue cette opération en mode développement.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome 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 plates-formes 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.

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.