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

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

Kayce Basques

Bon retour parmi nous ! 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 la publication.

Voici quelques-unes des nouvelles fonctionnalités et des modifications majeures à venir dans les outils de développement dans Chrome 70:

Expressions en direct dans la console :
Mettre en surbrillance les nœuds DOM lors de l'évaluation intensive
Optimisations du panneau "Performances"
Débogage plus fiable.
Activez la limitation de la bande passante depuis le menu de commandes.
Autocomplete Conditional Breakpoints (Points d'arrêt conditionnels pour la saisie semi-automatique).
Arrêt pour les événements AudioContext.
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 visionnez la version vidéo de ce document:

Expressions actives dans la console

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

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

Figure 1 : L'interface utilisateur Live Expression
Saisissez l'expression que vous souhaitez surveiller.

Figure 2 : En saisissant Date.now() dans l'interface utilisateur Live Expression
Cliquez en dehors de l'interface utilisateur Live Expression pour enregistrer votre expression.

Image 3. Une expression active 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 intensive

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

Remarque:Le nœud en surbrillance n'est mis à jour que lors de la saisie. Il n'est pas mis à 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 dans la page, les outils de développement mettent toujours en surbrillance le nœud 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 actif.
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

Lors du profilage d'une grande page, le panneau "Performances" prenait auparavant des dizaines de secondes pour traiter et visualiser les données. Le chargement d'un événement prenait parfois plusieurs secondes pour en savoir plus sur un événement 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 provoquaient la disparition ou le non-déclenchement des points d'arrêt.

Elle corrige également les bugs liés aux cartes sources. Certains utilisateurs de TypeScript demandent aux outils de développement d'ignorer un certain fichier TypeScript lors de l'exécution du code. À la place, les outils de développement ignorent 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 commandes

Vous pouvez désormais définir la limitation de bande passante sur une 3G rapide ou une 3G lente depuis le menu de commandes.

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 Autocomplete

Figure 7 : UI Autocomplete

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

Arrêter 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, 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 les outils de développement, ndb propose également:

Détecter et s'associer aux processus enfants.
Placer des points d'arrêt avant que des 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.

L'UI ndb.

Figure 9. L'UI 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 voulez mesurer le temps qu'il faut à des 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');
});

Ensuite, vous devez marquer la fin du parcours 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, ce qui facilite leur envoi à 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 marquent automatiquement les mesures de votre 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 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 le fait en mode Développement.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.