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

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'avions pas suffisamment de nouvelles fonctionnalités ou de modifications de l'interface utilisateur pour justifier une publication.

Les nouvelles fonctionnalités et modifications majeures apportées aux outils de développement dans Chrome 70 incluent:

Expressions actives dans la console
Mettez en surbrillance les nœuds DOM lors de l'évaluation eager.
Optimisations du panneau "Performances"
Débogage plus fiable.
Activez la limitation de la bande passante réseau dans le menu "Commandes".
Points d'arrêt conditionnels de la saisie semi-automatique.
Pause lors de AudioContext événements.
Déboguer des applications Node.js avec ndb
Astuce supplémentaire: Mesurez les interactions utilisateur réelles 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 en direct en haut de votre console lorsque vous souhaitez surveiller sa valeur en temps réel.

Cliquez sur Créer une expression active . L'interface utilisateur Live Expression s'ouvre.

Figure 1 : Interface utilisateur des expressions en direct
Saisissez l'expression que vous souhaitez surveiller.

Figure 2 : Saisir Date.now() dans l'interface utilisateur des expressions en direct
Cliquez en dehors de l'interface utilisateur "Expression instantanée" pour enregistrer votre expression.

Image 3. Une expression instantanée 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 eager

Saisissez une expression qui renvoie un nœud DOM dans la console. Eager Evaluation met alors ce nœud en surbrillance dans la fenêtre d'affichage.

Remarque:Le nœud en surbrillance n'est mis à jour que lorsque vous saisissez du texte. Elle n'est pas mise à jour à intervalles réguliers. Par exemple, si vous saisissez document.activeElement, qui suit l'élément sélectionné, puis que vous utilisez la touche de tabulation pour parcourir la page, les outils de développement mettent toujours en surbrillance le nœud qui était actif au moment où vous avez saisi l'expression.

Lorsque vous saisissez document.activeElement dans la console, un nœud est mis en surbrillance dans la fenêtre d'affichage.

Figure 4. Étant donné que l'expression actuelle correspond à 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 à passer la souris 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" prenait auparavant quelques dizaines de secondes pour traiter et visualiser les données. Lorsque l'utilisateur cliquait sur un événement pour en savoir plus à son sujet dans l'onglet "Résumé", il pouvait également prendre plusieurs secondes pour se charger. Le traitement et la visualisation sont plus rapides dans Chrome 70.

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

Débogage plus fiable

Chrome 70 corrige certains bugs qui causaient la disparition des points d'arrêt ou ne se déclenchent pas.

Il corrige également des bugs liés aux cartes sources. Certains utilisateurs de TypeScript indiquent aux outils de développement d'ignorer un fichier TypeScript spécifique lors de l'exécution du code. À la place, ils ignorent l'intégralité du fichier JavaScript groupé. Ces correctifs résolvent également un problème qui entraînait le fonctionnement général du panneau "Sources".

Activer la limitation de bande passante réseau à partir du menu Commandes

Dans le menu Commandes, vous pouvez désormais définir la limitation de la bande passante réseau sur 3G rapide ou 3G lente.

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

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

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

Utilisez l'interface utilisateur Autocomplete pour saisir plus rapidement vos expressions de point d'arrêt conditionnel.

Interface utilisateur d'Autocomplete

Figure 7 : Interface utilisateur d'Autocomplete

Le saviez-vous ? L'interface utilisateur Autocomplete est possible grâce à CodeMirror, qui alimente également la console.

Coupure sur les événements AudioContext

Utilisez le volet Points d'arrêt de l'écouteur d'événements pour marquer une 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, qui vous permet de traiter et de 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 fournies par les outils de développement, ndb propose également:

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

Interface utilisateur ndb

Figure 9. Interface utilisateur ndb

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

Astuce supplémentaire: Mesurez les interactions utilisateur réelles avec l'API User Timing

Vous souhaitez mesurer le temps que mettent des utilisateurs réels à 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 le 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');
});

Ensuite, marquez la fin du parcours et calculez 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, ce qui vous permet de les envoyer facilement à votre service d'analyse pour collecter des données agrégées anonymes:

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

Les outils de développement balisent automatiquement vos mesures de temps utilisateur dans la section Temps utilisateur de vos enregistrements de performances.

Section "Temps utilisateur"

Figure 10 : Section "Temps utilisateur"

Cela s'avère également utile 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 le fait en mode Développement.

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.